List

List Items are versatile components that can be used to represent objects or users in the system. They can be displayed in a collection or stand alone as needed. All list items are wrapped within certara-list and each item is a certara-list-item.

List items

The default certara-list-item has opinions about spacing and separators along with a variety of optional props and their equivalent slots for headline, description, icon, fineprint, and right-content to create patterns with right-aligned buttons seen throughout apps.

first child With a link Title List item with complex layout Using named slots
Primary Secondary
Complex list item by prop Simple list item by prop Simple list item by prop with icon color default item last child

Simple lists

Simple lists use the list-type prop to choose between bulleted | numbered | unstyled.

with bullet with bullet with bullet ordered ordered ordered unstyled unstyled unstyled

With icons

Icons can be added to a certara-list-item using the icon and icon-color props. The icon slot is an alternative that can accommodate more complex markup. Vertical alignment is managed through the align-items prop which uses align-items-* CSS flexbox modifiers internally.

User Super User Super Duper User (using icon slot)