The checkerboard component is good for representing a group of items that need an introduction and each item can have an image as well as calls to action. It can be used in place of a list-section or a card-section.
Name Description
slot[name=""] Place to add checkerboard items
slot["cta"] Location for optionally placing a call to action
::part(base) The native button element
::part(content) The wrapper for the header, description, and call to action
::part(cta-wrapper) The wrapper around the cta-slot
::part(description) The suite-text element for the description
::part(header) The suite-text element for the header
::part(items-wrapper) The wrapper around the default slot
Default Checkerboard
School of Education students standing and talking together.
This is a caption. With a link!
Link 1Link 2
Student presenting at symposium.
Optional Button
Inverted Checkerboard
School of Education students standing and talking together.
This is a caption. With a link!
Link 1Link 2
Student presenting at symposium.
Optional Button
 Used to populate the checkerboard component.
Name Description
slot[name="cta"] Location for placing calls to action
slot[name="media"] Location for placing an video or image
::part(base) The native article element
::part(content) The wrapper around the header, description, and calls to action
::part(cta-wrapper) The wrapper around the cta slot
::part(description) The suite-text description element
::part(header) The suite-text header element
::part(media) The wrapper for the media slot