List Item

Show design guidelines

Code

Framework HTML React Angular

Default

List item 1 List item 2 List item 3 List item 4

Toggle dark mode

<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>

With icon

Document.pdf Projects folder Image.png

Toggle dark mode

<certara-list>
  <certara-list-item icon="file">Document.pdf</certara-list-item>
  <certara-list-item icon="folder">Projects folder</certara-list-item>
  <certara-list-item icon="image">Image.png</certara-list-item>
</certara-list>

import { CertaraList, CertaraListItem } from '@certara/certara-ui-react';

<CertaraList>
  <CertaraListItem icon="file">Document.pdf</CertaraListItem>
  <CertaraListItem icon="folder">Projects folder</CertaraListItem>
  <CertaraListItem icon="image">Image.png</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 icon="file">Document.pdf</certara-list-item>
  <certara-list-item icon="folder">Projects folder</certara-list-item>
  <certara-list-item icon="image">Image.png</certara-list-item>
</certara-list>

With headline

Toggle dark mode

<certara-list>
  <certara-list-item headline="Primary headline" description="Secondary description text">
  </certara-list-item>
  <certara-list-item headline="Another headline" description="More description text">
  </certara-list-item>
</certara-list>

import { CertaraList, CertaraListItem } from '@certara/certara-ui-react';

<CertaraList>
  <CertaraListItem headline="Primary headline" description="Secondary description text">
  </CertaraListItem>
  <CertaraListItem headline="Another headline" description="More description text">
  </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 headline="Primary headline" description="Secondary description text">
  </certara-list-item>
  <certara-list-item headline="Another headline" description="More description text">
  </certara-list-item>
</certara-list>

Full example

Edit

Edit

Toggle dark mode

<certara-list>
  <certara-list-item icon="user" icon-color="brand" headline="John Doe" description="Software Engineer" fineprint="Last active: 2 hours ago">
    <div slot="right-content">
      <certara-button size="sm" variant="outline">Edit</certara-button>
    </div>
  </certara-list-item>
  <certara-list-item icon="user" icon-color="success" headline="Jane Smith" description="Product Manager" fineprint="Last active: 5 mins ago">
    <div slot="right-content">
      <certara-button size="sm" variant="outline">Edit</certara-button>
    </div>
  </certara-list-item>
</certara-list>

import { CertaraButton, CertaraList, CertaraListItem } from '@certara/certara-ui-react';

<CertaraList>
  <CertaraListItem icon="user" iconColor="brand" headline="John Doe" description="Software Engineer" fineprint="Last active: 2 hours ago">
    <div slot="right-content">
      <CertaraButton size="sm" variant="outline">Edit</CertaraButton>
    </div>
  </CertaraListItem>
  <CertaraListItem icon="user" iconColor="success" headline="Jane Smith" description="Product Manager" fineprint="Last active: 5 mins ago">
    <div slot="right-content">
      <CertaraButton size="sm" variant="outline">Edit</CertaraButton>
    </div>
  </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 icon="user" icon-color="brand" headline="John Doe" description="Software Engineer" fineprint="Last active: 2 hours ago">
    <div slot="right-content">
      <certara-button size="sm" variant="outline">Edit</certara-button>
    </div>
  </certara-list-item>
  <certara-list-item icon="user" icon-color="success" headline="Jane Smith" description="Product Manager" fineprint="Last active: 5 mins ago">
    <div slot="right-content">
      <certara-button size="sm" variant="outline">Edit</certara-button>
    </div>
  </certara-list-item>
</certara-list>

certara-list

Properties

listType

Attribute	list-type
Type	"bulleted" | "default" | "numbered" | "unstyled"
Default	'default'
Required	false
Description

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

There are no slots available for this component

certara-list-item

The <certara-list-item> component features props with equivalent slots if there is a need for more complex content beyond simple strings

Properties

alignItems

Attribute	align-items
Type	"baseline" | "center" | "end" | "start" | "stretch"
Default	undefined
Required	false
Description

description

Attribute	description
Type	string
Default	undefined
Required	false
Description

fineprint

Attribute	fineprint
Type	string
Default	undefined
Required	false
Description

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description

icon

Attribute	icon
Type	string
Default	undefined
Required	false
Description

iconColor

Attribute	icon-color
Type	"accent-orange" | "brand" | "danger" | "info" | "inverse" | "neutral" | "neutral-subtle" | "neutral-subtler" | "success" | "warning"
Default	undefined
Required	false
Description

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	Default list content
description	Slot for descriptive text
fineprint	Slot for small text below description
headline	Slot for title content
icon	Slot for left-aligned icon
right-content	Right-aligned content area for buttons and additional actions