Taxonomic name: M-CARD-INFORMATION
Added on: v2023.01-06 (21/04/23)
Updated on: v2023.01-06 (21/04/23)

Information cards

Information cards with an optionnal heading and a small text.
It can have an icon on right or left of the card and have the possibility to hide the icon on mobile.

Design and usage

Built to work on light and dark accent background colours.

Examples

Interactive example

Code example

                                              
<div class="m-card m-card-information t-accent-light t-accent-light--6">
  <div class="m-card-content">
    <h3 class="a-heading a-heading-3 a-heading--semibold u-margin--top-none u-margin--bottom-2">
      ...
    </h3>
    <p class="u-margin--none">
      ...
    </p>
  </div>
  <div class="m-card-image">
    <img src="..." aria-hidden>
  </div>
</div>

<div class="m-card m-card-information m-card-information--icon-left t-accent-light t-accent-light--6">
  <div class="m-card-content">
    <p class="u-margin--top-none u-margin--bottom-2">
      <strong>
        ...
      </strong>
    </p>
    <p class="u-margin--none">
      ...
    </p>
  </div>
  <div class="m-card-image">
    <img src="..." aria-hidden>
  </div>
</div>

<div class="m-card m-card-information m-card-information--no-image-small t-accent-light t-accent-light--6">
  <div class="m-card-content">
    <p class="u-margin--top-none u-margin--bottom-2">
      <strong>
        ...
      </strong>
    </p>
    <p class="u-margin--none">
      ...
    </p>
  </div>
  <div class="m-card-image">
    <img src="..." aria-hidden>
  </div>
</div>

Optional card with hidden icon on mobile

Optional icon sizes - n1, n2 and n3

Development and test

Notes for developers

Ensure .t-accent-light accent colour type and .t-accent-light--1 colour options have both been specified for the card to guarantee the correct font colours within the card.

Lazy loading can be applied to the icons on the cards. For how to do this see the lazy loading page for reference.

Notes for testers

Ensure that heading is H3 (20px) or bold 16px.
Ensure that heading is 45 - 60 characters max.
Ensure that text is 140 - 190 characters max.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to
`.m-card`	Base style for card	Yes	`div`
`.m-card-information`	Base style for information card	Yes	`.m-card`
`.m-card-information--icon-left`	Place icon on the left of the card		`.m-card-information`
`.m-card-information--no-image-small`	Remove icon on mobile viewport		`.m-card-information`
`.m-card-content`	Base style for the text section of card	Yes	`.m-card > div`
`.m-card-image`	Base style for the image section of the card	Yes	`.m-card > div`
`.m-card-image--n1`	Force image width to 110px		`.m-card > div`
`.m-card-image--n2`	Force image width to 75px		`.m-card > div`
`.m-card-image--n3`	Force image width to 45px		`.m-card > div`

Component releases

Added on: v2023.01-06 (21/04/23)
Updated on: v2023.01-06 (21/04/23)

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team