Cards

Cards show basic information and act as a link for more detailed information.

The Improving User Experience cluster want to make this component better.

If you work in Parliament and are using it or plan to use it, please contact us on the #design-system Slack channel.

When to use cards

Use a card when you need to display core information on a topic with a link to more detail.

Cards must contain enough information for a user to take something meaningful away from it.

For example, the member card shows a member’s name, the party they belong to and the House they sit in. This helps users to understand the make-up of a committee. Each card then links to a member’s page allowing users to find out more information about each member.

When not to use cards

When you don’t need to include a link

Previous guidance suggested cards could be used without a link. However, cards must now contain a link.

If you need to show basic information without including a link there may be a better way to do this.

When you need to display complex information

Cards are only designed to display basic information. Do not use cards for complex information, infographics, charts or graphs.

How cards work

Cards are customisable and can show information in different ways.

The whole area of a card is interactive and clicking or tapping anywhere on a card will navigate users to the link destination.

A card using all the fields

Example Open in a new tab: card using all fields
Primary info
Secondary info
Tertiary info
Label indicator
Icon indicator 
<a href="#" class="card">
  <div class="card-inner">
    <div class="content">
      <div class="primary-info">Primary info</div>
      <div class="secondary-info">Secondary info</div>
      <div class="tertiary-info">Tertiary info</div>
    </div>
    <div class="info">
      <div class="info-inner">
        <div class="indicators-left">
          <div class="indicator indicator-label">Label indicator</div>
        </div>
        <div class="indicators-right">
          <div class="indicator">
            <span class="icon fas fa-user" aria-hidden="true"></span>
            Icon indicator
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

Text block card

Example Open in a new tab: text block card
Primary info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue cursus feugiat. Sed scelerisque, ipsum quis malesuada sodales, nisi purus finibus mi, vel accumsan tortor sem sed mauris. 
<a href="#" class="card">
  <div class="card-inner">
    <div class="content">
      <div class="primary-info">Primary info</div>
      <div class="text text-secondary">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue
        cursus feugiat. Sed scelerisque, ipsum quis malesuada sodales, nisi
        purus finibus mi, vel accumsan tortor sem sed mauris.
      </div>
    </div>
  </div>
</a>

Member card

The member card includes a field to display an image of the member. As the image is decorative the alt attribute must be set to an empty string, this is so that screen readers know to ignore the image.

Using the alt attribute means you do not need to also use an aria-label.

Example Open in a new tab: member card
Member name
Party name
Constituency name/Peer type
Commons 
<a href="#" class="card card-member">
  <div class="card-inner">
    <div class="content">
      <div class="image-outer">
        <div
          class="image"
          role="img"
          alt=""
          style="
            background-image: url(https://data.parliament.uk/membersdataplatform/services/images/MemberPhoto/1);
            border-color: #eb00ff;
          "
        ></div>
      </div>
      <div class="primary-info">Member name</div>
      <div class="secondary-info">Party name</div>
    </div>
    <div class="info">
      <div class="info-inner">
        <div class="indicators-left">
          <div class="indicator indicator-label">
            Constituency name/Peer type
          </div>
        </div>
        <div class="indicators-right">
          <div class="indicator indicator-house indicator-house-commons">
            <span class="icon" aria-hidden="true"></span>
            Commons
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

Grouping multiple cards

You can use card-list to group multiple cards in a single container and provide consistent spacing.

Example Open in a new tab: card list
Member name
Party name
Constituency name/Peer type
Commons
Member name
Party name
Constituency name/Peer type
Commons 
<div class="card-list">
  <a href="#" class="card card-member">
    <div class="card-inner">
      <div class="content">
        <div class="image-outer">
          <div
            class="image"
            role="img"
            alt=""
            style="
              background-image: url(https://data.parliament.uk/membersdataplatform/services/images/MemberPhoto/1);
              border-color: #eb00ff;
            "
          ></div>
        </div>
        <div class="primary-info">Member name</div>
        <div class="secondary-info">Party name</div>
      </div>
      <div class="info">
        <div class="info-inner">
          <div class="indicators-left">
            <div class="indicator indicator-label">
              Constituency name/Peer type
            </div>
          </div>
          <div class="indicators-right">
            <div class="indicator indicator-house indicator-house-commons">
              <span class="icon" aria-hidden="true"></span>
              Commons
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
  <a href="#" class="card card-member">
    <div class="card-inner">
      <div class="content">
        <div class="image-outer">
          <div
            class="image"
            role="img"
            alt=""
            style="
              background-image: url(https://data.parliament.uk/membersdataplatform/services/images/MemberPhoto/1);
              border-color: #eb00ff;
            "
          ></div>
        </div>
        <div class="primary-info">Member name</div>
        <div class="secondary-info">Party name</div>
      </div>
      <div class="info">
        <div class="info-inner">
          <div class="indicators-left">
            <div class="indicator indicator-label">
              Constituency name/Peer type
            </div>
          </div>
          <div class="indicators-right">
            <div class="indicator indicator-house indicator-house-commons">
              <span class="icon" aria-hidden="true"></span>
              Commons
            </div>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>

Other types of card

Other types of card are available in the code base. If you’re using any of these, please replace them with the cards above.

  • Light card
  • House card
  • Party card
  • Small card
  • Card list: two columns
  • Card list: three columns

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.