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 '@data/people.json';

const person0 = people[0];
const person3 = people[3];
---

<DefaultLayout title="Card actions" pageHeader="Card actions" pageMenu="base.cards.actions">
	<div class="row row-cards">
		<div class="col-md-6">
			<Card>
				<CardHeader title="Sample card" />
				<BodyPlaceholder />
			</Card>
		</div>

		<div class="col-md-6">
			<Card>
				<CardHeader title="Card with action">
					<CardActions>
						<Button color="primary" icon="plus" text="Add new" />
					</CardActions>
				</CardHeader>
				<BodyPlaceholder />
			</Card>
		</div>

		<div class="col-md-6">
			<Card>
				<CardHeader title="Cart title">
					<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">
								<div class="card-title">{person0.full_name}</div>
								<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">
								<div class="card-title">{person3.full_name}</div>
								<CardSubtitle as="div">{person3.job_title}</CardSubtitle>
							</div>
						</div>
					</div>
					<CardActions>
						<div class="dropdown">
							<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><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 title="Card actions">
					<CardActions class="btn-actions">
						<a href="#" class="btn-action"><Icon name="refresh" /></a>
						<a href="#" class="btn-action"><Icon name="chevron-up" /></a>
						<a href="#" class="btn-action"><Icon name="dots-vertical" /></a>
						<a href="#" class="btn-action"><Icon name="x" /></a>
					</CardActions>
				</CardHeader>
				<BodyPlaceholder />
			</Card>
		</div>
	</div>
</DefaultLayout>