Card Development

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>

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>

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>

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>

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>

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>

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

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>

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>

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>

Properties

class

Attribute	class
Type	string
Default	undefined
Required	false
Description	Additional class names to apply to the internal card header.

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

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>

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>

Properties

class

Attribute	class
Type	string
Default	undefined
Required	false
Description	Additional class names to apply to the internal card footer.

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

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>

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>

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

Legacy

Legacy components are not recommended for use in new projects.

Default

header content Badge

Card title

Card Subheader

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

Primary Secondary

Toggle dark mode

<article class="card" style="width:370px">
  <header class="card-header d-flex align-items-center text-tertiary">
    <img src="/assets/img/card-hex.png" width="57" class="mr-4" class="card-header__icon"  />
    header content
    <span class="badge badge--warning">Badge</span>
  </header>
  <div class="card__body py-0">
    <h3 class="card__title">Card title</h3>
    <p class="card__subtitle">Card Subheader</p>
    <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <footer class="card__footer">
    <button class="btn btn--brand mr-3">Primary</button>
    <button class="btn btn--secondary">Secondary</button>
  </footer>
</article>

XS

This reduces the x/y padding of the Card.

Last 90 days Body text

Toggle dark mode

<div class="card card--xs" style="width:125px">
  <div class="card-body">
    <span class="text-tertiary text-xs d-block">Last 90 days</span>
    Body text
  </div>
</div>