Card

Code

Framework

HTML

React

Angular

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

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

Badge

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

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

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

Primary

Secondary

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

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

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

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

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

Last 90 days

Body text

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

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
`header`	Slot for custom header content
`image-bottom`	Slot for an image that appears at the bottom of the card
`image-top`	Slot for an image that appears at the top of the card

certara-card-header

Header Component

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

Header Component

Badge

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>

Header Component

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

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

Primary

Secondary

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>

Primary

Secondary

<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

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

Top placement
Bottom placement

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>

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