Skip to main content

ns-card

Introduction#

Cards can be used to contain content in a consistent and structured way.

Cards are used to apply a container around a related grouping of information; this can be done through imagery, illustrations and typography.

Content guidance#

Section Card#

Card - Section

KeyField typeGuidelines
AHeadingThe recommended length is between 4 and 12 words, not exceeding 50 characters in total. Headings contain light and bold font weight to highlight key messaging.
BContentA single, short paragraph works best. You are able to use inline text links within the paragraph if necessary. Don't add additional headings within the paragraph and the copy length should not exceed more than two paragraphs of 3 lines each. Can contain bold copy <b>, inline links <a>, lists <ul> <ol>, and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a>.
CCTAKeep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters.
DIllustrationUse to support and highlight the content. The illustration should relate to the product or service you are talking about. The specification table has a list of options.

Support Image Card#

Card - Support Image

KeyField typeGuidelines
AHeadingThe recommended length is between 4 and 12 words, not exceeding 50 characters in total. Headings contain light and bold font weight to highlight key messaging.
BContentA single, short paragraph works best. You are able to use inline text links within the paragraph if necessary. Don't add additional headings within the paragraph and the copy length should not exceed more than two paragraphs of 3 lines each. Can contain bold copy <b>, inline links <a>, lists <ul> <ol>, and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a>.
CCTAKeep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters.
DImageThis is the image that will be used above the ns-card. It should have an aspect ratio of 16:9, the dimensions should be 640x360px, the file type should be jpg, and the file size should be no more than 50kb. Don't use imagery with white backgrounds.

Image guidance#

ComponentVariantRatioDimensionsSizeTypePlaceholder
ns-cardsupport16:9640x360px< 50kbjpegns-card-support-640x360px

Best practice#

💚 Do's💔 Don'ts
Always use them in the triple layoutUse the text CTA in the section card
Use to direct customers to the actionsMix card types in a row
Embolden text in the paragraph that is importantHave two or more cta's for a card
Make your CTA copy unique, stating the actionRepeat the CTA copy in each card
Use section cards to navigate users to primary actionsUse inline links in the paragraph
Consider using decoration in the panel to add emphasis on the cardsUse the section card without a decoration

Considerations of best practice#

  • Consider your CTA type and try to keep them consistent between rows across the cards, unless there is a need.
  • There can be less than three cards in a row, but it should always use the triple layout. Always consider a lockup for this, before using the cards.
  • Headings work best with one to four words.
  • Please check the imagery guidelines when adding an image to the card.
  • Be careful when using decoration in the panel with the section cards as the blue on blue with the CTA's will make them not accessible.
  • There should always be a heading to the group of cards inside the panel.

Usage#

Section#

View example on Storybook

Using with action#

<ns-card type="support" decoration="bulb">
<h3 slot="heading">Get energy with us</h3>
<p slot="paragraph">We've got a tariff to suit every home and family.</p>
<div slot="action">
<!-- action content ns-cta/ns-form -->
</div>
</ns-card>

Using with ns-pill#

To add a ns-pill to the card it needs to be placed inside the heading slot. This allows screen readers to announce the pill when they are navigating by headings on a page.

<ns-card>
<h3 slot="heading">
<ns-pill>Special Offer</ns-pill>
Get energy with us
</h3>
...
</ns-card>

If using with a a type of support there is also the option to place the pill over the image using the pillOverImage attribute. Note the ns-pill will still need to be in the heading slot.

<ns-card type="support" image="path/to/image" pillOverImage>
<h3 slot="heading">
<ns-pill>Special Offer</ns-pill>
Get energy with us
</h3>
...
</ns-card>

More details on how to use the ns-pill can be found on the ns-pill documentation

Component placement#

The ns-card component can be used in the following components:

Specification#

AttributeTypeDefaultOptionsDescription
altstringThe alternative text for the image
decorationstringSee Illustration component in Storybook and See Icon component in StorybookIllustration that is shown in the section type card and Icon used in ns-highlighter
imagestringAdds an image above the card content for the support
typestring"section""section", "support", "flat"Defines the role of the card and changing the style
pillOverImagebooleanUsed to put the pill in the top left of the image when using type="support" and an image

Support and Flat#

SlotsType
headingh tag
paragraphp tag
actionns-cta, ns-form
ctans-cta

Section#

SlotsType
headingh tag
paragraphp tag
ctans-cta

Specification notes#

Decoration#

  • Required if the type is section

Image#

  • Images are always at a ratio of 16:9

Heading#

  • This should be a heading level 3

Action#

  • Action is used to hold interactive content e.g. buttons, forms, etc
  • On support and flat types the action slot is not shown if the deprecated cta slot is used

CTA#

  • Only for section types
  • This should be an anchor with the ns-cta or just the ns-cta

Design Tokens

You can change the branded look and feel of the ns-card by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "theme": "white",
  "border-color": "#FFFFFF",
  "paragraph": {
    "typography": "p-normal"
  },
  "box-shadow": [
    "rgba(170, 170, 170, 0.05) 0px 0px 0px 1px"
  ],
  "drop-shadow": [
    "rgba(170, 170, 170, 0.40) -3px 3px 10px",
    "rgba(51, 51, 51, 0.05) -20px 20px 20px"
  ],
  "highlighter": {
    "heading": {
      "typography": "heading-5"
    },
    "paragraph": {
      "typography": "p-small"
    }
  },
  "section": {
    "heading": {
      "typography": "heading-3"
    }
  },
  "support": {
    "heading": {
      "typography": "heading-4"
    }
  },
  "flat": {
    "heading": {
      "typography": "heading-4"
    }
  },
  "nav": {
    "heading": {
      "typography": "heading-5"
    },
    "paragraph": {
      "typography": "p-small"
    }
  },
  "lockjaw": {
    "heading": {
      "typography": "heading-1"
    },
    "paragraph": {
      "typography": "p-normal"
    }
  },
  "lockbox": {
    "heading": {
      "typography": "heading-1"
    }
  }
}

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

💩 🎉 🦄 You can also contact the team on Slack on the #product-nucleus channel!

Related links#