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.
When not to 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.
Basic cards
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 commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<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>
{% endblock %}Basic cards with meta information
An example of a basic card component used in a group which has meta data.
Cards with 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 commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<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>
{% endblock %}Cards with image
An example of a card component used in a group which has meta data and an image.
Cards with image
<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 commonplace on a CRM Portal.
{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% block title %}{% endblock %}
{% block main %}
{% unless user %}
<script>
window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
</script>
{% endunless %}
<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>
{% endblock %}If you would like any additional advice or guidance with using these examples on Power Pages, please contact the Solutions Delivery Team.