V6 Clearleft Patterns

Service Card 

<article class="Service-card">
    <div class="Service-card__content flow--2xs">
        <h2 class="h h-4">
            User research and human insight
        </h2>
        <p class="body">
            Truly transformational products and services start with a deep understanding of your customers and their needs.
        </p>
    </div>

    <a class="combo-button focus combo-button--large-link combo-button--vh" href="#">
        <span class="vh">User research and human insight</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>
</article>
 
{% set html_tag = tag ?? 'article'  %}

<{{html_tag}} class="Service-card">
  <div class="Service-card__content flow--2xs">
    <h2 class="h h-4">
      {{ title }}
    </h2>
    <p class="body">
      {{ description }}
    </p>
  </div>
  {% include '@combo-button' with {
    text: title,
    link: link,
    largeLink: true,
    hideText: true
  } %}
</{{html_tag}}>
 
{
  "title": "User research and human insight",
  "description": "Truly transformational products and services start with a deep understanding of your customers and their needs.",
  "link": "#"
}
  • Content: 
    .Service-card {
  background: var(--light-grey-step-1);
  display: flex;
  position: relative;

  &__content {
    padding: var(--space-s-m);
  }

  .combo-button {
    margin-left: auto;
    margin-top: auto;
  }
}
  • URL: /components/raw/service-card/service-card.css
  • Filesystem Path: src/templates/components/service-card/service-card.css
  • Size: 216 Bytes

No notes defined.