Card section
Examples
Titled
Actions
Destructive actions
Subdued
Importing
Slots
Properties
CSS Parts
Dependencies

Card Section

<ahi-card-section> | AhiCardSection

Card sections are used when you have multiple related but distinct pieces of information to communicate to users. Multiple sections can help break up complicated concepts to make them easier to scan and understand.

View a summary of your patient’s history

View a summary of your patient’s history, including encounters, medications, diagnoses, and procedures.

<ahi-card title="Patient dashboard">
  <ahi-card-section>
    View a summary of your patient's history
  </ahi-card-section>
  <ahi-card-section>
    View a summary of your patient's history, including encounters, medications,
    diagnoses, and procedures.
  </ahi-card-section>
</ahi-card>

Examples

Titled

Use when you have two related but distinct pieces of information to communicate to users that are complex enough to require a title to introduce them.

View a summary of your patient’s history

View a summary of your patient’s history, including encounters, medications, diagnoses, and procedures.

<ahi-card title="Patient dashboard">
  <ahi-card-section title="Reports">
    View a summary of your patient's history
  </ahi-card-section>
  <ahi-card-section title="Summary">
    View a summary of your patient's history, including encounters, medications, diagnoses, and procedures.
  </ahi-card-section>
</ahi-card>

Actions

Use when your card section has actions that apply only to that section.

John Smith

Edit john.smith@example.com

<ahi-card title="Patient">
  <ahi-card-section>John Smith</ahi-card-section>
  <ahi-card-section title="Contact Information">
    <ahi-button slot="actions" plain>Edit</ahi-button>
    john.smith@example.com
  </ahi-card-section>
</ahi-card>

Destructive actions

Use when a card action applies only to one section and will delete data or be otherwise difficult to recover from.

John Smith

Delete

Edit john.smith@example.com

<ahi-card title="Patient">
  <ahi-card-section>John Smith</ahi-card-section>
  <ahi-card-section title="Contact Information">
    <ahi-button slot="actions" variant="destructive" plain>Delete</ahi-button>
    <ahi-button slot="actions" plain>Edit</ahi-button>
    john.smith@example.com
  </ahi-card-section>
</ahi-card>

Subdued

Use to indicate when one of the sections in your card contains inactive or disabled content.

Ron Shaw
Lionel Jordan

Doyle Montgomery
George Cross

<ahi-card title="Contacts">
  <ahi-card-section>
    <ul>
      <li>Ron Shaw</li>
      <li>Lionel Jordan</li>
    </ul>
  </ahi-card-section>
  <ahi-card-section title="Deactivated Contacts" subdued>
    <ul>
      <li>Doyle Montgomery</li>
      <li>George Cross</li>
    </ul>
  </ahi-card-section>
</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-section/card-section.js"></script>

To import this component using a bundler:

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

Slots

Name	Description
(default)	The card sections’s content.
`actions`	Card section actions.

Learn more about using slots.

Properties

Name	Description	Type	Default
`subdued`	Draw a less prominent card section.	`boolean`	`false`
`title`	The card section’s title.	`string`	`''`
`icon`	The name of an icon to display to the left of the title.	`string`	`''`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

CSS Parts

Name	Description
`base`	Deprecated. Use the `card-section` part instead.
`card-section`	The component’s outer wrapper.
`title`	The title’s container.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<ahi-icon>