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#
Flat Card#
| Key | Field type | Guidelines |
|---|---|---|
| A | Heading | The 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. |
| B | Content | A 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>. |
| C | CTA | Keep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters. |
Section Card#
| Key | Field type | Guidelines |
|---|---|---|
| A | Heading | The 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. |
| B | Content | A 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>. |
| C | CTA | Keep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters. |
| D | Illustration | Use 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#
| Key | Field type | Guidelines |
|---|---|---|
| A | Heading | The 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. |
| B | Content | A 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>. |
| C | CTA | Keep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters. |
| D | Image | This 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#
| Component | Variant | Ratio | Dimensions | Size | Type | Placeholder |
|---|---|---|---|---|---|---|
ns-card | support | 16:9 | 640x360px | < 50kb | jpeg | ns-card-support-640x360px |
Best practice#
| 💚 Do's | 💔 Don'ts |
|---|---|
| Always use them in the triple layout | Use the text CTA in the section card |
| Use to direct customers to the actions | Mix card types in a row |
| Embolden text in the paragraph that is important | Have two or more cta's for a card |
| Make your CTA copy unique, stating the action | Repeat the CTA copy in each card |
| Use section cards to navigate users to primary actions | Use inline links in the paragraph |
| Consider using decoration in the panel to add emphasis on the cards | Use 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#
Using with action#
Using with ns-pill#
To add a ns-pill to the card it needs to be placed inside one of the slots. Be careful about using it within the heading slot, as the pill content will be read out as part of the heading for screen readers.
If you have a group of cards, try to make sure that the pill is placed in the same location throughout those cards. This will make improve the readability of the cards.
Screen readers with ns-pill#
In the above example the screen reader will read out "Special Offer Get energy with us". Make sure that is what is expected. Remember the pill cannot be used on its own within a heading. Our advice is to rarely put pills in headings as they are normally conveying a message related to the heading, but is not heading content.
Pill over image#
If using with a type of support with an image. There is also the option to place the pill over the image using the pillOverImage attribute. Note the ns-pill will need to be in the paragraph slot as it is no longer related to the heading.
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#
| Attribute | Type | Default | Options | Description |
|---|---|---|---|---|
alt | string | The alternative text for the image | ||
decoration | string | See Illustration component in Storybook and See Icon component in Storybook | Illustration that is shown in the section type card and Icon used in ns-highlighter | |
image | string | Adds an image above the card content for the support | ||
type | string | "section" | "section", "support", "flat" | Defines the role of the card and changing the style |
pillOverImage | boolean | Used to put the pill in the top left of the image when using type="support" and an image |
Support and Flat#
| Slots | Type |
|---|---|
heading | h tag |
paragraph | p tag |
action | ns-cta, ns-form |
cta | ns-cta |
Section#
| Slots | Type |
|---|---|
heading | h tag |
paragraph | p tag |
cta | ns-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
supportandflattypes the action slot is not shown if the deprecated cta slot is used
CTA#
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.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.