Card
When to use this component
Use the card component to display related content in a visually distinct container.
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.
If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name.
Retain any prefixed or suffixed text related to the schema name.
For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).
This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.
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>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% 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.
Basic 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>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% 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>{% extends 'DfE/Layouts/2ColumnWideLeft' %}
{% 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.