tabler/preview/pages/cards.astro

---
// Port of preview/pages/cards.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Icon from '@shared/components/Icon.astro';
import Card from '@shared/components/cards/Card.astro';
import CardImage from '@shared/components/cards/CardImage.astro';
import CardTabs from '@shared/components/cards/CardTabs.astro';
import CardRibbonText from '@shared/components/cards/CardRibbonText.astro';
import CardRibbonTop from '@shared/components/cards/CardRibbonTop.astro';
import CardBackgroundIcon from '@shared/components/cards/CardBackgroundIcon.astro';
import CreditCard from '@shared/components/cards/CreditCard.astro';
import EmptyTeam from '@shared/components/cards/EmptyTeam.astro';
import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro';

const cardsStack = ['First', 'Second', 'Third'];
const cardsStackColors = ['red', 'green', 'blue'];
---

<DefaultLayout title="Cards" pageHeader="Cards" pageMenu="base.cards.base">
	<div class="row row-cards">
		<div class="col-md-6 col-lg-3">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Card title</h3>
				</div>
				<div class="card-body">Simple card</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card">
				<div class="card-header card-header-light">
					<h3 class="card-title">Card title</h3>
				</div>
				<div class="card-body">Card with header background</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card card-borderless">
				<div class="card-body">
					<h3 class="card-title">Card title</h3>
					<div>Card without border</div>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Card title <span class="card-subtitle">Subtitle</span></h3>
				</div>
				<div class="card-body">Card with title and subtitle</div>
			</div>
		</div>

		<div class="col-md-6 col-lg-3">
			<a href="#" class="card card-link">
				<div class="card-body">Default hover effect</div>
			</a>
		</div>
		<div class="col-md-6 col-lg-3">
			<a href="#" class="card card-link card-link-rotate">
				<div class="card-body">Rotate hover effect</div>
			</a>
		</div>
		<div class="col-md-6 col-lg-3">
			<a href="#" class="card card-link card-link-pop">
				<div class="card-body">Pop hover effect</div>
			</a>
		</div>
		<div class="col-md-6 col-lg-3"></div>

		<div class="col-md-6 col-lg-3">
			<div class="card card-rotate-end">
				<div class="card-body">Card rotate end</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card card-rotate-start">
				<div class="card-body">Card rotate start</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card card-active">
				<div class="card-body">
					<p>This is a card with active state.</p>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card card-inactive">
				<div class="card-body">
					<p>This is some text inactive state.</p>
				</div>
			</div>
		</div>

		<div class="col-md-6 col-lg-3">
			<div class="card">
				<div class="card-stamp">
					<div class="card-stamp-icon bg-yellow">
						<Icon name="bell" />
					</div>
				</div>
				<div class="card-body">
					<h3 class="card-title">Card with icon bg</h3>
					<p class="text-secondary">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga
						fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
					</p>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card bg-primary-lt">
				<div class="card-body">
					<h3 class="card-title">Card with primary light background</h3>
					<p class="text-secondary">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga
						fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
					</p>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<CardBackgroundIcon />
		</div>
		<div class="col-md-6 col-lg-3">
			<Card statusTop="danger" title="Card with top status" />
		</div>
		<div class="col-md-6 col-lg-3">
			<Card statusBottom="success" title="Card with bottom status" />
		</div>
		<div class="col-md-6 col-lg-3">
			<Card statusStart="primary" title="Card with side status" />
		</div>

		<div class="col-md-6 col-lg-3">
			<CardRibbonTop />
		</div>
		<div class="col-md-6 col-lg-3">
			<CardRibbonText />
		</div>
		<div class="col-md-6 col-lg-3">
			<Card progress title="Card with progress bar" />
		</div>
		<div class="col-md-6 col-lg-3">
			<Card class="card-stacked" title="Stacked card" />
		</div>
		<div class="col-lg-6">
			<CardImage title="Card with left side image" />
		</div>
		<div class="col-lg-6">
			<CardImage title="Card with right side image" right imgId={3} />
		</div>
		<div class="col-md-6 col-lg-3">
			<Card imgTop title="Card with top image" />
		</div>
		<div class="col-md-6 col-lg-3">
			<Card imgBottom title="Card with bottom image" />
		</div>

		<div class="col-md-6 col-lg-3">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">Card with footer</h3>
					<p class="text-secondary">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
						minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
					</p>
				</div>
				<div class="card-footer">This is standard card footer</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">Card with transparent footer</h3>
					<p class="text-secondary">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
						minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
					</p>
				</div>
				<div class="card-footer card-footer-transparent">This is transparent card footer</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3"><Card title="Card with footer button" footerButton /></div>
		<div class="col-md-6 col-lg-3"><Card title="Card with footer buttons" footerButtons /></div>

		<div class="col-md-6 col-lg-3"><Card footerElements="more,>switch" /></div>
		<div class="col-md-6 col-lg-3"><Card footerElements=">avatars" /></div>

		<div class="col-md-6 col-lg-4"><Card headerTabs /></div>
		<div class="col-md-6 col-lg-4"><Card headerPills /></div>
		<div class="col-md-6 col-lg-4"><CardTabs /></div>
		<div class="col-md-6 col-lg-4"><CardTabs bottom id="bottom" /></div>

		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Cards inside card</h3>
				</div>
				<div class="card-body">
					<div class="row row-cards">
						{
							cardsStack.map((name, i) => (
								<div class="col-md">
									<div class="card">
										<div class={`card-status-top bg-${cardsStackColors[i]}`} />
										<div class="card-header">
											<h3 class="card-title">{name} card</h3>
										</div>
										<BodyPlaceholder />
									</div>
								</div>
							))
						}
					</div>
				</div>
			</div>
		</div>

		<div class="col-12">
			<div class="card-group">
				{
					cardsStack.map((name) => (
						<div class="card">
							<div class="card-header">
								<h3 class="card-title">{name} card</h3>
							</div>
							<BodyPlaceholder />
						</div>
					))
				}
			</div>
		</div>

		<div class="col-12">
			<div class="row row-cards row-deck">
				<div class="col">
					<div class="card">
						<div class="card-header">
							<h3 class="card-title">Card title</h3>
						</div>
						<div class="card-body">
							This is a wider card with supporting text below as a natural lead-in to additional content. This content
							is a little bit longer.
						</div>
						<div class="card-footer">Last updated 3 mins ago</div>
					</div>
				</div>
				<div class="col">
					<div class="card">
						<div class="card-header">
							<h3 class="card-title">Card title</h3>
						</div>
						<div class="card-body">
							This card has supporting text below as a natural lead-in to additional content.
						</div>
						<div class="card-footer">Last updated 3 mins ago</div>
					</div>
				</div>
				<div class="col">
					<div class="card">
						<div class="card-header">
							<h3 class="card-title">Card with very long content</h3>
						</div>
						<div class="card-body">
							This is a wider card with supporting text below as a natural lead-in to additional content. This card has
							even longer content than the first to show that equal height action.
						</div>
						<div class="card-footer">Last updated 3 mins ago</div>
					</div>
				</div>
			</div>
		</div>

		<div class="col-lg-4"><Card empty /></div>
		<div class="col-lg-4"><EmptyTeam /></div>
		<div class="col-lg-4"><CreditCard /></div>
	</div>
</DefaultLayout>