Overview

Membership card can be used to contain content related to membership in a consistent and structured way.

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

The snowflake nss-membership-card is specific to the ‘membership wallet’. It utilises the membership styling and colour scheme that sets it apart from ns-card.

Examples

Standard

Membership scheme

Configure

Navy scheme

Configure

Guidance

Do

• Use specifically for membership.
• Use both membership and navy schemes to provide visual variety.
• Carefully consider content and how it will display across different viewports.

Don't

• Use excessively long content.
• Add lists <ul> <ol> due to the centred content.
• Try to use additional colours that are not part of the membership scheming.
• Repetitively use images on adjacent cards as it harms the recognition factor.

Standard

Key

Key	Field type	Guidelines
A	Image	Use an image size of 640 x 360px. Images should be WebP file type, the file size should be no more than 25kb.
B	Heading	The recommended length is between 4 and 12 words, not exceeding 50 characters in total.
C	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>. Add a caveat link if required.
D	CTA	Keep the text short, relevant, and actionable. It should not exceed 24 characters.

Considerations

Placement

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

• <ns-panel>
• <ns-column>

Specification

Attributes

scheme

Property

scheme

Description

The scheme of the membership card.

Type

string

Options

membership navy

Default

membership

image

Property

image

Description

The URL of the image to display on the card. Image ratio should be `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

type

Property

type

Description

The type of the membership card.

Type

standard

Default

standard

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 call to action content for the membership card.
action	<ns-cta> <a> <ns-form>	The action content of the membership card.

Figma

The Figma UI Kit only reflects reusable components in the system. This particular component is a unique 'snowflake' and therefore only has a single use case so far. In order to re-use nss-membership-card, please raise an RFC to move it from snowflake to Nucleus component library.