Cards Section

Components

Cards / 2 Col / Basic / Text Only
Tagline

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Cards / 2 Col / Basic / Plus Link Centered
Tagline

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Cards / 2 Col / Basic / Text Only Centered
Cards / 2 Col / Box / text Only
Cards / 2 Col / Box / Plus Tagline
Cards / 2 Col / Box / Text Only Centered
Cards / 3 Col / Basic / Text Only
Tagline

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Cards / 3 Col / Basic / Plus Link Centered
Tagline

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Cards / 2 Col / Icon Horizontal

Best Practices

Use components to build interfaces. Search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E). Once you added a Component to your page unlink it to make changes. Right-click on the symbol’s label and choose unlink from symbol. This is the rule. We use overrides only as an exception for simple components that you'd rather want to re-style on the specific page within Style Guide (buttons, toggles etc. - mostly atoms).

Component Description

Cards are a flexible component used to display content and actions in a variety of contexts. They are generally restricted to a single topic and it should be easy for users to scan relevant and actionable information.

Video tutorials

Coming soon...

arrow_upward