V6 Clearleft Patterns

Signpost 

<article class="Signpost">
    <a href="#" class="focus flow flow--2xs">
        <span class="Signpost__inner">
            <div>

                <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-left  Icon--m">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-left"></use>
                </svg>
            </div>
            <span class="flow flow--3xs">
                <h3 class="h h-6">Explore the future</h3>
                <span class="small">Client name</span>
            </span>
        </span>
    </a>
</article>
 
{% set reverse = rtl is defined and rtl %}

<article class="Signpost{{ reverse ? ' Signpost--rtl' }}">
  <a href="{{ post.link }}" class="focus flow flow--2xs">
    <span class="Signpost__inner">
      <div>
        {% include "@icon" with {
          id: reverse ? 'arrow-right' : 'arrow-left',
          size: 'm'
        } %}
      </div>
      <span class="flow flow--3xs">
        <h3 class="h h-6">{{ post.title }}</h3>
        <span class="small">{{ post.client }}</span>
      </span>
    </span>
  </a>
</article>
 
{
  "post": {
    "eyebrow": "More",
    "title": "Explore the future",
    "client": "Client name",
    "link": "#"
  }
}
  • Content: 
    .Signpost {
  background: var(--white);
  border-top: 1px solid var(--light-grey);
  border-bottom: 1px solid var(--light-grey);

  a {
    display: block;
    padding-bottom: var(--space-s);
    padding-top: var(--space-s);
    height: 100%;
  }
}

.Signpost__inner {
  --background: var(--blue);
  --hover-background: var(--dark);

  --colour: var(--blue);
  --hover-colour: var(--dark);

  --hover-arrow-colour: var(--white);
  --arrow-colour: var(--white);
  /* align-items: center; */
  display: flex;
  width: 100%;

  .Signpost--rtl & {
    justify-content: space-between;
    flex-direction: row-reverse;
  }

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    position: relative;
    margin-right: 1.2rem;
    background-color: var(--background);
    transition: all 0.5s var(--smooth-ease);
    overflow: hidden;
    order: -1;
    flex-shrink: 0;
    .Signpost--rtl & {
      margin-right: 0;
      margin-left: 1.2rem;
    }

    @media screen and (min-width: 50rem) {
      width: 60px;
      height: 60px;
    }

    &:after {
      transform: scale(1);
      transform-origin: left center;
      content: '';
      position: absolute;
      top: 0;
      right: -2px;
      left: -2px;
      bottom: 0;
      width: calc(100% + 4px);
      height: 100%;
      transform: scaleX(0);
      transform-origin: right center;
      background-color: var(--hover-background);
      transition: transform 0.3s ease, color 0.1s ease;
      z-index: 0;
    }

    svg {
      z-index: 1;
      color: var(--arrow-colour);
      transition: color 0.5s var(--smooth-ease);
    }
  }

  span {
    display: block;
  }

  &:hover {
    div {
      &:after {
        transform: scale(1);
        transform-origin: left center;
      }

      svg {
        color: var(--hover-arrow-colour, var(--hover-colour));
      }
    }
  }
}
  • URL: /components/raw/signpost/signpost.css
  • Filesystem Path: src/templates/components/signpost/signpost.css
  • Size: 1.9 KB

No notes defined.