Card
<ns-card>
Overview
Cards can be used to contain content in a consistent and structured way.
Cards are to be used to apply a container around a related grouping of information. Achieve this through a combination of imagery, illustrations and typography.
Examples
To navigate users to the primary actions in the page.
To provide additional or supporting information about the actions in the page.
To place the pill over the image using the pill-over-image
attribute.
To group content and action that are part of the page.
Guidance
Section
Key
Key | Field type | Guidelines |
---|---|---|
A | Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. |
B | Paragraph | A single, short paragraph works best. The text length should not exceed two paragraphs of 3 lines. Include emphasis with <strong> , inline links <a> , lists <ul> <ol> . Add a caveat link if required. |
C | CTA | Keep the text short, relevant, and actionable. It should not exceed 24 characters. |
D | Decoration | Use to support and highlight the content. See illustrations. |
Support
Key
Key | Field type | Guidelines |
---|---|---|
A | Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. |
B | Paragraph | A single, short paragraph works best. The text length should not exceed two paragraphs of 3 lines. Include emphasis with <strong> , inline links <a> , lists <ul> <ol> . Add a caveat link if required. |
C | CTA | Keep the text short, relevant, and actionable. It should not exceed 24 characters. |
D | Image | Use an image size of 640 x 360px. Images should be WebP file type, the file size should be no more than 25kb. |
Flat
Key
Key | Field type | Guidelines |
---|---|---|
A | Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. |
B | Paragraph | A single, short paragraph works best. The text length should not exceed two paragraphs of 3 lines. Include emphasis with <strong> , inline links <a> , lists <ul> <ol> . Add a caveat link if required. |
C | CTA | Keep the text short, relevant, and actionable. It should not exceed 24 characters. |
Considerations
- Keep the type of CTA consistent across a group of cards.
- Always add heading to the group of cards inside the panel.
- Place the pill in the same location across the group of cards to improve the readability of the cards.
Implementation
Placement
The ns-card
component can be used in the following components:
Specification
Attributes
decoration
- Property
decoration
- Description
- The decorative illustration to provide visual aid to the content of `section` type card.
- Type
string
- Options
- Refer to our illustrations.
pill-over-image
- Property
isPillOverImage
- Description
- The toggle to display the pill over the image for `support` type card.
- Type
boolean
- Default
false
image
- Property
image
- Description
- The link to the image. The visual in the image needs to be related to the content of the `support` type card. Image should be of ratio `16 / 9`.
- Type
string
alt
- Property
alt
- Description
- The alternate text of the image and needs to be related to the visual content in the image.
- Type
string
- Default
background
- Property
background
- Type
boolean
type
- Property
type
- Description
- The type of the card.
- Type
string
- Options
section
support
flat
- Default
section
Slots
Slot | Permitted tags | Description |
---|---|---|
heading | <h2> <h3> | The heading of the card related to its content. Heading level depends on its place in the semantics of the page. |
paragraph | <p> | The content of the card. |
cta | <ns-cta> <a> | The interactive content for the `section` type card. |
action | <ns-cta> <a> <ns-form> | The interactive content for the `support` and `flat` type cards. |
Specification notes
<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.
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.
Last updated: