Cards
The card block is often used in grid layouts. Cards can be wrapped in link elements so they are clickable.
Horizontal
The default layout for cards is horizontal. Typically, there is an image in the left column and text in the right. Landscape images will automatically be detected and rendered in this style.
Gray
Spectrum uses 11 tints and shades of gray per color theme. These grays are neutral (fully desaturated), which means that they can work alongside any other colors in the interface.
Vertical
When authoring vertical cards, content is in a single column. Auto-detection is used to orient the card container vertically if the image is in the portrait orientation.
Gray
Spectrum uses 11 tints and shades of gray per color theme. These grays are neutral (fully desaturated), which means that they can work alongside any other colors in the interface.
The vertical class modifier can be used in the metadata of the card block for force horizontal/landscape images to the stacked layout, as seen in the example below.
Gray
Spectrum uses 11 tints and shades of gray per color theme. These grays are neutral (fully desaturated), which means that they can work alongside any other colors in the interface.
Clickable cards
Providing a link in the content of a card block will make the entire card clickable.
External links
When authoring a new card that contains a link to an external source ("link out"), provide the link as the last paragraph of your content. The link text you provide will set the screen reader text for assistive technology. The link out icon will appear in the right-hand corner.
Screen readers & assistive technology
When rendering an alert that is dismissable or has actions on a page, ensure the alert is placed in a container with a role of region that includes a unique aria-label or aria-labelledby for better accessibility.
Gray
Spectrum uses 11 tints and shades of gray per color theme. These grays are neutral (fully desaturated), which means that they can work alongside any other colors in the interface.
Internal links
When authoring a new card that contains a link to an internal source, provide the link as the last paragraph of your content. The link text you provide will set the screen reader text for assistive technology. No link out icon will render.
Accessibility
Although there might be more content here, clickable cards will be announced by a screen reader by their accessible labels (the link text you provide) only.
Minimal
Cards support minimal text content, most often just a heading or title.
Rational
Rational
Text-only
Author your content in a single column using the rich text editor.
Fundamentals
Spectrum 2 (S2) evolved around the need to bridge the gap between purely professional tools and more consumer-orientated applications, creating updates that prioritize more approachability, a clearer sense of attention hierarchy, and a stronger connection to product branding. Illustrations are a major part of how Spectrum 2 creates such experiences.
Two-column grid
Cards can be laid out in a two-column grid. Add a section break to the content document, alongside the section-metadata block. In section-metadata, specify "grid" as 2 to indicate a 2-column grid.
Adding the following classes to the section-metadata block will define the gaps between grid items:
gap-xsgap-sgap-mgap-lgap-xlgap-xxl
Additionally, authors can specify the spacing above and below the grid layout with the following classes:
spacing-xsspacing-sspacing-mspacing-lspacing-xlspacing-xxl
In this example, default, horizontal cards are used, with "gap" defined as "xl" to set the space between the cards, and "spacing" defined as "xxl" to set the padding above and below the grid itself.
Gray
Spectrum uses 11 tints and shades of gray per color theme. These grays are neutral (fully desaturated), which means that they can work alongside any other colors in the interface.
Screen readers & assistive technology
When rendering an alert that is dismissable or has actions on a page, ensure the alert is placed in a container with a role of region that includes a unique aria-label or aria-labelledby for better accessibility.
WCAG requirements
When standard controls from accessible technologies are used, this process is straightforward. If the user interface elements are used according to specification the conditions of this provision will be met. (See examples of Success Criterion 4.1.2 Name, Role, Value below)
Code standards
This section covers the coding conventions and authoring patterns used across Spectrum Web Components. Following these guides keeps the codebase consistent, reviewable, and accessible.
Fundamentals
Spectrum 2 (S2) evolved around the need to bridge the gap between purely professional tools and more consumer-orientated applications, creating updates that prioritize more approachability, a clearer sense of attention hierarchy, and a stronger connection to product branding. Illustrations are a major part of how Spectrum 2 creates such experiences.
Three-column grid
Cards can be laid out in a three-column grid. Add a section break to the content document, alongside the section-metadata block. In section-metadata, specify "grid" as 3 to indicate a 3-column grid.
For this example, the text-only cards are using with just a title and description, "gap" is defined as "xl" to set the space between the cards, and "spacing" defined as "xxl" to set the padding above and below the grid itself.
Gray
Spectrum uses 11 tints and shades of gray per color theme. These grays are neutral (fully desaturated), which means that they can work alongside any other colors in the interface.
Screen readers & assistive technology
When rendering an alert that is dismissable or has actions on a page, ensure the alert is placed in a container with a role of region that includes a unique aria-label or aria-labelledby for better accessibility.
WCAG requirements
When standard controls from accessible technologies are used, this process is straightforward. If the user interface elements are used according to specification the conditions of this provision will be met. (See examples of Success Criterion 4.1.2 Name, Role, Value below)
Code standards
This section covers the coding conventions and authoring patterns used across Spectrum Web Components. Following these guides keeps the codebase consistent, reviewable, and accessible.
Fundamentals
Spectrum 2 (S2) evolved around the need to bridge the gap between purely professional tools and more consumer-orientated applications, creating updates that prioritize more approachability, a clearer sense of attention hierarchy, and a stronger connection to product branding. Illustrations are a major part of how Spectrum 2 creates such experiences.
Four-column grid
Cards can be laid out in a four-column grid. Add a section break to the content document, alongside the section-metadata block. In section-metadata, specify "grid" as 4 to indicate a 4-column grid.
For four-column grids, author cards in the vertical orientation, using the vertical modifier class and a single column. In this example, minimal, vertical cards are used with an image and title, with "gap" defined as "xl" to set the space between the cards, and "spacing" defined as "xxl" to set the padding above and below the grid itself.
Rational
Internationalization
Motion
Accessibility
Typography
Screen readers & assistive technology
Grays
Fundamentals