Feature Card - Component

View full screen
Code

Source (Nunjucks)

<a 
  class="feature-card" 
  href="{{ data.url }}" 
  {% if data.theme %}data-theme="{{ data.theme }}"{% endif %}
  {% if data.treatment %}data-treatment="{{ data.treatment }}"{% endif %}
>
  <span class="feature-card__eyebrow">{{ data.eyebrow }}</span>
  <h3 class="{{ 'visually-hidden' if data.hiddenTitle else 'feature-card__title' }}">{{ data.title }}</h3>
  <img class="feature-card__background" loading="lazy" alt="" aria-hidden="true" src="{{ data.background }}" />
</a>

Output

<a class="feature-card" href="#">
  <span class="feature-card__eyebrow">Web vitals</span>
  <h3 class="feature-card__title">
    Making their web app installable resulted in increased traffic
  </h3>
  <img
    class="feature-card__background"
    loading="lazy"
    alt=""
    aria-hidden="true"
    src="/images/feature-cards/web-vitals-feature.png"
  />
</a>

Information

To maintain simplicity, regardless of design, this component's focus is eyebrow and title. Any design detail is provided by a background image.

To implement a light text version, apply a data-theme="light" attribute to the .feature-card element.

Key links

Variants

With Background Treatment

View full screen
Code

Source (Nunjucks)

<a 
  class="feature-card" 
  href="{{ data.url }}" 
  {% if data.theme %}data-theme="{{ data.theme }}"{% endif %}
  {% if data.treatment %}data-treatment="{{ data.treatment }}"{% endif %}
>
  <span class="feature-card__eyebrow">{{ data.eyebrow }}</span>
  <h3 class="{{ 'visually-hidden' if data.hiddenTitle else 'feature-card__title' }}">{{ data.title }}</h3>
  <img class="feature-card__background" loading="lazy" alt="" aria-hidden="true" src="{{ data.background }}" />
</a>

Output

<a class="feature-card" href="#" data-theme="dark" data-treatment="bg-image">
  <span class="feature-card__eyebrow">Case study</span>
  <h3 class="feature-card__title">
    Mainline Menswear implements PWA and sees a 55% conversion rate uplift
  </h3>
  <img
    class="feature-card__background"
    loading="lazy"
    alt=""
    aria-hidden="true"
    src="https://web-dev.imgix.net/image/8WbTDNrhLsU0El80frMBGE4eMCD3/Yz5G0leLpdHLidygym31.jpg?auto=format&w=1140"
  />
</a>

With Illustration Treatment

View full screen
Code

Source (Nunjucks)

<a 
  class="feature-card" 
  href="{{ data.url }}" 
  {% if data.theme %}data-theme="{{ data.theme }}"{% endif %}
  {% if data.treatment %}data-treatment="{{ data.treatment }}"{% endif %}
>
  <span class="feature-card__eyebrow">{{ data.eyebrow }}</span>
  <h3 class="{{ 'visually-hidden' if data.hiddenTitle else 'feature-card__title' }}">{{ data.title }}</h3>
  <img class="feature-card__background" loading="lazy" alt="" aria-hidden="true" src="{{ data.background }}" />
</a>

Output

<a
  class="feature-card"
  href="#"
  data-theme="dark"
  data-treatment="illustration"
>
  <span class="feature-card__eyebrow">Learn</span>
  <h3 class="feature-card__title">
    Explore our structured learning paths to learn new skills
  </h3>
  <img
    class="feature-card__background"
    loading="lazy"
    alt=""
    aria-hidden="true"
    src="https://web-dev.imgix.net/image/jxu1OdD7LKOGIDU7jURMpSH2lyK2/yJSJQfrrK4pVh44yuMZV.svg"
  />
</a>

With Light Text

View full screen
Code

Source (Nunjucks)

<a 
  class="feature-card" 
  href="{{ data.url }}" 
  {% if data.theme %}data-theme="{{ data.theme }}"{% endif %}
  {% if data.treatment %}data-treatment="{{ data.treatment }}"{% endif %}
>
  <span class="feature-card__eyebrow">{{ data.eyebrow }}</span>
  <h3 class="{{ 'visually-hidden' if data.hiddenTitle else 'feature-card__title' }}">{{ data.title }}</h3>
  <img class="feature-card__background" loading="lazy" alt="" aria-hidden="true" src="{{ data.background }}" />
</a>

Output

<a class="feature-card" href="#" data-theme="light">
  <span class="feature-card__eyebrow">Show</span>
  <h3 class="feature-card__title">
    Designing in the browser using Dev Tools for design
  </h3>
  <img
    class="feature-card__background"
    loading="lazy"
    alt=""
    aria-hidden="true"
    src="/images/feature-cards/design-in-the-browser.jpg"
  />
</a>