Card

Design guidelines

Cards are used to group similar concepts and tasks together for users to scan, read, and get things done. It displays content in a familiar and recognizable style.

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 icon="file-import" variant="light" size="24"></certara-icon>
    </certara-hexagon>
    <span class="text-tertiary ml-4">Header Component</span>
    <certara-badge color="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 icon="file-import" variant="light" size={24} />
    </CertaraHexagon>
    <span className="text-tertiary ml-4">Header Component</span>
    <CertaraBadge color="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 icon="file-import" variant="light" size="24"></certara-icon>
    </certara-hexagon>
    <span class="text-tertiary ml-4">Header Component</span>
    <certara-badge color="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" 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" src="/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" 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

Cards are used to group similar concepts and tasks together for users to scan, read, and get things done. It displays content in a familiar and recognizable style.

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-top	Slot for an image that appears at the top of the card. Should use <certara-card-image slot="image-top">.

certara-card-header

Header region of a <certara-card>.

With icon

Header Component

Toggle dark mode

<certara-card-header slot="header">
  <certara-hexagon class="bg-brand icon-brand">
    <certara-icon icon="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 icon="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 icon="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 color="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 color="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 color="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 <certara-card>.

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 <certara-card>, placed above or below the card body.

Top placement

Toggle dark mode

<certara-card-image slot="image-top" 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" src="/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" 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. DEPRECATED. Use src instead. Will be removed in the next major version.

placement

Attribute	placement
Type	"bottom" | "top"
Default	undefined
Required	false
Description	The placement of the image within the card. DEPRECATED. Position comes from the slot. Use slot="image-top" instead. Will be removed in the next major version.

src

Attribute	src
Type	string
Default	undefined
Required	false
Description	The source URL of the image to display in 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

Cards are used to group similar concepts and tasks together for users to scan, read, and get things done. It displays content in a familiar and recognizable style.

Design guidelines

Default

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

Toggle dark mode

XS

Last 90 days

Body text

Toggle dark mode

Best practices

• Group related information
• Display information in a way that prioritizes what the user needs to know most first
• Use headings that set clear expectations about the card’s purpose
• Stick to single user flows or break more complicated flows into multiple sections
• Avoid more than 2 call-to-action buttons or links and only one primary call to action per card
• Use calls to action on the bottom of the card for next steps and use the space in the upper right corner of the card for persistent, optional callouts (such as Time saver)

Accessibility

Screen reader support

Use semantic HTML to provide more context to screen readers and bots. For example, use <header> HTML tag for card headers, <footer> HTML tag for card footers, and wrap the card in an <article> or <section> HTML tag.

Design resources

View component in Figma