Card

Code

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>

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>

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>

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>

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>

Last 90 days

Body text

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>

Header Component

Badge

Header Component

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

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>

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

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