Card

Surface that groups related content and actions.

Show design guidelines

Code

Framework

HTML

React

Angular

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Toggle dark mode

<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</certara-card>

import { CertaraCard } from '@certara/certara-ui-react';

<CertaraCard headline="Card title" subtitle="This is a subtitle" width="370px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</CertaraCard>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</certara-card>

Header slot

Header Component Badge Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Toggle dark mode

<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  <certara-card-header slot="header">
    <certara-hexagon class="bg-brand icon-brand">
      <certara-icon name="file-import" variant="light" size="24"></certara-icon>
    </certara-hexagon>
    <span class="text-tertiary ml-4">Header Component</span>
    <certara-badge variant="warning">Badge</certara-badge>
  </certara-card-header>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</certara-card>

import { CertaraBadge, CertaraCard, CertaraCardHeader, CertaraHexagon, CertaraIcon } from '@certara/certara-ui-react';

<CertaraCard headline="Card title" subtitle="This is a subtitle" width="370px">
  <CertaraCardHeader slot="header">
    <CertaraHexagon className="bg-brand icon-brand">
      <CertaraIcon name="file-import" variant="light" size={24} />
    </CertaraHexagon>
    <span className="text-tertiary ml-4">Header Component</span>
    <CertaraBadge variant="warning">Badge</CertaraBadge>
  </CertaraCardHeader>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</CertaraCard>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  <certara-card-header slot="header">
    <certara-hexagon class="bg-brand icon-brand">
      <certara-icon name="file-import" variant="light" size="24"></certara-icon>
    </certara-hexagon>
    <span class="text-tertiary ml-4">Header Component</span>
    <certara-badge variant="warning">Badge</certara-badge>
  </certara-card-header>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</certara-card>

Footer slot

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Primary Secondary

Toggle dark mode

<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <certara-card-footer slot="footer">
    <certara-button color="brand" class="mr-3">Primary</certara-button>
    <certara-button color="secondary">Secondary</certara-button>
  </certara-card-footer>
</certara-card>

import { CertaraButton, CertaraCard, CertaraCardFooter } from '@certara/certara-ui-react';

<CertaraCard headline="Card title" subtitle="This is a subtitle" width="370px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <CertaraCardFooter slot="footer">
    <CertaraButton color="brand" className="mr-3">Primary</CertaraButton>
    <CertaraButton color="secondary">Secondary</CertaraButton>
  </CertaraCardFooter>
</CertaraCard>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <certara-card-footer slot="footer">
    <certara-button color="brand" class="mr-3">Primary</certara-button>
    <certara-button color="secondary">Secondary</certara-button>
  </certara-card-footer>
</certara-card>

Top image slot

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Toggle dark mode

<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  <certara-card-image slot="image-top" placement="top" image-src="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
  </certara-card-image>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</certara-card>

import { CertaraCard, CertaraCardImage } from '@certara/certara-ui-react';

<CertaraCard headline="Card title" subtitle="This is a subtitle" width="370px">
  <CertaraCardImage slot="image-top" placement="top" imageSrc="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
  </CertaraCardImage>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</CertaraCard>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  <certara-card-image slot="image-top" placement="top" image-src="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
  </certara-card-image>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</certara-card>

Bottom image slot

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Toggle dark mode

<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  <certara-card-image slot="image-bottom" placement="bottom" image-src="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
  </certara-card-image>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</certara-card>

import { CertaraCard, CertaraCardImage } from '@certara/certara-ui-react';

<CertaraCard headline="Card title" subtitle="This is a subtitle" width="370px">
  <CertaraCardImage slot="image-bottom" placement="bottom" imageSrc="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
  </CertaraCardImage>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</CertaraCard>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card headline="Card title" subtitle="This is a subtitle" width="370px">
  <certara-card-image slot="image-bottom" placement="bottom" image-src="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
  </certara-card-image>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</certara-card>

XS

Last 90 days

Body text

Toggle dark mode

<certara-card size="xs" width="125px">
  <div class="text-tertiary text-xs">Last 90 days</div>
  Body text
</certara-card>

import { CertaraCard } from '@certara/certara-ui-react';

<CertaraCard size="xs" width="125px">
  <div className="text-tertiary text-xs">Last 90 days</div>
  Body text
</CertaraCard>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card size="xs" width="125px">
  <div class="text-tertiary text-xs">Last 90 days</div>
  Body text
</certara-card>

certara-card

Surface that groups related content and actions.

Properties

bodyClassName

Attribute	body-class-name
Type	string
Default	undefined
Required	false
Description	Adds optional classes to the card body, for instance to zero out padding “pb-0” when there’s a footer that already has padding.

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description	Optional title of the card, appended as the first item in the card body.

href

Attribute	href
Type	string
Default	undefined
Required	false
Description	Links the entire card if present, using the stretched link utility class.

size

Attribute	size
Type	"default" | "xs"
Default	'default'
Required	false
Description	A size of ‘small” creates a mini-card, with tighter padding.

subtitle

Attribute	subtitle
Type	string
Default	undefined
Required	false
Description	Optional subtitle of the card, appended to the card body under the title in smaller, gray text.

target

Attribute	target
Type	"_blank" | "_parent" | "_self" | "_top" | "_unfencedTop"
Default	undefined
Required	false
Description	If href is present, this sets the target of the link.

width

Attribute	width
Type	string
Default	undefined
Required	false
Description	Optional width of the card. Accepts a value of 30rem, 370px, or any valid CSS size value.

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	Main slot for card content
footer	Slot for custom footer content. Should use <certara-card-footer>.
header	Slot for custom header content. Should use <certara-card-header>.
image-bottom	Slot for an image that appears at the bottom of the card. Should use <certara-card-image placement="bottom">.
image-top	Slot for an image that appears at the top of the card. Should use <certara-card-image placement="top">.

certara-card-header

Header region of a .

With icon

Header Component

Toggle dark mode

<certara-card-header slot="header">
  <certara-hexagon class="bg-brand icon-brand">
    <certara-icon name="file-import" variant="light" size="24"></certara-icon>
  </certara-hexagon>
  <span class="text-tertiary ml-4">Header Component</span>
</certara-card-header>

import { CertaraCardHeader, CertaraHexagon, CertaraIcon } from '@certara/certara-ui-react';

<CertaraCardHeader slot="header">
  <CertaraHexagon className="bg-brand icon-brand">
    <CertaraIcon name="file-import" variant="light" size={24} />
  </CertaraHexagon>
  <span className="text-tertiary ml-4">Header Component</span>
</CertaraCardHeader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card-header slot="header">
  <certara-hexagon class="bg-brand icon-brand">
    <certara-icon name="file-import" variant="light" size="24"></certara-icon>
  </certara-hexagon>
  <span class="text-tertiary ml-4">Header Component</span>
</certara-card-header>

With badge

Header Component Badge

Toggle dark mode

<certara-card-header slot="header">
  <span class="text-tertiary ml-4">Header Component</span>
  <certara-badge variant="warning">Badge</certara-badge>
</certara-card-header>

import { CertaraBadge, CertaraCardHeader } from '@certara/certara-ui-react';

<CertaraCardHeader slot="header">
  <span className="text-tertiary ml-4">Header Component</span>
  <CertaraBadge variant="warning">Badge</CertaraBadge>
</CertaraCardHeader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card-header slot="header">
  <span class="text-tertiary ml-4">Header Component</span>
  <certara-badge variant="warning">Badge</certara-badge>
</certara-card-header>

With className

Header Component

Toggle dark mode

<certara-card-header class="justify-content-end" slot="header">
  <span class="text-tertiary ml-4">Header Component</span>
</certara-card-header>

import { CertaraCardHeader } from '@certara/certara-ui-react';

<CertaraCardHeader className="justify-content-end" slot="header">
  <span className="text-tertiary ml-4">Header Component</span>
</CertaraCardHeader>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card-header class="justify-content-end" slot="header">
  <span class="text-tertiary ml-4">Header Component</span>
</certara-card-header>

Properties

There are no public properties available for this component

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	Main slot for custom header content

certara-card-footer

Footer region of a .

Default

Primary Secondary

Toggle dark mode

<certara-card-footer slot="footer">
  <certara-button color="brand" class="mr-3">Primary</certara-button>
  <certara-button color="secondary">Secondary</certara-button>
</certara-card-footer>

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

<CertaraCardFooter slot="footer">
  <CertaraButton color="brand" className="mr-3">Primary</CertaraButton>
  <CertaraButton color="secondary">Secondary</CertaraButton>
</CertaraCardFooter>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card-footer slot="footer">
  <certara-button color="brand" class="mr-3">Primary</certara-button>
  <certara-button color="secondary">Secondary</certara-button>
</certara-card-footer>

With className

Primary Secondary

Toggle dark mode

<certara-card-footer class="text-right" slot="footer">
  <certara-button color="brand" class="mr-3">Primary</certara-button>
  <certara-button color="secondary">Secondary</certara-button>
</certara-card-footer>

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

<CertaraCardFooter className="text-right" slot="footer">
  <CertaraButton color="brand" className="mr-3">Primary</CertaraButton>
  <CertaraButton color="secondary">Secondary</CertaraButton>
</CertaraCardFooter>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card-footer class="text-right" slot="footer">
  <certara-button color="brand" class="mr-3">Primary</certara-button>
  <certara-button color="secondary">Secondary</certara-button>
</certara-card-footer>

Properties

There are no public properties available for this component

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	Main slot for custom footer content

certara-card-image

Image region of a , placed above or below the card body.

Top placement

Toggle dark mode

<certara-card-image slot="image-top" placement="top" image-src="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
</certara-card-image>

import { CertaraCardImage } from '@certara/certara-ui-react';

<CertaraCardImage slot="image-top" placement="top" imageSrc="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
</CertaraCardImage>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card-image slot="image-top" placement="top" image-src="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
</certara-card-image>

Bottom placement

Toggle dark mode

<certara-card-image slot="image-bottom" placement="bottom" image-src="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
</certara-card-image>

import { CertaraCardImage } from '@certara/certara-ui-react';

<CertaraCardImage slot="image-bottom" placement="bottom" imageSrc="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
</CertaraCardImage>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-card-image slot="image-bottom" placement="bottom" image-src="/assets/img/empty-states/empty-inbox.svg" alt="Empty inbox">
</certara-card-image>

Properties

alt

Attribute	alt
Type	string
Default	''
Required	false
Description	The alt text for the image, used for accessibility.

imageSrc

Attribute	image-src
Type	string
Default	undefined
Required	false
Description	The source URL of the image to display in the card.

placement

Attribute	placement
Type	"bottom" | "top"
Default	undefined
Required	false
Description	The placement of the image within the card.

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