Card

When to use this component

The card component is a versatile user interface element used to display grouped information in a visually appealing and organised way. They can enhance user interaction and content presentation across various applications and devices.

When to not use this component

Cards can make things harder to understand if overused or used incorrectly. Before using them, test your content as structured content with headers and paragraphs and grid layout.

HTML examples

Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.

Basic cards

An example of a basic card component used in a group.

Card component

Card title

A short description for the card.

Card title

A short description for the card.

      
      
<div class="dfe-grid-container">
  <div class="dfe-card">
    <div class="dfe-card-container">
      <h3 class="govuk-heading-m">
        <a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Card title</a>
      </h3>
      <p>A short description for the card.</p>
    </div>
  </div>
  <div class="dfe-card">
    <div class="dfe-card-container">
      <h3 class="govuk-heading-m">
        <a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Card title</a>
      </h3>
      <p>A short description for the card.</p>
    </div>
  </div>
</div>
Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks. 
      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}

Basic cards with meta information

An example of a basic card component used in a group which has meta data.

Card component

Card title

A short description for the card.

Meta information.

Card title

A short description for the card.

Meta information.

      
      
<div class="dfe-grid-container">
  <div class="dfe-card">
    <div class="dfe-card-container">
      <h3 class="govuk-heading-m">
        <a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Card title</a>
      </h3>
      <p>A short description for the card.</p>
      <p class="govuk-body-s">Meta information.</p>
    </div>
  </div>
  <div class="dfe-card">
    <div class="dfe-card-container">
      <h3 class="govuk-heading-m">
        <a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Card title</a>
      </h3>
      <p>A short description for the card.</p>
      <p class="govuk-body-s">Meta information.</p>
    </div>
  </div>
</div>
Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks. 
      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %} 

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}

Cards with image

An example of a card component used in a group which has meta data and an image.

Radio component

Sample Image

Sample Card Title

A short description for the card.

Meta information

Sample Image

Sample Card Title

A short description for the card.

Meta information

      
      
<div class="dfe-grid-container">
  <div class="dfe-card">
    <img src="/assets/images/sample.png" alt="Sample Image">
    <div class="dfe-card-container">
      <h3 class="govuk-heading-m">
        <a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Sample Card Title</a>
      </h3>
      <p>A short description for the card.</p>
      <p class="govuk-body-s">Meta information</p>
    </div>
  </div>
  <div class="dfe-card">
    <img src="/assets/images/sample.png" alt="Sample Image">
    <div class="dfe-card-container">
      <h3 class="govuk-heading-m">
        <a href="#" class="govuk-link govuk-link--no-visited-state dfe-card-link--header">Sample Card Title</a>
      </h3>
      <p>A short description for the card.</p>
      <p class="govuk-body-s">Meta information</p>
    </div>
  </div>
</div>
Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks. 
      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}

If you would like any additional advice or guidance with using these examples on Dynamics 365 Portals, please contact the Solutions Delivery Team.