tabler/preview/pages/card-actions.astro

---
import CardSubtitle from '@ui/CardSubtitle.astro'
import CardActions from '@ui/CardActions.astro'
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardTitle from '@ui/CardTitle.astro'
import Button from '@ui/Button.astro'
import Avatar from '@ui/Avatar.astro'
import Icon from '@ui/Icon.astro'
import { people } from '@shared/lib/people'
import { requireIndex } from '@shared/lib/array'
import DocsLink from '@ui/DocsLink.astro'

const person0 = requireIndex(people, 0)
const person3 = requireIndex(people, 3)
---

<DefaultLayout title="Card actions" pageMenu="base.cards.actions">
  <DocsLink slot="page-header-actions" path="/ui/components/card" />

  <div class="row row-cards">
    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <CardTitle>Sample card</CardTitle>
            <CardSubtitle>A blank card with a title and no actions.</CardSubtitle>
          </div>
        </CardHeader>
        <BodyPlaceholder />
      </Card>
    </div>

    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <CardTitle>Card with action</CardTitle>
            <CardSubtitle>Add a single action button to the header.</CardSubtitle>
          </div>
          <CardActions>
            <Button color="primary" icon="plus" text="Add new" />
          </CardActions>
        </CardHeader>
        <BodyPlaceholder />
      </Card>
    </div>

    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <CardTitle>Card title</CardTitle>
            <CardSubtitle>Add two secondary action buttons to the header.</CardSubtitle>
          </div>
          <CardActions>
            <Button icon="phone" text="Phone" />
            <Button icon="mail" text="Email" />
          </CardActions>
        </CardHeader>
        <BodyPlaceholder />
      </Card>
    </div>

    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <div class="row align-items-center">
              <div class="col-auto">
                <Avatar person={person0} />
              </div>
              <div class="col">
                <CardTitle>{person0.full_name}</CardTitle>
                <CardSubtitle as="div">{person0.job_title}</CardSubtitle>
              </div>
            </div>
          </div>
          <CardActions>
            <Button icon="phone" text="Phone" />
            <Button icon="mail" text="Email" />
          </CardActions>
        </CardHeader>
        <BodyPlaceholder />
      </Card>
    </div>

    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <CardTitle> With description </CardTitle>
            <CardSubtitle> Lorem ipsum dolor sit amet consectetur adipisicing. </CardSubtitle>
          </div>
        </CardHeader>
        <BodyPlaceholder />
      </Card>
    </div>

    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <CardTitle> With description and action </CardTitle>
            <CardSubtitle> Lorem ipsum dolor sit amet consectetur adipisicing. </CardSubtitle>
          </div>
          <CardActions>
            <Button color="primary" text="Create new job" />
          </CardActions>
        </CardHeader>
        <BodyPlaceholder />
      </Card>
    </div>

    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <div class="row align-items-center">
              <div class="col-auto">
                <Avatar person={person3} />
              </div>
              <div class="col">
                <CardTitle>{person3.full_name}</CardTitle>
                <CardSubtitle as="div">{person3.job_title}</CardSubtitle>
              </div>
            </div>
          </div>
          <CardActions>
            <div class="dropdown">
              <a href="#" class="btn btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Actions"><Icon name="dots-vertical" /></a>
              <div class="dropdown-menu dropdown-menu-end">
                <a class="dropdown-item" href="#">Edit user</a>
                <a class="dropdown-item" href="#">Change permissions</a>
                <a class="dropdown-item text-danger" href="#">Delete user</a>
              </div>
            </div>
          </CardActions>
        </CardHeader>
        <BodyPlaceholder />
      </Card>
    </div>

    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <CardTitle>Icon toolbar</CardTitle>
            <CardSubtitle>A compact row of icon-only actions in the header.</CardSubtitle>
          </div>
          <CardActions class="btn-actions">
            <a href="#" class="btn btn-action" aria-label="Refresh"><Icon name="refresh" /></a>
            <a href="#" class="btn btn-action" aria-label="Collapse"><Icon name="chevron-up" /></a>
            <a href="#" class="btn btn-action" aria-label="More actions"><Icon name="dots-vertical" /></a>
            <a href="#" class="btn btn-action" aria-label="Close"><Icon name="x" /></a>
          </CardActions>
        </CardHeader>
        <BodyPlaceholder />
      </Card>
    </div>
  </div>
</DefaultLayout>