List item

Design guidelines

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.

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>

Bulleted

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

Toggle dark mode

<certara-list list-type="bulleted">
  <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 listType="bulleted">
  <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 list-type="bulleted">
  <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>

Numbered

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

Toggle dark mode

<certara-list list-type="numbered">
  <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 listType="numbered">
  <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 list-type="numbered">
  <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>

Unstyled

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

Toggle dark mode

<certara-list list-type="unstyled">
  <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 listType="unstyled">
  <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 list-type="unstyled">
  <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>

certara-list

Properties

listType

Attribute	list-type
Type	"bulleted" | "default" | "numbered" | "unstyled"
Default	'default'
Required	false
Description	Style of bullet decoration for list items

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	Default slot for <certara-list-item> children

certara-list-item

With icon

Document.pdf Projects folder Image.png

Toggle dark mode

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

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

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

This example uses the right-content slot and props for headline, description, fineprint, align-items, icon, and icon-color

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" align-items="baseline">
    <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" align-items="baseline">
    <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" alignItems="baseline">
    <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" alignItems="baseline">
    <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" align-items="baseline">
    <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" align-items="baseline">
    <div slot="right-content">
      <certara-button size="sm" variant="outline">Edit</certara-button>
    </div>
  </certara-list-item>
</certara-list>

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	Vertical alignment of icon to text

description

Attribute	description
Type	string
Default	undefined
Required	false
Description	Formatted description block below title

fineprint

Attribute	fineprint
Type	string
Default	undefined
Required	false
Description	Formatted small text below description

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description	Formatted title for list item

icon

Attribute	icon
Type	string
Default	undefined
Required	false
Description	Name of icon. List of available Font Awesome icons

iconColor

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

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

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.

Design guidelines

Simple example

• List item
• List item
• List item
• List item

Toggle dark mode

Full example

Edit

Edit

Toggle dark mode

Design resources

View component in Figma