V6 Clearleft Patterns

Job Promo 

<article class="Job-promo theme--dark">
    <a href="/about/jobs">
        <h3 class="h h-4">
            Join us
        </h3>

        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--l">
            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
        </svg>
    </a>
</article>
 
<article class="Job-promo theme--dark">
  <a href="/about/jobs">
    <h3 class="h h-4">
      Join us
    </h3>
    {% include '@icon' with {
      id: 'arrow-right',
      size: 'l'
    } %}
  </a>
</article>
 
/* No context defined. */
  • Content: 
    .Job-promo {
  display: flex;
  flex-direction: column;
  position: relative;

  .Icon {
    color: var(--green);
    margin-left: var(--space-s);
    transition: 200ms color;
  }

  a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: var(--space-l-xl) var(--space-s-l);
    z-index: 1;
    flex: 1;
  }

  &:after {
    content: '';
    transform: scaleX(0);
    background: var(--green);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transition: transform 0.4s ease;
    transform-origin: right center;
  }

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

    .Icon {
      color: var(--dark);
    }
  }
}
  • URL: /components/raw/job-promo/job-promo.css
  • Filesystem Path: src/templates/components/job-promo/job-promo.css
  • Size: 768 Bytes

No notes defined.