Navigation - Card

When to use a card

Use a card to give users a brief summary of content or a task, often with a link to more detail. You can display a card alongside other cards to group related content or tasks.

How it works

Cards should be easy to scan for relevant and actionable information. They can contain multiple elements, such as an image, title, text and links.

Basic card

Open this default card example in new window
Copy default card code 
<div class="hs2-card">
  <div class="hs2-card__content">
    <h3 class="hs2-card__heading">
      Card Heading

    </h3>
    <p class="hs2-card__description">Card description text goes here</p>
  </div>
</div>
Close default card code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default card
Name Type Required Description
Name heading Type string Required true Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml Type string Required true Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses Type string Required false Description Classes to add to the card heading.
Name headingLevel Type integer Required false Description Optional heading level for the card heading. Default: 2
Name href Type string Required false Description The value of the card link href attribute.
Name clickable Type boolean Required false Description If set to true, then the whole Card will become a clickable Card variant.
Name feature Type boolean Required false Description If set to true, then the Card will become a feature Card variant.
Name imgURL Type string Required false Description The URL of the image in the card.
Name imgALT Type string Required false Description The alternative text of the image in the card.
Name description Type string Required false Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml Type string Required false Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes Type string Required false Description Classes to add to the card.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the card.
Copy default card code 
{% from 'card/macro.njk' import card %}

{{ card({
  "heading": "Card Heading",
  "headingLevel": "3",
  "descriptionHtml": "<p class=\"hs2-card__description\">Card description text goes here</p>"
}) }}
Close default card code

Clickable card

If the card contains a single link, you can make the hit area for the link wrap the entire card.

We avoid wrapping an entire card in an anchor tag as this can be a difficult experience for screen reader users.

Open this clickable card example in new window
Copy clickable card code 
<div class="hs2-card hs2-card--clickable">
  <div class="hs2-card__content">
    <h2 class="hs2-card__heading hs2-heading-m">
      <a class="hs2-card__link" href="#">Card Heading</a>
    </h2>
    <p class="hs2-card__description">Card description text goes here</p>
  </div>
</div>
Close clickable card code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for clickable card
Name Type Required Description
Name heading Type string Required true Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml Type string Required true Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses Type string Required false Description Classes to add to the card heading.
Name headingLevel Type integer Required false Description Optional heading level for the card heading. Default: 2
Name href Type string Required false Description The value of the card link href attribute.
Name clickable Type boolean Required false Description If set to true, then the whole Card will become a clickable Card variant.
Name feature Type boolean Required false Description If set to true, then the Card will become a feature Card variant.
Name imgURL Type string Required false Description The URL of the image in the card.
Name imgALT Type string Required false Description The alternative text of the image in the card.
Name description Type string Required false Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml Type string Required false Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes Type string Required false Description Classes to add to the card.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the card.
Copy clickable card code 
{% from 'card/macro.njk' import card %}

{{ card({
  "href": "#",
  "clickable": "true",
  "heading": "Card Heading",
  "headingClasses": "hs2-heading-m",
  "description": "Card description text goes here"
}) }}
Close clickable card code

Card with an image

Open this with image card example in new window
Copy with image card code 
<div class="hs2-card hs2-card--clickable">
  <img class="hs2-card__img" src="https://assets.hs2.org.uk/wp-content/uploads/2022/02/HS2-VL-35279-220203_HS2_Apprentice_Curzon_NR-48-1400x631.jpeg" alt="">
  <div class="hs2-card__content">
    <h2 class="hs2-card__heading hs2-heading-m">
      <a class="hs2-card__link" href="#">Card Heading</a>
    </h2>
    <p class="hs2-card__description">Card description text goes here</p>
  </div>
</div>
Close with image card code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for with image card
Name Type Required Description
Name heading Type string Required true Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml Type string Required true Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses Type string Required false Description Classes to add to the card heading.
Name headingLevel Type integer Required false Description Optional heading level for the card heading. Default: 2
Name href Type string Required false Description The value of the card link href attribute.
Name clickable Type boolean Required false Description If set to true, then the whole Card will become a clickable Card variant.
Name feature Type boolean Required false Description If set to true, then the Card will become a feature Card variant.
Name imgURL Type string Required false Description The URL of the image in the card.
Name imgALT Type string Required false Description The alternative text of the image in the card.
Name description Type string Required false Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml Type string Required false Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes Type string Required false Description Classes to add to the card.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the card.
Copy with image card code 
{% from 'card/macro.njk' import card %}

{{ card({
  "imgURL": "https://assets.hs2.org.uk/wp-content/uploads/2022/02/HS2-VL-35279-220203_HS2_Apprentice_Curzon_NR-48-1400x631.jpeg",
  "href": "#",
  "clickable": "true",
  "heading": "Card Heading",
  "headingClasses": "hs2-heading-m",
  "description": "Card description text goes here"
}) }}
Close with image card code

The card image is set as a decorative image by default, with the alternative text being null.

Card group

You can group multiple cards to show a collection of related topics. Prioritise the cards so the content users need most comes first.

We define the width of the cards using the grid system. For example, hs2-grid-column-one-half is used to make the cards half width:

Open this group half card example in new window
Copy group half card code 
<ul class="hs2-grid-row hs2-card-group">
  <li class="hs2-grid-column-one-half hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <h2 class="hs2-card__heading hs2-heading-m">
          <a class="hs2-card__link" href="#">Card heading one</a>
        </h2>
        <p class="hs2-card__description">Card one description text goes here</p>
      </div>
    </div>

  </li>
  <li class="hs2-grid-column-one-half hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <h2 class="hs2-card__heading hs2-heading-m">
          <a class="hs2-card__link" href="#">Card heading two</a>
        </h2>
        <p class="hs2-card__description">Card two description text goes here</p>
      </div>
    </div>

  </li>
  <li class="hs2-grid-column-one-half hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <h2 class="hs2-card__heading hs2-heading-m">
          <a class="hs2-card__link" href="#">Card heading three</a>
        </h2>
        <p class="hs2-card__description">Card three description text goes here</p>
      </div>
    </div>

  </li>
  <li class="hs2-grid-column-one-half hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <h2 class="hs2-card__heading hs2-heading-m">
          <a class="hs2-card__link" href="#">Card heading four</a>
        </h2>
        <p class="hs2-card__description">Card four description text goes here</p>
      </div>
    </div>

  </li>
</ul>
Close group half card code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for group half card
Name Type Required Description
Name heading Type string Required true Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml Type string Required true Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses Type string Required false Description Classes to add to the card heading.
Name headingLevel Type integer Required false Description Optional heading level for the card heading. Default: 2
Name href Type string Required false Description The value of the card link href attribute.
Name clickable Type boolean Required false Description If set to true, then the whole Card will become a clickable Card variant.
Name feature Type boolean Required false Description If set to true, then the Card will become a feature Card variant.
Name imgURL Type string Required false Description The URL of the image in the card.
Name imgALT Type string Required false Description The alternative text of the image in the card.
Name description Type string Required false Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml Type string Required false Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes Type string Required false Description Classes to add to the card.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the card.
Copy group half card code 
{% from 'card/macro.njk' import card %}

<ul class="hs2-grid-row hs2-card-group">
  <li class="hs2-grid-column-one-half hs2-card-group__item">
    {{ card({
      "href": "#",
      "clickable": "true",
      "heading": "Card heading one",
      "headingClasses": "hs2-heading-m",
      "description": "Card one description text goes here"
    }) }}
  </li>
  <li class="hs2-grid-column-one-half hs2-card-group__item">
    {{ card({
      "href": "#",
      "clickable": "true",
      "heading": "Card heading two",
      "headingClasses": "hs2-heading-m",
      "description": "Card two description text goes here"
    }) }}
  </li>
  <li class="hs2-grid-column-one-half hs2-card-group__item">
    {{ card({
      "href": "#",
      "clickable": "true",
      "heading": "Card heading three",
      "headingClasses": "hs2-heading-m",
      "description": "Card three description text goes here"
    }) }}
  </li>
  <li class="hs2-grid-column-one-half hs2-card-group__item">
    {{ card({
      "href": "#",
      "clickable": "true",
      "heading": "Card heading four",
      "headingClasses": "hs2-heading-m",
      "description": "Card four description text goes here"
    }) }}
  </li>
</ul>
Close group half card code

For thirds, use hs2-grid-column-one-third:

Open this group third card example in new window
Copy group third card code 
<ul class="hs2-grid-row hs2-card-group">
  <li class="hs2-grid-column-one-third hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <h2 class="hs2-card__heading hs2-heading-m">
          <a class="hs2-card__link" href="#">Card heading one</a>
        </h2>
        <p class="hs2-card__description">Card one description text goes here</p>
      </div>
    </div>

  </li>
  <li class="hs2-grid-column-one-third hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <h2 class="hs2-card__heading hs2-heading-m">
          <a class="hs2-card__link" href="#">Card heading two</a>
        </h2>
        <p class="hs2-card__description">Card two description text goes here</p>
      </div>
    </div>

  </li>
  <li class="hs2-grid-column-one-third hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <h2 class="hs2-card__heading hs2-heading-m">
          <a class="hs2-card__link" href="#">Card heading three</a>
        </h2>
        <p class="hs2-card__description">Card three description text goes here</p>
      </div>
    </div>

  </li>
</ul>
Close group third card code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for group third card
Name Type Required Description
Name heading Type string Required true Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml Type string Required true Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses Type string Required false Description Classes to add to the card heading.
Name headingLevel Type integer Required false Description Optional heading level for the card heading. Default: 2
Name href Type string Required false Description The value of the card link href attribute.
Name clickable Type boolean Required false Description If set to true, then the whole Card will become a clickable Card variant.
Name feature Type boolean Required false Description If set to true, then the Card will become a feature Card variant.
Name imgURL Type string Required false Description The URL of the image in the card.
Name imgALT Type string Required false Description The alternative text of the image in the card.
Name description Type string Required false Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml Type string Required false Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes Type string Required false Description Classes to add to the card.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the card.
Copy group third card code 
{% from 'card/macro.njk' import card %}

<ul class="hs2-grid-row hs2-card-group">
  <li class="hs2-grid-column-one-third hs2-card-group__item">
    {{ card({
      "href": "#",
      "clickable": "true",
      "heading": "Card heading one",
      "headingClasses": "hs2-heading-m",
      "description": "Card one description text goes here"
    }) }}
  </li>
  <li class="hs2-grid-column-one-third hs2-card-group__item">
    {{ card({
      "href": "#",
      "clickable": "true",
      "heading": "Card heading two",
      "headingClasses": "hs2-heading-m",
      "description": "Card two description text goes here"
    }) }}
  </li>
  <li class="hs2-grid-column-one-third hs2-card-group__item">
    {{ card({
      "href": "#",
      "clickable": "true",
      "heading": "Card heading three",
      "headingClasses": "hs2-heading-m",
      "description": "Card three description text goes here"
    }) }}
  </li>
</ul>
Close group third card code

For quarters, use hs2-grid-column-one-quarter:

Open this group quarter card example in new window
Copy group quarter card code 
<ul class="hs2-grid-row hs2-card-group">
  <li class="hs2-grid-column-one-quarter hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <p class="hs2-heading-xl hs2-u-font-size-64 hs2-u-margin-bottom-1">91 <span class="hs2-u-visually-hidden">Applicants</span></p><a href="#" class="hs2-card__link hs2-u-font-weight-normal hs2-u-font-size-19 hs2-link--no-visited-state">Applicants</a>
      </div>
    </div>

  </li>
  <li class="hs2-grid-column-one-quarter hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <p class="hs2-heading-xl hs2-u-font-size-64 hs2-u-margin-bottom-1">23 <span class="hs2-u-visually-hidden">Jobs</span></p><a href="#" class="hs2-card__link hs2-u-font-weight-normal hs2-u-font-size-19 hs2-link--no-visited-state">Jobs</a>
      </div>
    </div>

  </li>
  <li class="hs2-grid-column-one-quarter hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <p class="hs2-heading-xl hs2-u-font-size-64 hs2-u-margin-bottom-1">8 <span class="hs2-u-visually-hidden">Services</span></p><a href="#" class="hs2-card__link hs2-u-font-weight-normal hs2-u-font-size-19 hs2-link--no-visited-state">Services</a>
      </div>
    </div>

  </li>
  <li class="hs2-grid-column-one-quarter hs2-card-group__item">

    <div class="hs2-card hs2-card--clickable">
      <div class="hs2-card__content">
        <p class="hs2-heading-xl hs2-u-font-size-64 hs2-u-margin-bottom-1">33 <span class="hs2-u-visually-hidden">Messages</span></p><a href="#" class="hs2-card__link hs2-u-font-weight-normal hs2-u-font-size-19 hs2-link--no-visited-state">Messages</a>
      </div>
    </div>

  </li>
</ul>
Close group quarter card code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for group quarter card
Name Type Required Description
Name heading Type string Required true Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml Type string Required true Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses Type string Required false Description Classes to add to the card heading.
Name headingLevel Type integer Required false Description Optional heading level for the card heading. Default: 2
Name href Type string Required false Description The value of the card link href attribute.
Name clickable Type boolean Required false Description If set to true, then the whole Card will become a clickable Card variant.
Name feature Type boolean Required false Description If set to true, then the Card will become a feature Card variant.
Name imgURL Type string Required false Description The URL of the image in the card.
Name imgALT Type string Required false Description The alternative text of the image in the card.
Name description Type string Required false Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml Type string Required false Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes Type string Required false Description Classes to add to the card.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the card.
Copy group quarter card code 
{% from 'card/macro.njk' import card %}

<ul class="hs2-grid-row hs2-card-group">
  <li class="hs2-grid-column-one-quarter hs2-card-group__item">
    {{ card({
      "clickable": "true",
      "headingHtml": "<p class=\"hs2-heading-xl hs2-u-font-size-64 hs2-u-margin-bottom-1\">91 <span class=\"hs2-u-visually-hidden\">Applicants</span></p><a href=\"#\" class=\"hs2-card__link hs2-u-font-weight-normal hs2-u-font-size-19 hs2-link--no-visited-state\">Applicants</a>"
    }) }}
  </li>
  <li class="hs2-grid-column-one-quarter hs2-card-group__item">
    {{ card({
      "clickable": "true",
      "headingHtml": "<p class=\"hs2-heading-xl hs2-u-font-size-64 hs2-u-margin-bottom-1\">23 <span class=\"hs2-u-visually-hidden\">Jobs</span></p><a href=\"#\" class=\"hs2-card__link hs2-u-font-weight-normal hs2-u-font-size-19 hs2-link--no-visited-state\">Jobs</a>"
    }) }}
  </li>
  <li class="hs2-grid-column-one-quarter hs2-card-group__item">
    {{ card({
      "clickable": "true",
      "headingHtml": "<p class=\"hs2-heading-xl hs2-u-font-size-64 hs2-u-margin-bottom-1\">8 <span class=\"hs2-u-visually-hidden\">Services</span></p><a href=\"#\" class=\"hs2-card__link hs2-u-font-weight-normal hs2-u-font-size-19 hs2-link--no-visited-state\">Services</a>"
    }) }}
  </li>
  <li class="hs2-grid-column-one-quarter hs2-card-group__item">
    {{ card({
      "clickable": "true",
      "headingHtml": "<p class=\"hs2-heading-xl hs2-u-font-size-64 hs2-u-margin-bottom-1\">33 <span class=\"hs2-u-visually-hidden\">Messages</span></p><a href=\"#\" class=\"hs2-card__link hs2-u-font-weight-normal hs2-u-font-size-19 hs2-link--no-visited-state\">Messages</a>"
    }) }}
  </li>
</ul>
Close group quarter card code

Accessibility

Heading level and size

Use headings correctly to reflect the page structure. If you need to, change the level of the heading.

Here's an example of replacing the default h2 heading with an h3:

Open this heading level card example in new window
Copy heading level card code 
<div class="hs2-card">
  <div class="hs2-card__content">
    <h3 class="hs2-card__heading">
      Heading level 3

    </h3>
    <p class="hs2-card__description">Card description text goes here</p>
  </div>
</div>
Close heading level card code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for heading level card
Name Type Required Description
Name heading Type string Required true Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml Type string Required true Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses Type string Required false Description Classes to add to the card heading.
Name headingLevel Type integer Required false Description Optional heading level for the card heading. Default: 2
Name href Type string Required false Description The value of the card link href attribute.
Name clickable Type boolean Required false Description If set to true, then the whole Card will become a clickable Card variant.
Name feature Type boolean Required false Description If set to true, then the Card will become a feature Card variant.
Name imgURL Type string Required false Description The URL of the image in the card.
Name imgALT Type string Required false Description The alternative text of the image in the card.
Name description Type string Required false Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml Type string Required false Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes Type string Required false Description Classes to add to the card.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the card.
Copy heading level card code 
{% from 'card/macro.njk' import card %}

{{ card({
  "heading": "Heading level 3",
  "headingLevel": "3",
  "description": "Card description text goes here"
}) }}
Close heading level card code

You can change the size of the heading using heading typography styles.

Here's an example of using an h2 with an hs2-heading-s class to reduce the size of the heading:

Open this heading size card example in new window
Copy heading size card code 
<div class="hs2-card">
  <div class="hs2-card__content">
    <h2 class="hs2-card__heading hs2-heading-s">
      Heading level

    </h2>
    <p class="hs2-card__description">Card description text goes here</p>
  </div>
</div>
Close heading size card code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for heading size card
Name Type Required Description
Name heading Type string Required true Description Text to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingHtml Type string Required true Description HTML to use within the heading of the card component. If `headingHtml` is provided, the `heading` argument will be ignored.
Name headingClasses Type string Required false Description Classes to add to the card heading.
Name headingLevel Type integer Required false Description Optional heading level for the card heading. Default: 2
Name href Type string Required false Description The value of the card link href attribute.
Name clickable Type boolean Required false Description If set to true, then the whole Card will become a clickable Card variant.
Name feature Type boolean Required false Description If set to true, then the Card will become a feature Card variant.
Name imgURL Type string Required false Description The URL of the image in the card.
Name imgALT Type string Required false Description The alternative text of the image in the card.
Name description Type string Required false Description Text description within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name descriptionHtml Type string Required false Description HTML to use within the card content. If `descriptionHtml` is provided, the `description` argument will be ignored.
Name classes Type string Required false Description Classes to add to the card.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the card.
Copy heading size card code 
{% from 'card/macro.njk' import card %}

{{ card({
  "heading": "Heading level",
  "headingClasses": "hs2-heading-s",
  "description": "Card description text goes here"
}) }}
Close heading size card code