Skip to content

Commit

Permalink
feat: add BaseCard demos and variations
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 18, 2023
1 parent 0537c1d commit 70a4e4c
Showing 1 changed file with 392 additions and 0 deletions.
392 changes: 392 additions & 0 deletions .playground/pages/tests/base/card.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,392 @@
<script setup lang="ts">
definePageMeta({
title: 'BaseCard',
icon: 'mingcute:display-fill',
description: 'Card component',
section: 'base',
})
</script>

<template>
<div>
<NuiPreviewContainer title="BaseCard">
<NuiPreview title="Radius" description="Card component radiuses">
<div class="grid gap-4 md:grid-cols-2 max-w-3xl">
<BaseCard rounded="none" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard rounded="sm" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard rounded="lg" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>
</div>
</NuiPreview>

<NuiPreview title="Contrast" description="Card component contrasts">
<div class="grid gap-4 md:grid-cols-2 max-w-3xl">
<BaseCard color="white" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard color="white-contrast" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard color="muted" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard color="muted-contrast" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>
</div>
</NuiPreview>

<NuiPreview title="Color" description="Card component colors">
<div class="grid gap-4 md:grid-cols-2 max-w-3xl">
<BaseCard color="white" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard color="primary" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard color="info" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard color="success" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard color="warning" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard color="danger" rounded="md" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>
</div>
</NuiPreview>

<NuiPreview
title="Shadow: flat"
description="Card component flat shadows"
>
<div class="grid gap-4 md:grid-cols-2 max-w-3xl">
<BaseCard rounded="none" shadow="flat" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard rounded="sm" shadow="flat" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard rounded="md" shadow="flat" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard rounded="lg" shadow="flat" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>
</div>
</NuiPreview>

<NuiPreview
title="Shadow: hover"
description="Card component hover shadows"
>
<div class="grid gap-4 md:grid-cols-2 max-w-3xl">
<BaseCard rounded="none" shadow="hover" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard rounded="sm" shadow="hover" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard rounded="md" shadow="hover" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>

<BaseCard rounded="lg" shadow="hover" class="p-6">
<BaseHeading
as="h4"
size="sm"
weight="semibold"
lead="tight"
class="text-muted-800 mb-2 dark:text-white"
>
Iam a card
</BaseHeading>

<BaseParagraph size="sm" lead="tight" class="text-muted-400">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</BaseParagraph>
</BaseCard>
</div>
</NuiPreview>
</NuiPreviewContainer>
</div>
</template>

0 comments on commit 70a4e4c

Please sign in to comment.