V6 Clearleft Patterns

Timeline 

<div class="Timeline">
    <div class="Timeline__window body small flow">
        <h2>
            How did we get here?
        </h2>
        <p>Andy, Rich and Jeremy founded Clearleft in 2005, one of the first dedicated user experience consultancies in the UK. Over the last 15 years we’ve been helping organisations of all shapes, sizes and sectors realise their digital potential. From renowned institutions to global brands, such as the BBC, Natural History Museum, Virgin, Penguin and J.P. Morgan.</p>
    </div>

    <footer class="Timeline__footer flow">
        <h3 class="h h-5 text-white">
            Take a trip down memory lane with us
        </h3>

        <a class="combo-button focus combo-button--dark-red" href="#">
            <span class="">Stroll along our timeline</span>
            <div>

                <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                </svg>
            </div>
        </a>
    </footer>

    <svg class="Timeline__stamp Timeline__stamp--1" xmlns="http://www.w3.org/2000/svg" width="131" height="131" fill="none" viewBox="0 0 131 131">
        <g opacity=".6">
            <path fill="#fff" d="M54.539 72.6l-.226-.654 1.584-3.673c.44-1.02.582-1.854.343-2.368-.342-.947-1.234-1.234-2.04-.88-.73.29-1.134.89-1.27 1.654l-.764-.136c.096-1.12.728-1.912 1.744-2.248.584-.233 1.15-.255 1.762.01.618.193 1.003.65 1.299 1.31.348.876.13 1.774-.398 2.998l-1.308 2.92 3.644-1.38.29.73-4.66 1.717zM63.504 69.206c-.876.349-1.716.277-2.45-.21-.734-.485-1.369-1.315-1.833-2.483-.464-1.169-.59-2.167-.372-3.065.218-.898.762-1.486 1.638-1.834.876-.349 1.716-.277 2.45.21.734.485 1.369 1.315 1.833 2.484.464 1.168.59 2.166.372 3.064-.218.898-.762 1.486-1.638 1.834zm-.22-.724c.654-.226 1.046-.686 1.176-1.38.13-.694.056-1.476-.35-2.498-.412-.953-.843-1.695-1.449-2.029-.53-.398-1.16-.452-1.814-.225-.654.226-1.046.686-1.176 1.38-.13.694-.056 1.476.35 2.498.413.952.843 1.695 1.443 2.099.536.328 1.16.451 1.82.155zM70.729 66.369c-.876.348-1.716.276-2.45-.21-.735-.486-1.369-1.316-1.833-2.484-.464-1.168-.59-2.166-.373-3.064.219-.899.763-1.487 1.639-1.835.876-.348 1.716-.276 2.45.21.734.486 1.368 1.316 1.833 2.484.464 1.168.59 2.166.372 3.064-.218.899-.762 1.487-1.638 1.835zm-.226-.654c.654-.226 1.046-.686 1.176-1.38.13-.695.056-1.477-.35-2.499-.413-.952-.843-1.694-1.449-2.028-.53-.398-1.16-.452-1.814-.226-.654.226-1.046.686-1.176 1.38-.13.695-.056 1.477.35 2.499.412.952.842 1.694 1.443 2.098.536.328 1.166.382 1.82.156zM75.711 59.25c.66-.297 1.366-.307 1.978-.043.619.194 1.073.656 1.363 1.386.29.73.236 1.36-.098 1.966-.334.606-.79.99-1.52 1.28-1.092.4-2.276.229-2.98-.607l.473-.594c.507.678 1.335.89 2.21.542 1.023-.407 1.515-1.21 1.109-2.233-.412-.952-1.305-1.24-2.327-.834l-1.968.749-1.159-3.767 3.943-1.567.296.66-3.282 1.271.718 2.318 1.244-.528z" />
            <path stroke="#fff" stroke-miterlimit="10" stroke-width="1.5" d="M107.811 29.295C87.985 5.758 52.833 2.75 29.295 22.575 5.758 42.4 2.75 77.554 22.575 101.09c19.826 23.537 54.978 26.546 78.516 6.72 23.537-19.826 26.546-54.978 6.72-78.516z" />
            <path stroke="#fff" stroke-miterlimit="10" stroke-width="1.5" d="M70.822 14.485C42.817 11.38 17.599 31.563 14.492 59.566c-3.105 28.004 17.078 53.223 45.081 56.329 28.004 3.105 53.223-17.078 56.329-45.082 3.105-28.003-17.078-53.222-45.082-56.328z" />
            <path fill="#fff" d="M41.87 93.73c.046.287-.188.549-.469.525-.286.046-.554-.118-.53-.398-.046-.286.188-.548.468-.524.216-.052.478.182.53.398zM35.033 84.612c.38-.32.812-.424 1.296-.312.49.042.892.288 1.143.662l1.64 2.256-5.12 3.793-1.519-2.034c-.25-.374-.354-.806-.312-1.296.042-.49.282-.822.662-1.142.456-.384 1.022-.406 1.57-.218-.162-.578.038-1.267.64-1.709zm-.9 5.565l1.807-1.326-1.134-1.578c-.193-.228-.39-.386-.74-.416-.28-.024-.567.022-.795.214-.228.192-.392.46-.416.74-.024.28.022.566.214.794l1.065 1.572zm2.883-4.83c-.192-.229-.46-.393-.74-.417-.35-.03-.637.016-.865.208-.228.192-.392.46-.486.734-.024.28.022.567.209.865l1.262 1.73 1.882-1.39-1.262-1.73zM33.734 78.365l-1.622 2.471.779 1.618 2.284-1.144.302.59-5.743 2.823-1.144-2.284c-.244-.444-.272-.94-.084-1.488.182-.479.498-.875.942-1.119.368-.18.794-.214 1.214-.178.414.106.752.276 1.008.58l1.698-2.535.366.666zm-3.788 5.53l2.355-1.139-.843-1.694c-.186-.298-.378-.526-.722-.626-.344-.1-.7-.06-.992.056-.298.186-.526.378-.696.716-.1.345-.13.695.056.993l.842 1.694zM26.785 77.982l-.232-.584 6.09-1.947.233.584-6.09 1.947zM28.028 67.58l.356-.04c.788-.144 1.476.056 2.14.536.595.474 1.025 1.216 1.157 2.145.132.928-.086 1.826-.566 2.49a3.314 3.314 0 01-2.156 1.296 3.488 3.488 0 01-2.49-.565c-.729-.556-1.159-1.298-1.291-2.226-.092-.573-.044-1.133.214-1.675.188-.548.504-.944.96-1.328l.378.526c-.678.506-1.112 1.456-.91 2.39.144.788.446 1.378 1.046 1.782.6.404 1.219.599 2.007.454.718-.15 1.308-.452 1.782-1.046.474-.594.604-1.288.46-2.076a2.623 2.623 0 00-.778-1.619c-.39-.386-.939-.574-1.505-.551l.35 2.498-.572.092-.582-3.082zM24.945 60.758l.054-.63 6.383.405-.054.63-2.947-.182-.223 3.437 2.946.182-.054.63-6.383-.406.054-.63 2.807.17.223-3.437-2.806-.17zM26.614 52.79l.554.118-.448 1.936 5.587 1.466-.194.618-5.587-1.466-.517 1.93-.555-.117 1.16-4.485zM34.567 50.509c-.422.81-1.036 1.392-1.906 1.67-.87.279-1.716.277-2.527-.145-.81-.422-1.392-1.036-1.67-1.907-.278-.87-.276-1.716.146-2.526.422-.81 1.036-1.392 1.906-1.67.87-.279 1.716-.277 2.526.145.81.422 1.392 1.036 1.67 1.906.349.877.277 1.717-.145 2.527zm-.542-.258c.34-.676.4-1.377.104-2.036-.226-.655-.745-1.193-1.42-1.533-.677-.34-1.377-.4-2.037-.103-.724.22-1.186.674-1.526 1.35-.34.676-.33 1.382-.104 2.036a2.64 2.64 0 001.35 1.526c.677.34 1.377.4 2.037.104.794-.214 1.256-.668 1.596-1.344zM34.517 38.727l.398-.53 5.022 3.956-.322.466-6.313-.4 4.095 3.243-.398.53-5.022-3.956.322-.467 6.313.4-4.095-3.242zM40.98 37.376a.48.48 0 01-.448-.532.48.48 0 01.532-.448.48.48 0 01.449.532c-.018.21-.252.472-.533.448zM48.17 34.958l2.734-1.458.308.52-3.325 1.76-2.969-5.684 3.248-1.697.309.52-2.729 1.389 1.029 1.992 2.512-1.336.308.52-2.512 1.336 1.086 2.138zM57.169 31.99l-.725.221-2.504-2.048-.83 3.103-.724.22 1.03-3.791-2.831-2.358.654-.226L53.545 29l.742-2.899.654-.226-.935 3.517 3.163 2.598zM60.3 25.065c.572-.092 1.05.09 1.516.412.396.316.71.766.733 1.332.092.572-.09 1.05-.412 1.517-.316.396-.766.71-1.332.732l-1.64.212.292 2.352-.642.087-.797-6.345 2.282-.299zm.489 3.357c.356-.04.724-.22.888-.488a1.12 1.12 0 00.23-1.039 1.374 1.374 0 00-.483-.958c-.262-.234-.606-.334-1.032-.3l-1.64.213.326 2.778 1.71-.206zM69.004 31.311L67.68 28.66l-1.757-.08-.145 2.527-.63-.054.335-6.39 2.526.146c.56.048.969.224 1.289.604.32.38.494.818.516 1.385-.036.42-.142.834-.452 1.16-.24.332-.608.512-1.04.616L69.71 31.3l-.706.01zm-3.015-5.97l-.152 2.596 1.897.092c.35.03.642-.086.946-.342.234-.262.398-.53.428-.88.03-.35-.08-.712-.342-.947-.257-.304-.53-.398-.88-.427l-1.897-.092zM72.185 31.23l3.044.685-.117.554-3.663-.878 1.45-6.223 3.592.872-.118.554-2.975-.678-.541 2.21 2.764.66-.118.554-2.764-.66-.554 2.35zM77.156 31.656l.642-.086c-.072.84.294 1.507 1.18 1.864.886.358 1.535.202 1.875-.474.17-.338.118-.554-.069-.852-.192-.228-.442-.602-.902-.994-.524-.468-.85-.778-.972-1-.314-.45-.412-.952-.16-1.424.182-.478.562-.799 1-.973.438-.174.928-.132 1.47.126.886.358 1.374 1.246 1.372 2.092l-.642.087c-.004-.777-.312-1.297-.994-1.567-.746-.346-1.4-.12-1.664.493-.094.274-.118.554.004.776.122.222.378.526.774.842l.39.386c.064.076.198.158.326.31s.262.234.32.38c.128.152.309.52.36.736a1.2 1.2 0 01-.141.834c-.182.478-.562.798-1.07.966-.508.169-1.063.05-1.61-.137-1.02-.44-1.58-1.334-1.49-2.385zM82.723 34.178l.63.054c-.206.758.008 1.552.883 2.05.804.492 1.516.412 1.914-.118.164-.268.188-.548.142-.834-.116-.292-.366-.666-.75-1.122-.449-.532-.699-.906-.815-1.198-.238-.514-.196-1.005.056-1.477.322-.466.696-.716 1.192-.744.496-.028.98.084 1.453.336.798.562 1.146 1.438 1.004 2.272l-.63-.054c.136-.764-.096-1.348-.767-1.758-.67-.41-1.306-.394-1.71.206a1.017 1.017 0 00-.136.765c.122.222.302.59.623.97l.32.38c.064.076.192.228.25.374.128.152.186.298.25.374.122.222.232.584.214.794-.018.21-.048.56-.282.822-.322.466-.696.716-1.192.744a2.738 2.738 0 01-1.587-.418c-.95-.434-1.362-1.386-1.062-2.418zM90.807 38.608c.024-.28.252-.472.468-.524.28.024.472.252.524.468-.024.28-.252.472-.468.524-.286.046-.548-.188-.524-.468zM101.444 46.994l-5.499 3.267-.308-.52 4.68-2.773-4.37-.021-.064-.076 2.092-3.841-4.68 2.773-.309-.52 5.498-3.267.367.666-1.934 3.642 4.16.004.367.666zM98.172 56.376l1.292-1.088-.95-2.903-1.686-.073-.227-.654 6.816.3.226.655-5.309 4.341-.162-.578zm.966-3.867l.846 2.47 2.877-2.292-3.723-.178zM104.909 57.587l.087.643-6.305 1.153-.087-.643 6.305-1.153zM99.711 62.29l.174 2.907-.566.022-.19-3.542 6.379-.371.016.636-5.813.349zM101.854 69.386c.228-.192.573-.093.701.06.192.228.092.572-.06.7-.228.192-.572.092-.7-.06-.193-.228-.169-.508.059-.7z" />
            <path stroke="#fff" stroke-miterlimit="10" stroke-width="1.5" d="M86.1 47.584c-9.726-11.547-26.97-13.023-38.516-3.297-11.546 9.725-13.022 26.97-3.297 38.515 9.725 11.546 26.97 13.022 38.515 3.297 11.546-9.725 13.022-26.97 3.297-38.516z" />
        </g>
    </svg>
    <svg class="Timeline__stamp Timeline__stamp--2" xmlns="http://www.w3.org/2000/svg" width="359" height="115" fill="none" viewBox="0 0 359 115">
        <g stroke="#fff" stroke-miterlimit="10" stroke-width="1.5" opacity=".5">
            <path d="M1 58.036c35.811-5.804 39.746 18.475 75.557 12.671 35.812-5.803 31.877-30.082 67.689-35.886 35.811-5.803 39.746 18.476 75.557 12.672 35.811-5.804 31.877-30.082 67.688-35.886 35.812-5.803 39.746 18.475 75.558 12.672M5.525 85.956c35.811-5.803 39.746 18.475 75.557 12.672 35.812-5.804 31.877-30.083 67.689-35.886 35.811-5.804 39.745 18.475 75.557 12.671 35.811-5.803 31.877-30.082 67.688-35.885 35.812-5.804 39.746 18.475 75.557 12.671M10.05 113.877c35.811-5.804 39.745 18.475 75.557 12.671 35.811-5.803 31.877-30.082 67.688-35.885 35.812-5.804 39.746 18.475 75.558 12.671 35.811-5.803 31.876-30.082 67.688-35.886 35.811-5.803 39.746 18.476 75.557 12.672M14.575 141.797c35.81-5.803 39.746 18.475 75.557 12.672 35.811-5.804 31.877-30.082 67.688-35.886 35.811-5.804 39.746 18.475 75.557 12.672 35.812-5.804 31.877-30.083 67.689-35.886 35.811-5.804 39.746 18.475 75.557 12.671" />
        </g>
    </svg>
</div>
 
<div class="Timeline">
  <div class="Timeline__window body small flow">
    <h2>
      {{ title }}
    </h2>
    {{ description|raw }}
  </div>

  <footer class="Timeline__footer flow">
    {% if subtitle %}
      <h3 class="h h-5 text-white">
        {{ subtitle }}
      </h3>
    {% endif %}
    {% if link and linkLabel %}
      {% include '@combo-button' with {
        link: link,
        text: linkLabel,
        theme: 'dark-red'
      } %}
    {% endif %}
  </footer>

  <svg class="Timeline__stamp Timeline__stamp--1"
    xmlns="http://www.w3.org/2000/svg"
    width="131"
    height="131"
    fill="none"
    viewBox="0 0 131 131">
    <g opacity=".6">
      <path fill="#fff"
        d="M54.539 72.6l-.226-.654 1.584-3.673c.44-1.02.582-1.854.343-2.368-.342-.947-1.234-1.234-2.04-.88-.73.29-1.134.89-1.27 1.654l-.764-.136c.096-1.12.728-1.912 1.744-2.248.584-.233 1.15-.255 1.762.01.618.193 1.003.65 1.299 1.31.348.876.13 1.774-.398 2.998l-1.308 2.92 3.644-1.38.29.73-4.66 1.717zM63.504 69.206c-.876.349-1.716.277-2.45-.21-.734-.485-1.369-1.315-1.833-2.483-.464-1.169-.59-2.167-.372-3.065.218-.898.762-1.486 1.638-1.834.876-.349 1.716-.277 2.45.21.734.485 1.369 1.315 1.833 2.484.464 1.168.59 2.166.372 3.064-.218.898-.762 1.486-1.638 1.834zm-.22-.724c.654-.226 1.046-.686 1.176-1.38.13-.694.056-1.476-.35-2.498-.412-.953-.843-1.695-1.449-2.029-.53-.398-1.16-.452-1.814-.225-.654.226-1.046.686-1.176 1.38-.13.694-.056 1.476.35 2.498.413.952.843 1.695 1.443 2.099.536.328 1.16.451 1.82.155zM70.729 66.369c-.876.348-1.716.276-2.45-.21-.735-.486-1.369-1.316-1.833-2.484-.464-1.168-.59-2.166-.373-3.064.219-.899.763-1.487 1.639-1.835.876-.348 1.716-.276 2.45.21.734.486 1.368 1.316 1.833 2.484.464 1.168.59 2.166.372 3.064-.218.899-.762 1.487-1.638 1.835zm-.226-.654c.654-.226 1.046-.686 1.176-1.38.13-.695.056-1.477-.35-2.499-.413-.952-.843-1.694-1.449-2.028-.53-.398-1.16-.452-1.814-.226-.654.226-1.046.686-1.176 1.38-.13.695-.056 1.477.35 2.499.412.952.842 1.694 1.443 2.098.536.328 1.166.382 1.82.156zM75.711 59.25c.66-.297 1.366-.307 1.978-.043.619.194 1.073.656 1.363 1.386.29.73.236 1.36-.098 1.966-.334.606-.79.99-1.52 1.28-1.092.4-2.276.229-2.98-.607l.473-.594c.507.678 1.335.89 2.21.542 1.023-.407 1.515-1.21 1.109-2.233-.412-.952-1.305-1.24-2.327-.834l-1.968.749-1.159-3.767 3.943-1.567.296.66-3.282 1.271.718 2.318 1.244-.528z" />
      <path stroke="#fff"
        stroke-miterlimit="10"
        stroke-width="1.5"
        d="M107.811 29.295C87.985 5.758 52.833 2.75 29.295 22.575 5.758 42.4 2.75 77.554 22.575 101.09c19.826 23.537 54.978 26.546 78.516 6.72 23.537-19.826 26.546-54.978 6.72-78.516z" />
      <path stroke="#fff"
        stroke-miterlimit="10"
        stroke-width="1.5"
        d="M70.822 14.485C42.817 11.38 17.599 31.563 14.492 59.566c-3.105 28.004 17.078 53.223 45.081 56.329 28.004 3.105 53.223-17.078 56.329-45.082 3.105-28.003-17.078-53.222-45.082-56.328z" />
      <path fill="#fff"
        d="M41.87 93.73c.046.287-.188.549-.469.525-.286.046-.554-.118-.53-.398-.046-.286.188-.548.468-.524.216-.052.478.182.53.398zM35.033 84.612c.38-.32.812-.424 1.296-.312.49.042.892.288 1.143.662l1.64 2.256-5.12 3.793-1.519-2.034c-.25-.374-.354-.806-.312-1.296.042-.49.282-.822.662-1.142.456-.384 1.022-.406 1.57-.218-.162-.578.038-1.267.64-1.709zm-.9 5.565l1.807-1.326-1.134-1.578c-.193-.228-.39-.386-.74-.416-.28-.024-.567.022-.795.214-.228.192-.392.46-.416.74-.024.28.022.566.214.794l1.065 1.572zm2.883-4.83c-.192-.229-.46-.393-.74-.417-.35-.03-.637.016-.865.208-.228.192-.392.46-.486.734-.024.28.022.567.209.865l1.262 1.73 1.882-1.39-1.262-1.73zM33.734 78.365l-1.622 2.471.779 1.618 2.284-1.144.302.59-5.743 2.823-1.144-2.284c-.244-.444-.272-.94-.084-1.488.182-.479.498-.875.942-1.119.368-.18.794-.214 1.214-.178.414.106.752.276 1.008.58l1.698-2.535.366.666zm-3.788 5.53l2.355-1.139-.843-1.694c-.186-.298-.378-.526-.722-.626-.344-.1-.7-.06-.992.056-.298.186-.526.378-.696.716-.1.345-.13.695.056.993l.842 1.694zM26.785 77.982l-.232-.584 6.09-1.947.233.584-6.09 1.947zM28.028 67.58l.356-.04c.788-.144 1.476.056 2.14.536.595.474 1.025 1.216 1.157 2.145.132.928-.086 1.826-.566 2.49a3.314 3.314 0 01-2.156 1.296 3.488 3.488 0 01-2.49-.565c-.729-.556-1.159-1.298-1.291-2.226-.092-.573-.044-1.133.214-1.675.188-.548.504-.944.96-1.328l.378.526c-.678.506-1.112 1.456-.91 2.39.144.788.446 1.378 1.046 1.782.6.404 1.219.599 2.007.454.718-.15 1.308-.452 1.782-1.046.474-.594.604-1.288.46-2.076a2.623 2.623 0 00-.778-1.619c-.39-.386-.939-.574-1.505-.551l.35 2.498-.572.092-.582-3.082zM24.945 60.758l.054-.63 6.383.405-.054.63-2.947-.182-.223 3.437 2.946.182-.054.63-6.383-.406.054-.63 2.807.17.223-3.437-2.806-.17zM26.614 52.79l.554.118-.448 1.936 5.587 1.466-.194.618-5.587-1.466-.517 1.93-.555-.117 1.16-4.485zM34.567 50.509c-.422.81-1.036 1.392-1.906 1.67-.87.279-1.716.277-2.527-.145-.81-.422-1.392-1.036-1.67-1.907-.278-.87-.276-1.716.146-2.526.422-.81 1.036-1.392 1.906-1.67.87-.279 1.716-.277 2.526.145.81.422 1.392 1.036 1.67 1.906.349.877.277 1.717-.145 2.527zm-.542-.258c.34-.676.4-1.377.104-2.036-.226-.655-.745-1.193-1.42-1.533-.677-.34-1.377-.4-2.037-.103-.724.22-1.186.674-1.526 1.35-.34.676-.33 1.382-.104 2.036a2.64 2.64 0 001.35 1.526c.677.34 1.377.4 2.037.104.794-.214 1.256-.668 1.596-1.344zM34.517 38.727l.398-.53 5.022 3.956-.322.466-6.313-.4 4.095 3.243-.398.53-5.022-3.956.322-.467 6.313.4-4.095-3.242zM40.98 37.376a.48.48 0 01-.448-.532.48.48 0 01.532-.448.48.48 0 01.449.532c-.018.21-.252.472-.533.448zM48.17 34.958l2.734-1.458.308.52-3.325 1.76-2.969-5.684 3.248-1.697.309.52-2.729 1.389 1.029 1.992 2.512-1.336.308.52-2.512 1.336 1.086 2.138zM57.169 31.99l-.725.221-2.504-2.048-.83 3.103-.724.22 1.03-3.791-2.831-2.358.654-.226L53.545 29l.742-2.899.654-.226-.935 3.517 3.163 2.598zM60.3 25.065c.572-.092 1.05.09 1.516.412.396.316.71.766.733 1.332.092.572-.09 1.05-.412 1.517-.316.396-.766.71-1.332.732l-1.64.212.292 2.352-.642.087-.797-6.345 2.282-.299zm.489 3.357c.356-.04.724-.22.888-.488a1.12 1.12 0 00.23-1.039 1.374 1.374 0 00-.483-.958c-.262-.234-.606-.334-1.032-.3l-1.64.213.326 2.778 1.71-.206zM69.004 31.311L67.68 28.66l-1.757-.08-.145 2.527-.63-.054.335-6.39 2.526.146c.56.048.969.224 1.289.604.32.38.494.818.516 1.385-.036.42-.142.834-.452 1.16-.24.332-.608.512-1.04.616L69.71 31.3l-.706.01zm-3.015-5.97l-.152 2.596 1.897.092c.35.03.642-.086.946-.342.234-.262.398-.53.428-.88.03-.35-.08-.712-.342-.947-.257-.304-.53-.398-.88-.427l-1.897-.092zM72.185 31.23l3.044.685-.117.554-3.663-.878 1.45-6.223 3.592.872-.118.554-2.975-.678-.541 2.21 2.764.66-.118.554-2.764-.66-.554 2.35zM77.156 31.656l.642-.086c-.072.84.294 1.507 1.18 1.864.886.358 1.535.202 1.875-.474.17-.338.118-.554-.069-.852-.192-.228-.442-.602-.902-.994-.524-.468-.85-.778-.972-1-.314-.45-.412-.952-.16-1.424.182-.478.562-.799 1-.973.438-.174.928-.132 1.47.126.886.358 1.374 1.246 1.372 2.092l-.642.087c-.004-.777-.312-1.297-.994-1.567-.746-.346-1.4-.12-1.664.493-.094.274-.118.554.004.776.122.222.378.526.774.842l.39.386c.064.076.198.158.326.31s.262.234.32.38c.128.152.309.52.36.736a1.2 1.2 0 01-.141.834c-.182.478-.562.798-1.07.966-.508.169-1.063.05-1.61-.137-1.02-.44-1.58-1.334-1.49-2.385zM82.723 34.178l.63.054c-.206.758.008 1.552.883 2.05.804.492 1.516.412 1.914-.118.164-.268.188-.548.142-.834-.116-.292-.366-.666-.75-1.122-.449-.532-.699-.906-.815-1.198-.238-.514-.196-1.005.056-1.477.322-.466.696-.716 1.192-.744.496-.028.98.084 1.453.336.798.562 1.146 1.438 1.004 2.272l-.63-.054c.136-.764-.096-1.348-.767-1.758-.67-.41-1.306-.394-1.71.206a1.017 1.017 0 00-.136.765c.122.222.302.59.623.97l.32.38c.064.076.192.228.25.374.128.152.186.298.25.374.122.222.232.584.214.794-.018.21-.048.56-.282.822-.322.466-.696.716-1.192.744a2.738 2.738 0 01-1.587-.418c-.95-.434-1.362-1.386-1.062-2.418zM90.807 38.608c.024-.28.252-.472.468-.524.28.024.472.252.524.468-.024.28-.252.472-.468.524-.286.046-.548-.188-.524-.468zM101.444 46.994l-5.499 3.267-.308-.52 4.68-2.773-4.37-.021-.064-.076 2.092-3.841-4.68 2.773-.309-.52 5.498-3.267.367.666-1.934 3.642 4.16.004.367.666zM98.172 56.376l1.292-1.088-.95-2.903-1.686-.073-.227-.654 6.816.3.226.655-5.309 4.341-.162-.578zm.966-3.867l.846 2.47 2.877-2.292-3.723-.178zM104.909 57.587l.087.643-6.305 1.153-.087-.643 6.305-1.153zM99.711 62.29l.174 2.907-.566.022-.19-3.542 6.379-.371.016.636-5.813.349zM101.854 69.386c.228-.192.573-.093.701.06.192.228.092.572-.06.7-.228.192-.572.092-.7-.06-.193-.228-.169-.508.059-.7z" />
      <path stroke="#fff"
        stroke-miterlimit="10"
        stroke-width="1.5"
        d="M86.1 47.584c-9.726-11.547-26.97-13.023-38.516-3.297-11.546 9.725-13.022 26.97-3.297 38.515 9.725 11.546 26.97 13.022 38.515 3.297 11.546-9.725 13.022-26.97 3.297-38.516z" />
    </g>
  </svg>
  <svg class="Timeline__stamp Timeline__stamp--2"
    xmlns="http://www.w3.org/2000/svg"
    width="359"
    height="115"
    fill="none"
    viewBox="0 0 359 115">
    <g stroke="#fff" stroke-miterlimit="10" stroke-width="1.5" opacity=".5">
      <path d="M1 58.036c35.811-5.804 39.746 18.475 75.557 12.671 35.812-5.803 31.877-30.082 67.689-35.886 35.811-5.803 39.746 18.476 75.557 12.672 35.811-5.804 31.877-30.082 67.688-35.886 35.812-5.803 39.746 18.475 75.558 12.672M5.525 85.956c35.811-5.803 39.746 18.475 75.557 12.672 35.812-5.804 31.877-30.083 67.689-35.886 35.811-5.804 39.745 18.475 75.557 12.671 35.811-5.803 31.877-30.082 67.688-35.885 35.812-5.804 39.746 18.475 75.557 12.671M10.05 113.877c35.811-5.804 39.745 18.475 75.557 12.671 35.811-5.803 31.877-30.082 67.688-35.885 35.812-5.804 39.746 18.475 75.558 12.671 35.811-5.803 31.876-30.082 67.688-35.886 35.811-5.803 39.746 18.476 75.557 12.672M14.575 141.797c35.81-5.803 39.746 18.475 75.557 12.672 35.811-5.804 31.877-30.082 67.688-35.886 35.811-5.804 39.746 18.475 75.557 12.672 35.812-5.804 31.877-30.083 67.689-35.886 35.811-5.804 39.746 18.475 75.557 12.671" />
    </g>
  </svg>
</div>
 
{
  "title": "How did we get here?",
  "subtitle": "Take a trip down memory lane with us",
  "description": "<p>Andy, Rich and Jeremy founded Clearleft in 2005, one of the first dedicated user experience consultancies in the UK. Over the last 15 years we’ve been helping organisations of all shapes, sizes and sectors realise their digital potential. From renowned institutions to global brands, such as the BBC, Natural History Museum, Virgin, Penguin and J.P. Morgan.</p>",
  "link": "#",
  "linkLabel": "Stroll along our timeline"
}
  • Content: 
    .Timeline {
  background: #de5867
    url(data:image/png;base64,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);
  padding: var(--space-s-xl);
  position: relative;

  &__window {
    background: var(--white);
    padding: var(--space-s-m);
  }

  &__window,
  &__footer {
    position: relative;
    z-index: 1;
  }

  &__stamp {
    position: absolute;

    &--1 {
      top: var(--space-s);
      left: 52%;
    }

    &--2 {
      bottom: 0;
      right: 0;
    }
  }

  &__footer {
    padding-top: var(--space-s);
  }

  @media screen and (min-width: 50rem) {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &__window {
      max-width: 540px;
      flex-basis: 50%;
    }

    &__footer {
      max-width: calc(360px + var(--gutter));
      padding: 0 0 0 var(--gutter);
      flex-basis: 50%;
    }
  }
}
  • URL: /components/raw/timeline/timeline.css
  • Filesystem Path: src/templates/components/timeline/timeline.css
  • Size: 3 KB

No notes defined.