Joran design system

Timeline 

<div class="c-timeline">
    <div class="o-container">
        <h2 class="u-h2">L'activité en 2020</h2>
        <a href="#nowhere" class="c-button c-button--transparent-alt c-slider__article-button"><span>lire la suite</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14">
                <path d="M1 1l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </a>

        <ul class="c-timeline__items" aria-hidden="true">

            <li class="c-timeline__item">
                <div class="o-card-link c-timeline__item-content">
                    <div class="c-timeline__item-img">
                        <div class="c-timeline__item-img-bg">
                            <img src="https://source.unsplash.com/6uneKLGrJPs/280x120" alt="alternative text">
                        </div>
                    </div>
                    <div class="c-timeline__item-text-container">
                        <h3 class="c-timeline__item-text"><a href="#nowehre" class="o-card-link__link">Jeux olympique de la jeunesse</a></h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" aria-hidden="true">
                            <g>
                                <g transform="rotate(90 5 5.5)">
                                    <path fill="#fff" d="M5 .5l5.5 10h-11z" />
                                </g>
                            </g>
                        </svg>
                        <span class="c-timeline__item-header"><span class="u-visually-hidden">du </span><time datetime="2021-01-09">09.01</time> <span class="u-visually-hidden">au</span><span aria-hidden="true">-</span> <time datetime="2021-01-22">22.01</time></span>
                    </div>
                </div>
            </li>

            <li class="c-timeline__item">
                <div class="o-card-link c-timeline__item-content">
                    <div class="c-timeline__item-img">
                        <div class="c-timeline__item-img-bg">
                            <img src="https://source.unsplash.com/JHOKa8qcQ_A/280x373" alt="alternative text">
                        </div>
                    </div>
                    <div class="c-timeline__item-text-container">
                        <h3 class="c-timeline__item-text"><a href="#nowehre" class="o-card-link__link">Gestion de la crise sanitaire du COVID-19</a></h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" aria-hidden="true">
                            <g>
                                <g transform="rotate(90 5 5.5)">
                                    <path fill="#fff" d="M5 .5l5.5 10h-11z" />
                                </g>
                            </g>
                        </svg>
                        <span class="c-timeline__item-header"><span class="u-visually-hidden">du </span><time datetime="2021-02-02">02.02</time> <span class="u-visually-hidden">au</span><span aria-hidden="true">-</span> <time datetime="2021-03-01">01.03</time></span>
                    </div>
                </div>
            </li>

            <li class="c-timeline__item">
                <div class="o-card-link c-timeline__item-content">
                    <div class="c-timeline__item-img">
                        <div class="c-timeline__item-img-bg">
                            <img src="https://source.unsplash.com/m1AfZRZQ-sg/280x280" alt="alternative text">
                        </div>
                    </div>
                    <div class="c-timeline__item-text-container">
                        <h3 class="c-timeline__item-text"><a href="#nowehre" class="o-card-link__link">Homicide et tentative d&#39;homicide à Grandson</a></h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" aria-hidden="true">
                            <g>
                                <g transform="rotate(90 5 5.5)">
                                    <path fill="#fff" d="M5 .5l5.5 10h-11z" />
                                </g>
                            </g>
                        </svg>
                        <span class="c-timeline__item-header"><span class="u-visually-hidden">du </span><time datetime="2021-07-28">28.07</time> <span class="u-visually-hidden">au</span><span aria-hidden="true">-</span> <time datetime="2021-08-03">03.08</time></span>
                    </div>
                </div>
            </li>

            <li class="c-timeline__item">
                <div class="o-card-link c-timeline__item-content">
                    <div class="c-timeline__item-img">
                        <div class="c-timeline__item-img-bg">
                            <img src="https://source.unsplash.com/pLFNq3iQ8ew/280x280" alt="alternative text">
                        </div>
                    </div>
                    <div class="c-timeline__item-text-container">
                        <h3 class="c-timeline__item-text"><a href="#nowehre" class="o-card-link__link">Fraudes présumées aux crédits COVID-19</a></h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" aria-hidden="true">
                            <g>
                                <g transform="rotate(90 5 5.5)">
                                    <path fill="#fff" d="M5 .5l5.5 10h-11z" />
                                </g>
                            </g>
                        </svg>
                        <span class="c-timeline__item-header"><span class="u-visually-hidden">du </span><time datetime="2021-11-10">10.11</time> <span class="u-visually-hidden">au</span><span aria-hidden="true">-</span> <time datetime="2021-11-11">11.11</time></span>
                    </div>
                </div>
            </li>

        </ul>

        <!-- Alternative list for screen reader -->
        <ul class="u-visually-hidden">

            <li><a href="#nowehre">Jeux olympique de la jeunesse du <time datetime="2021-01-09">09.01</time> au <time datetime="2021-01-22">22.01</time></a>
            </li>

            <li><a href="#nowehre">Gestion de la crise sanitaire du COVID-19 du <time datetime="2021-02-02">02.02</time> au <time datetime="2021-03-01">01.03</time></a>
            </li>

            <li><a href="#nowehre">Homicide et tentative d&#39;homicide à Grandson du <time datetime="2021-07-28">28.07</time> au <time datetime="2021-08-03">03.08</time></a>
            </li>

            <li><a href="#nowehre">Fraudes présumées aux crédits COVID-19 du <time datetime="2021-11-10">10.11</time> au <time datetime="2021-11-11">11.11</time></a>
            </li>

        </ul>

    </div>
</div>
 
<div class="c-timeline">
    <div class="o-container">
        <h2 class="u-h2">L'activité en 2020</h2>
        {% render '@button--transparent-alternate-arrow-right',
        {styleModifier: 'c-slider__article-button', text: 'lire la suite'},
        true %}

        <ul class="c-timeline__items" aria-hidden="true">
            {% for item in items %}
                <li class="c-timeline__item">
                    <div class="o-card-link c-timeline__item-content">
                        <div class="c-timeline__item-img">
                            <div class="c-timeline__item-img-bg">
                                <img src="{{ item.img.src }}" alt="{{ item.img.alt }}">
                            </div>
                        </div>
                        <div class="c-timeline__item-text-container">
                            <h3 class="c-timeline__item-text"><a href="{{ item.url }}" class="o-card-link__link">{{ item.name }}</a></h3>
                            {% render '@svg-triangle-right' %} <span class="c-timeline__item-header"><span class="u-visually-hidden">du </span><time datetime="{{ item.date.start | date("YYYY-MM-DD") }}">{{ item.date.start | date("DD.MM") }}</time> <span class="u-visually-hidden">au</span><span aria-hidden="true">-</span> <time datetime="{{ item.date.end | date("YYYY-MM-DD") }}">{{ item.date.end | date("DD.MM") }}</time></span>
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>

        <!-- Alternative list for screen reader -->
        <ul class="u-visually-hidden">
            {% for item in items %}
            <li><a href="{{ item.url }}">{{ item.name }} du <time datetime="{{ item.date.start | date("YYYY-MM-DD") }}">{{ item.date.start | date("DD.MM") }}</time> au <time datetime="{{ item.date.end | date("YYYY-MM-DD") }}">{{ item.date.end | date("DD.MM") }}</time></a>
            </li>
            {% endfor %}
        </ul>

    </div>
</div>
 
{
  "items": [
    {
      "name": "Jeux olympique de la jeunesse",
      "url": "#nowehre",
      "img": {
        "src": "https://source.unsplash.com/6uneKLGrJPs/280x120",
        "alt": "alternative text"
      },
      "date": {
        "start": "2021-01-09",
        "end": "2021-01-22"
      }
    },
    {
      "name": "Gestion de la crise sanitaire du COVID-19",
      "url": "#nowehre",
      "img": {
        "src": "https://source.unsplash.com/JHOKa8qcQ_A/280x373",
        "alt": "alternative text"
      },
      "date": {
        "start": "2021-02-02",
        "end": "2021-03-01"
      }
    },
    {
      "name": "Homicide et tentative d'homicide à Grandson",
      "url": "#nowehre",
      "img": {
        "src": "https://source.unsplash.com/m1AfZRZQ-sg/280x280",
        "alt": "alternative text"
      },
      "date": {
        "start": "2021-07-28",
        "end": "2021-08-03"
      }
    },
    {
      "name": "Fraudes présumées aux crédits COVID-19",
      "url": "#nowehre",
      "img": {
        "src": "https://source.unsplash.com/pLFNq3iQ8ew/280x280",
        "alt": "alternative text"
      },
      "date": {
        "start": "2021-11-10",
        "end": "2021-11-11"
      }
    }
  ]
}
  • Content: 
    /* ==========================================================================
   # _components.timeline.css
   ========================================================================== */

.c-timeline {
  @apply
    py-24
    overflow-hidden
  ;

  @media not print {
    @apply
      text-white
  ;

    background-image: linear-gradient(180deg, var(--color__primary--800) 0%, var(--color__primary--900) 100%);
  }

  @media print {
    display: none;
  }
}



/* -----------------------------------
 # Heading
 ----------------------------------- */
.c-timeline h2 {
  @apply
    text-white
    tracking-tight
    text-2xl
    relative
    z-20
    mb-1
  ;

  @media print {
    @apply text-black;
  }
}



/* -----------------------------------
 # Link
 ----------------------------------- */

.c-timeline__link {
  @apply
    text-base
    font-medium
    not-italic
    tracking-wider
    z-20
    relative
    text-left
    uppercase
  ;
}

.c-timeline__link:focus {
  @apply
    outline-focus
  ;
}



/* -----------------------------------
 # Items
 ----------------------------------- */

.c-timeline__item-text-container {
  @apply
    flex
    flex-col
    ;
}

.c-timeline__item-header {
  @apply
    text-white
    text-2xl
    font-bold
    not-italic
    tracking-tight
    text-left
    uppercase
    relative
    mb-2
    order-first
  ;

  will-change: letter-spacing;
  transition: letter-spacing 0.15s ease-in-out;

  @media print {
    @apply text-black;
  }
}

.c-timeline__item-text {
  @apply
    text-base
    font-normal
    not-italic
    text-left
    relative
    tracking-normal
  ;

  @media not print {
    color: #ddd9f9;
  }
}

.c-timeline__item svg {
  position: absolute;
  left: -30px;
  top: 17px;
}

.c-timeline__items {
  @apply
    lg:pl-52
  ;
}



/* -----------------------------------
 # Flickity
 ----------------------------------- */

.c-timeline__items .flickity-viewport {
  @apply
    overflow-visible
  ;
}

.c-timeline__items .flickity-button {
  @extend .u-print-hidden;

  @apply
    top-full
  ;

  &:focus {
    @apply outline-focus;
  }
}

.c-timeline__items .flickity-button.previous {
  left: auto;
  right: 75px;
}

.c-timeline__items .flickity-page-dots {
  @extend .u-print-hidden;

  width: auto;
  left: 0;
}

.c-timeline__items .flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
}



/* -----------------------------------
 # Item
 ----------------------------------- */

.c-timeline__item-content {
  @apply
    relative
  ;
}

.c-timeline__item {
  @apply
    w-80
    my-40
  ;
}

.c-timeline__item:nth-child(2n) {
  margin-top: 28rem;
}

.c-timeline__item:focus {
  @apply
    outline-focus
  ;
}

.c-timeline__item:focus .c-timeline__item-img-bg::after,
.c-timeline__item:hover .c-timeline__item-img-bg::after {
  background-color: rgba(0, 0, 0, 0);
}

.c-timeline__item:focus .c-timeline__item-header,
.c-timeline__item:hover .c-timeline__item-header {
  @apply
    tracking-wide
  ;
}

.c-timeline__item-content .c-timeline__item-img {
  @apply
    sm:absolute
    rounded-md
    left-2/4
  ;

  top: -43%;
  width: 286px;
}

.c-timeline__item-img img {
  @apply
    rounded-md
  ;

  position: relative;
  width: 100%;
}

.c-timeline__item-img .c-timeline__item-img-bg::after {
  @apply
    rounded-md
    h-auto
    sm:h-full
  ;

  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 286px;
  background-color: rgba(0, 0, 0, 0.37);
  transition: background-color 0.55s linear;
}

/* -----------------------------------
 # Print
 ----------------------------------- */

/***
 * 1. Override inline style set by Flickity
 */

@media print {
  .flickity-slider[class] {  /* [1] */
    transform: none !important;
  }

  .c-timeline__item[class] {  /* [1] */
    position: relative !important;
    left: unset !important;
  }

  .c-timeline__item-content .c-timeline__item-img {
    top: unset;
    left: unset;
    position: relative;
  }
}
  • URL: /components/raw/timeline/_components.timeline.css
  • Filesystem Path: src/components/04-Components/timeline/_components.timeline.css
  • Size: 4 KB
  • Content: 
    const onReady = () => {
  // New Timeline(document.querySelector('#timeline1'));
  for (const item of document.querySelectorAll('.c-timeline__items')) {
    new Flickity(item, {
      imagesLoaded: true,
    });
  }
};

document.addEventListener('DOMContentLoaded', onReady);
  • URL: /components/raw/timeline/timeline.js
  • Filesystem Path: src/components/04-Components/timeline/timeline.js
  • Size: 276 Bytes

No notes defined.