V6 Clearleft Patterns

Feature Card 

<article class="Feature-card theme--dark">
    <div class="Feature-card__content flow--2xs">
        <h2 class="h h-6">
            The Clearleft Podcast
        </h2>
        <div class="body small">
            <p>Epsiode 20 "Design Transformation" available now</p>
        </div>
    </div>

    <a class="combo-button focus combo-button--green combo-button--large-link combo-button--vh" href="#">
        <span class="vh">The Clearleft Podcast</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 hasDescription = description is defined and description %}

<article class="Feature-card theme--dark">
  <div class="Feature-card__content flow--2xs">
    <h2 class="h h-6">
      {{ title }}
    </h2>
    {% if hasDescription %}
      <div class="body small">
        {{ description|raw }}
      </div>
    {% endif %}
  </div>

  {% include '@combo-button' with {
    text: title,
    link: link,
    theme: 'green',
    largeLink: true,
    hideText: true
  } %}
</article>
 
{
  "title": "The Clearleft Podcast",
  "description": "<p>Epsiode 20 \"Design Transformation\" available now</p>",
  "link": "#"
}
  • Content: 
    .Feature-card {
  background: var(--dark);
  display: flex;
  flex-direction: column;
  position: relative;

  &__content {
    color: var(--light-grey);
    padding: var(--space-s) var(--space-s);
  }

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

No notes defined.