Card
Examples
Header actions
Footer actions
Importing
Slots
Properties
Custom Properties
CSS Parts

Card

<ahi-card> | AhiCard

Cards are shadowed surfaces used to group similar concepts and tasks together.

The default card is used when you have a simple message to communicate to users that doesn’t require any secondary steps.

View a summary of your patient’s history.

<ahi-card title="Patient dashboard">
  <ahi-card-section> View a summary of your patient's history. </ahi-card-section>
</ahi-card>

Examples

Header actions

Use for less important card actions, or actions users may do before reviewing the contents of the card.

Add organization

Add organizations if this network has multiple locations, like a clinic or hospital.

<ahi-card title="Organizations">
  <ahi-button slot="header-actions" plain>Add organization</ahi-button>
  <ahi-card-section>
    Add organizations if this network has multiple locations, like a clinic or hospital.
  </ahi-card-section>
</ahi-card>

Use footer actions for a card’s most important actions, or actions users should do after reviewing the contents of the card.

Footer actions align to the end, so order them tertiary, secondary, primary: the most important action sits at the card’s edge. With footer-actions-alignment="left", put it first instead. See Order of actions.

Two-step authentication adds an extra layer of security when logging in to your account. A special code will be required each time you log in, ensuring only you can access your account.

Learn more

Enable two-step authentication

<ahi-card title="Secure your account with 2-step authentication">
  <ahi-card-section>
    Two-step authentication adds an extra layer of security when logging in to your account. A special code will be
    required each time you log in, ensuring only you can access your account.
  </ahi-card-section>
  <ahi-button slot="footer-actions" plain>Learn more</ahi-button>
  <ahi-button slot="footer-actions"> Enable two-step authentication </ahi-button>
</ahi-card>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/card/card.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/card/card.js';

Slots

Name	Description
(default)	The card’s content.
`header`	The card’s header content. Takes precedence over the title property for full customization.
`header-actions`	Card’s header actions.
`footer-actions`	Card’s footer actions.

Learn more about using slots.

Properties

Name	Description	Type	Default
`footerActionsAlignment` `footer-actions-alignment`	Alignment of the footer actions on the card, defaults to right	`'left' \| 'right'`	`'right'`
`title`	The card header’s title. If you need to display HTML, use the `header` slot instead. Note: The `header` slot takes precedence over this title property.	`string`	`''`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

Custom Properties

Name	Description	Default
`--radius`	The border radius of the card.	var(–ahi-border-radius-medium)

Learn more about customizing CSS custom properties.

CSS Parts

Name	Description
`base`	Deprecated. Use the `card` part instead.
`card`	The component’s outer wrapper.
`header`	The card’s header.
`title`	The card’s title.
`header-actions`	The card’s header actions.
`footer-actions`	The card’s footer actions.

Learn more about customizing CSS parts.