Cards (Content Groups)
one | two | three |
four | five | six |
seven | eight | nine |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | six |
seven | eight | nine |
Image here; | two | three |
![]() |
| six |
seven | eight | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ![]() ![]() |
Cards are used to solve the problem of content scannability and comparison. By placing related information within a bounded surface, cards help users quickly understand what belongs together and distinguish one item from another, especially in interfaces that display multiple pieces of content at once.
Use Cards when presenting summaries, previews, or collections of items—such as lists, dashboards, search results, or content grids—where users need to scan, compare, or choose between options. Avoid using cards for long-form or linear content; they are most effective when each card represents a single concept, item, or action.
A Card groups pieces of information into a single item and is normally accompanied by an image
This component would normally have a heading, summary and an image but is flexible enough to support some or all these items. These "structural" elements will have a specific brand identity and influence SEO and accessibility.

It also can just support free text when you don't want to add structural elements. Structural elements will always have a specific design identity attached while free text will just display as normal in the content flow.
Cards will adjust their layout according to the screen size unless layout restrictions are specifically applied.
Weights
Cards can be used with varying weights to highlight it's importance in the flow of information. Higher weighted items give more importance compared to the rest of the content on the page.
By default all Cards will have a no weight.
Card - no weight
The quick brown fox jumps over the lazy dog
Card - normal weight (default)
The quick brown fox jumps over the lazy dog
Card - light weight
The quick brown fox jumps over the lazy dog
Card - moderate weight
The quick brown fox jumps over the lazy dog
Card - high weight
The quick brown fox jumps over the lazy dog
Layout
Cards will automatically adjust to the available space to meet accessibility requirements. By default the content will be left aligned with the image aligned to the right (if an image is provided). If the container does not have enough space the Card will stack vertically.
Pro tip
If you only see cards vertically stacked, increase the size of your browser window. Left and Right alignment will only work when there is enough space (especially when using an image)
Card - left aligned
The quick brown fox jumps over the lazy dog

Card - center aligned
The quick brown fox jumps over the lazy dog

Card - right aligned
The quick brown fox jumps over the lazy dog

This component is currently in development

