List sections are a common UI pattern that we use to display a list of items with descriptions and images. It can be used as navigation to deeper content pages or as a more detailed list.
Name Description
slot[name=""] The default slot for list-section-item elements
slot[name="edit-description"] A slot for handling inline editing of the description attribute, if the attribute is present this will not be shown
slot[name="edit-header"] A slot for handling inline editing of the header attribute, if the attribute is present this will not be shown
::part(base) The base div element
::part(header) The suite-text element for the header
List-Section Example
Example Button Link 1 Link 2 Learn more about transfer requirements Learn more about part-time study Learn more about international requirements
Placeholder.
Name Description
slot[name="edit-description"] A slot for handling inline editing of the description attribute, if the attribute is present this will not be shown
slot[name="edit-header"] A slot for handling inline editing of the header attribute, if the attribute is present this will not be shown
slot[name="first-link"] The slot for the first link on a list-section-item
slot[name="media"] The slot for the image or video on a list-section-item
slot[name="second-link"] The slot for the second link on a list-section-item
::part(base) The base suite-flex element
::part(content) The wrapper around the header, description, and cta-wrapper
::part(cta-separator) The separator element that is between the first-link and second-link slots
::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(media) The wrapper around the media slot