AisCardGroup

The AisCardGroup is a component for laying out a series of AisCard components. Use the display prop to control the orientation of the cards (flex or grid). Use the gap prop to control the spacing between the cards. Use variant, outline, and rounded props to control the look of your card group.

Display

flex (horizontal)grid (vertical)

Gap

Variant

defaultprimarysecondaryplaininfosuccesswarningdanger

Rounded

truefalsenonesmmdlgxl2xl3xlfull

Outline

Collapsible

Arrows

---

Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.

Header 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.

Header 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.

Header 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<template>
  <div class="grid gap-8">

    <div class="grid grid-cols-2 gap-10">
      <AisField label="Display">
        <AisSelect v-model="display"
                   :options="[
                     { value: 'flex', label: 'flex (horizontal)' },
                     { value: 'grid', label: 'grid (vertical)' },
                   ]"
        />
      </AisField>

      <AisField label="Gap">
        <AisInput v-model="gap"/>
      </AisField>

      <AisField label="Variant">
        <AisSelect v-model="variant" :options="variants" class="grow" />
      </AisField>

      <AisField label="Rounded">
        <AisSelect v-model="rounded" :options="roundedStates" />
      </AisField>

      <AisToggle label="Outline" v-model="outline"/>

      <div class="flex gap-10 items-center justify-end">
        <AisToggle label="Collapsible" v-model="collapsible" :disabled="display === 'flex'"/>
        <AisToggle label="Arrows" v-model="arrows" :disabled="!collapsible"/>
      </div>
    </div>

    <hr>

    <AisCardGroup :display="display"
                  :gap="gap"
                  :rounded="rounded"
                  :variant="variant"
                  :outline="outline"
                  :collapsible="collapsible"
                  :arrows="arrows"
    >
      <AisCard header="Header 1" icon="users">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.
      </AisCard>
      <AisCard header="Header 2" icon="users">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.
      </AisCard>
      <AisCard header="Header 3" icon="users">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.
      </AisCard>
      <AisCard header="Header 4" icon="users">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </AisCard>
    </AisCardGroup>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { AisCard } from '@ais-public/ais-components';
import { AisCardGroup } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';
import { AisInput } from '@ais-public/ais-components';
import { AisSelect } from '@ais-public/ais-components';
import { AisToggle } from '@ais-public/ais-components';
import { variants } from "@/util/variants-util";
import { roundedStates } from "@/util/rounded-prop";

const gap = ref('gap-4');
const display = ref('flex');
const variant = ref('default');
const outline = ref(false);
const rounded = ref(false);
const collapsible = ref(false);
const arrows = ref(false);
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
arrows	Boolean		false	When true, an arrow icon will be displayed next to each card header. Note: This prop will be ignored when display="flex"	false
collapsible	Boolean		false	Set the collapsible prop to be able to expand/collapse the card by clicking anywhere on the card header. Note: This prop will be ignored when display="flex"	false
display	String		'flex'	The display prop sets the group's layout method. Valid values: flex, grid, inline-flex, inline-grid	false
gap	Array, String		() => []	Use the gap prop to control spacing between the tabs and tab-panels. The prop expects one of the Tailwind CSS gap classes (e.g. gap-1, gap-10, etc...); see: https://tailwindcss.com/docs/gap.	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
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	No

Events

Event	Arguments	Description