Overview

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

Summarise it!

✨ This is an auto-generated AI summary of the ns-card's documentation. It may not be accurate. ✨

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

Standard

Configure

Section

To navigate users to the primary actions in the page.

Configure

Support

To provide additional or supporting information about the actions in the page.

Support

Configure

with image

Configure

with pill over image

To place the pill over the image using the pill-over-image attribute.

Configure

Flat

To group content and action that are part of the page.

Configure

Guidance

Do

• Use to direct customers to the actions.
• Embolden text in the paragraph that is important.
• Make the CTA (Call To Action) wording unique, stating the action.
• Use section cards to navigate users to primary actions.
• Consider adding a decoration to the panel to emphasise the cards.

Don't

• Mix different card types in a row.
• Have more than one CTA on a card.
• Repeat the CTA wording on each card.
• Use inline links in the paragraph.
• Use the section card without a decoration.
• Use in place of the <ns-product-card> component.

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:

• <ns-panel>
• <ns-column>
• <ns-footer>
• <nsx-footer>
• <ns-timeline-event>

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

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

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.