AisCard

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. They are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. They have no fixed width to start, so they'll naturally fill the full width of its parent element.

Header & Footer

Test Header

This is the body of the card.

Test Footer

No Footer

This is the body of the card.

No header or footer.

<template>
  <div>
    <div class="mb-5 grid grid-cols-3 gap-4">
      <div>
        <AisCard header="Test Header" footer="Test Footer">This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard header="No Footer">This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard>No header or footer.</AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
</script>

Icon & Status

Use icon and status props to easily customize your card header. Likewise, you can use footer-icon and footer-status to easily customize your card footer.

Header with icon

This is the body of the card.

Footer with icon

Header with status

This is the body of the card.

Footer with status

<template>
  <div>
    <div class="mb-5 grid grid-cols-3 gap-4">
      <div>
        <AisCard header="Header with icon"
                 header-class="font-bold"
                 icon="users"
                 icon-class="text-primary"
                 footer="Footer with icon"
                 footer-class="font-bold"
                 :footer-icon="faLandmark"
                 footer-icon-class="text-blue-500"
        >This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard header="Header with status"
                 header-class="font-bold"
                 status="busy"
                 status-class="text-blue-500"
                 footer="Footer with status"
                 footer-class="font-bold text-danger"
                 footer-status="error"
                 footer-status-class="animate-pulse"
        >This is the body of the card.</AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { faLandmark } from '@fortawesome/free-solid-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faLandmark);
</script>

Rounded

Use icon and status props to easily customize your card header. Likewise, you can use footer-icon and footer-status to easily customize your card footer.

rounded-none

rounded-sm

rounded

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

Try the different rounded options

This is the body of the card.

Some Footer

<template>
  <div>
    <div class="grid gap-8">
      <div class="flex justify-center">
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            size="sm"
            class="rounded"
            buttons
            variant="default"
            outline
        />
      </div>
      <div>
        <AisCard header="Try the different rounded options"
                 icon="file"
                 footer="Some Footer"
                 footer-icon="info"
                 :rounded="selectedOption"
        >This is the body of the card.</AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { AisCard } from '@ais-public/ais-components';
import { AisRadioGroup } from '@ais-public/ais-components';

const options = ref([
  { value: 'none', label: 'rounded-none' },
  { value: 'sm', label: 'rounded-sm' },
  { value: 'rounded', label: 'rounded' },
  { value: 'md', label: 'rounded-md' },
  { value: 'lg', label: 'rounded-lg' },
  { value: 'xl', label: 'rounded-xl' },
  { value: '2xl', label: 'rounded-2xl' },
  { value: '3xl', label: 'rounded-3xl' },
]);
const selectedOption = ref('none');
</script>

Align

To align the content of the card set the align prop to left, center or right. The default is left.

Left

This is the body of the card.

Test Footer

Center

This is the body of the card.

Test Footer

Right

This is the body of the card.

Test Footer

<template>
  <div>
    <div class="grid grid-cols-3 gap-4">
      <div>
        <AisCard
            header="Left"
            footer="Test Footer"
        >This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard
            header="Center"
            footer="Test Footer"
            align="center"
        >This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard
            header="Right"
            footer="Test Footer"
            align="right"
        >This is the body of the card.</AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
</script>

Variants

Default

This is the body of the card.

Primary

This is the body of the card.

Secondary

This is the body of the card.

Info

This is the body of the card.

Success

This is the body of the card.

Danger

This is the body of the card.

Warning

This is the body of the card.

Plain

This is the body of the card.

<template>
  <div class="grid grid-cols-4 gap-4">
    <div>
      <AisCard
          header="Default"
          variant="default"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Primary"
          variant="primary"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Secondary"
          variant="secondary"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Info"
          variant="info"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Success"
          variant="success"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Danger"
          variant="danger"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Warning"
          variant="warning"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Plain"
          variant="plain"
      >This is the body of the card.</AisCard>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from "@ais-public/ais-components";
</script>

Outline

Default

This is the body of the card.

Footer

Primary

This is the body of the card.

Footer

Secondary

This is the body of the card.

Footer

Info

This is the body of the card.

Footer

Success

This is the body of the card.

Footer

Danger

This is the body of the card.

Footer

Warning

This is the body of the card.

Footer

Plain

This is the body of the card.

Footer

<template>
  <div class="grid grid-cols-4 gap-4">
    <div>
      <AisCard header="Default" footer="Footer"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Primary" footer="Footer"
               variant="primary"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Secondary" footer="Footer"
               variant="secondary"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Info" footer="Footer"
               variant="info"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Success" footer="Footer"
               variant="success"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Danger" footer="Footer"
               variant="danger"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Warning" footer="Footer"
               variant="warning"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Plain" footer="Footer"
               variant="plain"
               outline
      >This is the body of the card.</AisCard>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from "@ais-public/ais-components";
</script>

Using Slots

For custom content use the header and/or footer slots.

  Custom Header

This is the body of the card.

  Footer slot content

  Attachments

This is the body of the card.

  Footer slot content

<template>
  <div>
    <div class="mb-5 grid grid-cols-2 gap-4">
      <div>
        <AisCard>
          <template #header>
            <AisIcon icon="users" />&nbsp;
            <b><span class="text-blue-600">Custom</span> Header</b>
          </template>

          This is the body of the card.

          <template #footer>
            <div class="text-blue-600">
              <AisIcon icon="info" />&nbsp;
              Footer slot content
            </div>
          </template>
        </AisCard>
      </div>
      <div>
        <AisCard footer-class="text-cyan-600">
          <template #header>
            <AisIcon :icon="faFile" />&nbsp;
            <i>Attachments</i>
          </template>

          This is the body of the card.

          <template #footer>
            <AisIcon icon="info" />&nbsp;
            Footer slot content
          </template>
        </AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { AisIcon } from '@ais-public/ais-components';
  import { faFile } from '@fortawesome/free-regular-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faFile);
</script>

Or just customize the right side of the header and/or footer with the headerRight and/or footerRight slots.

Standard header

23

This is the body of the card.

Standard footer

Final

<template>
  <div class="mb-5 grid grid-cols-2 gap-4">
      <AisCard header="Standard header" icon="success" footer="Standard footer" footer-icon="info">
        <template #headerRight>
          <AisBadge variant="secondary" size="sm">23</AisBadge>
        </template>

        This is the body of the card.

        <template #footerRight>
          <AisBadge variant="danger" size="xs">Final</AisBadge>
        </template>
      </AisCard>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { AisBadge } from '@ais-public/ais-components';
  import { faFile } from '@fortawesome/free-regular-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faFile);
</script>

Collapsible

Set the collapsible prop to be able to expand/collapse the card by clicking anywhere on the card header. Set the collapse-arrow boolean prop to have a dynamic leading arrow in your header.

Set the default-open prop to false to have the card start out collapsed. Each click of the header will emit a click event, passing the open state.

Click on the header to expand/collapse the body and footer.

Test Footer

Click on the header to expand/collapse the body and footer.

Test Footer

<template>
  <div class="grid grid-cols-2 gap-4">

    <div>
      <AisCard header="Click header to expand/collapse"
               footer="Test Footer"
               icon="users"
               collapsible
               collapse-arrow
      >Click on the header to expand/collapse the body and footer.</AisCard>
    </div>

    <div>
      <AisCard header="Click header to expand/collapse"
               footer="Test Footer"
               collapsible
               :default-open="false"
               @click="handleClick"
      >
        <template #headerRight="{ open }">
          <AisIcon :icon="open ? 'caret-up' : 'caret-down'"/>
        </template>

        Click on the header to expand/collapse the body and footer.
      </AisCard>
    </div>


  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { AisIcon } from '@ais-public/ais-components';

  const handleClick = (e) => { console.log(`header.click: open=[${e}]`) }
</script>

no-body

Use the no-body prop to remove the use of a AisCardBody inside of the card. This can be useful when you want to nest something within a card without any padding or margin, like a table or list group. Or if you need full control of body markup/styling or advanced accessibility semantics. See AisCardBody for details.

Table

Add flush to AisTable and no-body to AisCard to remove all padding/margin between the card and the table.

Team Roster

Hawk ID	Univ ID	First Name	Last Name	Email
r2d2	79599133			r2-d2@uiowa.edu
c3po	70372677			c3-po@uiowa.edu
LatrenaCooper18	73824566	Latrena	Cooper	Latrena-Cooper@uiowa.edu
GrayCooper5	70135927	Gray	Cooper	Gray-Cooper@uiowa.edu
hansolo	73243814			han-solo@uiowa.edu

Full-time staff only

<script setup>
  import { ref } from "vue";
  import { AisCard } from "@ais-public/ais-components";
  import { AisTable } from "@ais-public/ais-components";
  import { defaultItems, defaultFields } from "@/components/table/examples/table-data.js";

  const fields = ref(defaultFields);
  const items = ref(defaultItems.slice(0, 5));
</script>

<template>
  <AisCard no-body
           header="Team Roster"
           icon="users"
           footer="Full-time staff only"
           footer-icon="info"
           footer-class="text-blue-600"
  >
    <AisTable ruled flush :fields="fields" :items="items"></AisTable>
  </AisCard>
</template>

Table w/ Sticky Headers

For a table with many rows you can nest it with the sticky-headers prop to minimize the overall height of the card. Just wrap your table in a div with a max-height set and overflow-y-auto set.

Team Roster

Hawk ID	Univ ID	First Name	Last Name	Email
r2d2	79599133			r2-d2@uiowa.edu
c3po	70372677			c3-po@uiowa.edu
LatrenaCooper18	73824566	Latrena	Cooper	Latrena-Cooper@uiowa.edu
GrayCooper5	70135927	Gray	Cooper	Gray-Cooper@uiowa.edu
hansolo	73243814			han-solo@uiowa.edu
skywalker	76949520			luke-skywalker@uiowa.edu
SilvieKelly3	72118619	Silvie	Kelly	Silvie-Kelly@uiowa.edu
DarbMorales4	75833755	Darb	Morales	Darb-Morales@uiowa.edu
SenaWilson6	70045243	Sena	Wilson	Sena-Wilson@uiowa.edu
BevHoward7	76159918	Bev	Howard	Bev-Howard@uiowa.edu
EbonyAllen8	71862903	Ebony	Allen	Ebony-Allen@uiowa.edu
FranciskaJohnson9	72523333	Franciska	Johnson	Franciska-Johnson@uiowa.edu
ShoshanaWalker10	73626559	Shoshana	Walker	Shoshana-Walker@uiowa.edu
SamanthaKelly11	77488958	Samantha	Kelly	Samantha-Kelly@uiowa.edu
LissaLopez12	77011250	Lissa	Lopez	Lissa-Lopez@uiowa.edu
KayleePrice13	75740742	Kaylee	Price	Kaylee-Price@uiowa.edu
BeverleeTorres14	70715142	Beverlee	Torres	Beverlee-Torres@uiowa.edu
TheresaJimenez15	75597482	Theresa	Jimenez	Theresa-Jimenez@uiowa.edu
MaxiLopez16	74648276	Maxi	Lopez	Maxi-Lopez@uiowa.edu
FayinaJames17	75542451	Fayina	James	Fayina-James@uiowa.edu
Jo AnnCarter19	77062487	Jo Ann	Carter	Jo Ann-Carter@uiowa.edu
DannaWatson20	76192026	Danna	Watson	Danna-Watson@uiowa.edu
BirgittaStewart21	79435202	Birgitta	Stewart	Birgitta-Stewart@uiowa.edu
NatalieFlores22	74784953	Natalie	Flores	Natalie-Flores@uiowa.edu
EolandaHill23	72896251	Eolanda	Hill	Eolanda-Hill@uiowa.edu
RupertaNguyen24	75824037	Ruperta	Nguyen	Ruperta-Nguyen@uiowa.edu
MaddalenaAllen25	71264948	Maddalena	Allen	Maddalena-Allen@uiowa.edu
CaseyFlores26	79768499	Casey	Flores	Casey-Flores@uiowa.edu
GeorgiannaSanchez27	70676563	Georgianna	Sanchez	Georgianna-Sanchez@uiowa.edu
CaitrinBrown28	78760977	Caitrin	Brown	Caitrin-Brown@uiowa.edu
RobinaAnderson29	70590620	Robina	Anderson	Robina-Anderson@uiowa.edu
ElnoraWilliams30	75062841	Elnora	Williams	Elnora-Williams@uiowa.edu

Full-time staff only

<script setup>
  import { ref } from "vue";
  import { AisCard } from "@ais-public/ais-components";
  import { AisTable } from "@ais-public/ais-components";
  import { defaultItems, defaultFields } from "@/components/table/examples/table-data.js";

  const fields = ref(defaultFields);
  const items = ref(defaultItems);
</script>

<template>
  <AisCard no-body
           header="Team Roster"
           icon="users"
           header-class="font-bold"
           footer="Full-time staff only"
           footer-icon="info"
           footer-class="text-blue-600"
  >
    <div class="block w-full overflow-y-auto max-h-96">
      <AisTable class="flush"
                :fields="fields"
                :items="items"
                bordered
                sticky-headers
      ></AisTable>
    </div>
  </AisCard>
</template>

Key-Value Example

An example key/value table nested flush in a no-body card, built manually with html table by adding ais, flush, and table-ruled classes.

Random Team Member

Hawk ID	LissaLopez12
Univ ID	77011250
First Name	Lissa
Last Name	Lopez
Email	Lissa-Lopez@uiowa.edu

Full-time staff member

<script setup>
  import { ref } from "vue";
  import { AisCard } from '@ais-public/ais-components';
  import { AisIconButton } from '@ais-public/ais-components';
  import { vTooltip } from '@/components/tooltip/vTooltip';
  import { defaultItems, defaultFields } from '@/components/table/examples/table-data.js';
  import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faRotateRight);

  const getRandomInt = (min, max) => {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  const getRandomPerson = () => defaultItems[getRandomInt(0, defaultItems.length - 1)];

  const fields = ref(defaultFields);
  const randomTeamMember = ref(getRandomPerson());
</script>

<template>
  <AisCard no-body
           header="Random Team Member"
           icon="user"
           footer="Full-time staff member"
           footer-icon="info"
           footer-class="text-blue-600"
  >
    <template #headerRight>
      <AisIconButton :icon="faRotateRight"
                     label="Click for new random team member"
                     v-tooltip content="Randomize"
                     @click="randomTeamMember = getRandomPerson()"/>
    </template>

    <table class="ais flush table-ruled">
      <tbody>
        <tr v-for="field in fields">
          <th class="w-[1%] whitespace-nowrap" style="padding-right: 1rem">{{ field.label }}</th>
          <td>{{ randomTeamMember[field.key] }}</td>
        </tr>
      </tbody>
    </table>
  </AisCard>
</template>

List Group

Add flush to AisListGroup and no-body to AisCard to remove all padding/margin between the card and the list group.

Card with flush list group

List Group Item #1

List Group Item #2

List Group Item #3

List Group Item #4

Card with flush list group and a card body

List Group Item #1

List Group Item #2

List Group Item #3

List Group Item #4

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem.

<template>
  <div class="grid grid-cols-2 gap-4">
    <div>
      <AisCard no-body header="Card with flush list group">
        <AisListGroup flush>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
        </AisListGroup>
      </AisCard>
    </div>

    <div>
      <AisCard no-body header="Card with flush list group and a card body">
        <AisListGroup flush>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
        </AisListGroup>

        <AisCardBody>
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim
          exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit
          ipsum anim Lorem.
        </AisCardBody>

      </AisCard>
    </div>
  </div>
</template>

<script setup>
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';
  import { AisCard } from '@ais-public/ais-components';
  import { AisCardBody } from '@ais-public/ais-components';
</script>

Advanced Accessibility

By default, AisCard handles common scroll-region accessibility for the built-in body wrapper by adding tabindex="0" when overflow is scrollable.

For advanced cases (more specific aria-*, role, or custom tabindex), use no-body and add your own AisCardBody inside the default slot.

<AisCard no-body header="Search Results">
  <AisCardBody
    class="max-h-64 overflow-auto"
    role="region"
    aria-label="Search results list"
    tabindex="-1"
  >
    <!-- custom content -->
  </AisCardBody>
</AisCard>

Events

Bind to @click to handle the card's click event. Bind to @header-click event to handle the card header's click event.

Card Events

Click on the card header to trigger a header-click event.

Click anywhere on the card to trigger a click event.

<template>
  <div>
    <AisCard no-body
             header="Card Events"
             header-class="font-medium"
             @click="handleClick"
             @header-click="handleHeaderClick"
    >
      <AisListGroup flush>
        <AisListGroupItem>Click on the card header to trigger a <code>header-click</code> event.</AisListGroupItem>
        <AisListGroupItem>Click anywhere on the card to trigger a <code>click</code> event.</AisListGroupItem>
      </AisListGroup>
    </AisCard>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';

  const handleClick = (e) => console.log(`card.click: event=[${e}]`)
  const handleHeaderClick = (e) => console.log(`card-header.click: isOpen=[${e}]`)
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
align	String		'left'	Text alignment for the card's content Valid values: left, center or right	false
bodyClass	Array, Object, String		''	CSS class (or classes) to apply to the body	false
collapseArrow	Boolean		undefined	Set the collapse-arrow boolean prop to have a dynamic leading arrow in your header.	false
collapsible	Boolean		undefined	Set the collapsible prop to be able to expand/collapse the card by clicking anywhere on the card header.	false
defaultOpen	Boolean		true	Set the default-open prop to false to have the card start out collapsed.	false
footer	String		''	Text content to place in the footer	false
footerClass	Array, Object, String		''	CSS class (or classes) to apply to the footer	false
footerIcon	Undefined		undefined	Optional footer icon. Accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons	false
footerIconClass	Array, Object, String		''	Adds class(es) to the footer icon	false
footerStatus	String		undefined	Optional icon on the right side of the footer to indicate the logical state of the card Valid values: busy, success, error, required	false
footerStatusClass	Array, Object, String		''	Adds class(es) to the footer status icon	false
header	String		''	Text content to place in the header	false
headerClass	Array, Object, String		''	CSS class (or classes) to apply to the header	false
icon	Undefined		undefined	Optional header icon. Accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons	false
iconClass	Array, Object, String		''	Adds class(es) to the header icon	false
noBody	Boolean		false	Disable rendering of the default inner card-body element	false
outline	Boolean		false	Applies one of the theme color variants to the border instead of the background.	false
rounded	Boolean, String		undefined	Applies rounded corners using TailwindCSS's rounded classes	false
roundedBreakpoint	String		undefined	Limit rounding configuration to the specified breakpoint and above. This is not intended for general use but rather for internal customization. It allows AisCard to be full-screen edge-to-edge in a mobile view. This is used in AisModal.	false
status	String		undefined	Optional icon on the right side of the header to indicate the logical state of the card Valid values: busy, success, error, required	false
statusClass	Array, Object, String		''	Adds class(es) to the header status icon	false
variant	String		undefined	Applies one of the theme color variants to the component Valid values: primary, secondary, default, info, success, warning, danger, plain	false

Slots

Name	Scoped	Description
default		Scoped slot for custom rendering the card body
footer		Scoped slot for custom rendering the card footer
footerRight		Scoped slot for custom rendering the right side of the card footer. Note: this slot will be ignored if the footer slot is used.
header		Scoped slot for custom rendering the card header
headerRight		Scoped slot for custom rendering the right side of the card header.

Events

Event	Arguments	Description
click	event object - Native event object	Emitted when the card is clicked
header-click	open boolean - The open state of the card event object - Native event object	Emitted when the card header is clicked