Skip to content

List Item

Show design guidelines

HTML React Angular
List item 1 List item 2 List item 3 List item 4
<certara-list>
<certara-list-item>List item 1</certara-list-item>
<certara-list-item>List item 2</certara-list-item>
<certara-list-item>List item 3</certara-list-item>
<certara-list-item>List item 4</certara-list-item>
</certara-list>
import { CertaraList, CertaraListItem } from '@certara/certara-ui-react';
<CertaraList>
<CertaraListItem>List item 1</CertaraListItem>
<CertaraListItem>List item 2</CertaraListItem>
<CertaraListItem>List item 3</CertaraListItem>
<CertaraListItem>List item 4</CertaraListItem>
</CertaraList>
// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';
@NgModule({
imports: [CertaraUiAngularModule]
})
// In your template:
<certara-list>
<certara-list-item>List item 1</certara-list-item>
<certara-list-item>List item 2</certara-list-item>
<certara-list-item>List item 3</certara-list-item>
<certara-list-item>List item 4</certara-list-item>
</certara-list>

listType

Attributelist-type
Type"bulleted" | "default" | "numbered" | "unstyled"
Default'default'
Requiredfalse
Description

There are no events available for this component

There are no public methods available for this component

There are no slots available for this component

The component features props with equivalent slots if there is a need for more complex content beyond simple strings

alignItems

Attributealign-items
Type"baseline" | "center" | "end" | "start" | "stretch"
Defaultundefined
Requiredfalse
Description

description

Attributedescription
Typestring
Defaultundefined
Requiredfalse
Description

fineprint

Attributefineprint
Typestring
Defaultundefined
Requiredfalse
Description

headline

Attributeheadline
Typestring
Defaultundefined
Requiredfalse
Description

icon

Attributeicon
Typestring
Defaultundefined
Requiredfalse
Description

iconColor

Attributeicon-color
Type"accent-orange" | "brand" | "danger" | "info" | "inverse" | "neutral" | "neutral-subtle" | "neutral-subtler" | "success" | "warning"
Defaultundefined
Requiredfalse
Description

There are no events available for this component

There are no public methods available for this component

NameDescription
Default list content
descriptionSlot for descriptive text
fineprintSlot for small text below description
headlineSlot for title content
iconSlot for left-aligned icon
right-contentRight-aligned content area for buttons and additional actions