tabler/preview/pages/patterns.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import BackgroundPattern from '@ui/BackgroundPattern.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import site from '@data/site.json'
import DocsLink from '@ui/DocsLink.astro'

const patternColors = Object.keys(site.colors)
const patternSizes = ['sm', 'md', 'lg', 'xl'] as const
const patternOpacities = ['lighter', 'light', 'dark', 'darker'] as const

const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'lines-vertical', 'grid', 'grid-diagonal', 'blueprint', 'circles', 'diagonal-stripes', 'diagonal-stripes-2', 'zigzag', 'vertical-stripes', 'horizontal-stripes'] as const
---

<DefaultLayout title="Patterns" pageMenu="base.patterns" description="Background patterns you can apply to any element with a utility class.">
  <DocsLink slot="page-header-actions" path="/ui/utilities/background-patterns" />

  <div class="row row-cards">
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Pattern types</CardTitle>
          <CardSubtitle>Apply a repeating background pattern to any element with a single utility class.</CardSubtitle>
          <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
            {
              patterns.map((pattern) => (
                <div class="col">
                  <BackgroundPattern pattern={pattern} class="border rounded mb-3 ratio ratio-21x9" />
                  <code>.bg-pattern-{pattern}</code>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Pattern colors</CardTitle>
          <CardSubtitle>Tint the pattern with any theme color from the palette.</CardSubtitle>
          <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
            {
              patternColors.map((color) => (
                <div class="col">
                  <BackgroundPattern pattern="rectangles" color={color} class="border rounded mb-3 ratio ratio-21x9" />
                  <code>.bg-pattern-{color}</code>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Pattern sizes</CardTitle>
          <CardSubtitle>Scale the pattern from <code>bg-pattern-sm</code> to <code>bg-pattern-xl</code>.</CardSubtitle>
          <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
            {
              patternSizes.map((size) => (
                <div class="col">
                  <BackgroundPattern pattern="diagonal" size={size} class="border rounded mb-3 ratio ratio-21x9" />
                  <code>.bg-pattern-{size}</code>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Pattern opacity</CardTitle>
          <CardSubtitle>Scale the pattern strength with the <code>bg-pattern-opacity-*</code> utilities.</CardSubtitle>
          <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
            {
              patternOpacities.map((opacity) => (
                <div class="col">
                  <BackgroundPattern pattern="transparent" color="primary" class={`border rounded mb-3 ratio ratio-21x9 bg-pattern-opacity-${opacity}`} />
                  <code>.bg-pattern-opacity-{opacity}</code>
                </div>
              ))
            }
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Usage</CardTitle>
          <CardSubtitle>Combine pattern type, color, size, and opacity on real layouts.</CardSubtitle>
          <div class="row g-3">
            <div class="col-12 col-md-6 col-xl-3">
              <BackgroundPattern pattern="transparent" class="border rounded mb-3 ratio ratio-21x9" />
              <code>.bg-pattern-transparent</code>
            </div>
            <div class="col-12 col-md-6 col-xl-3">
              <BackgroundPattern pattern="grid" color="primary" size="lg" class="border rounded mb-3 bg-pattern-opacity-light ratio ratio-21x9" />
              <code>.bg-pattern-grid.bg-pattern-primary.bg-pattern-lg.bg-pattern-opacity-light</code>
            </div>
            <div class="col-12 col-md-6 col-xl-3">
              <BackgroundPattern pattern="diagonal-stripes-2" color="azure" class="border rounded mb-3 bg-pattern-opacity-dark ratio ratio-21x9" />
              <code>.bg-pattern-diagonal-stripes-2.bg-pattern-azure.bg-pattern-opacity-dark</code>
            </div>
            <div class="col-12 col-md-6 col-xl-3">
              <BackgroundPattern pattern="dots" color="red" size="sm" class="border rounded mb-3 bg-pattern-opacity-darker ratio ratio-21x9" />
              <code>.bg-pattern-dots.bg-pattern-red.bg-pattern-sm.bg-pattern-opacity-darker</code>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12 col-lg-6">
      <Card class="bg-pattern-diagonal">
        <CardBody>
          Card with <code>.bg-pattern-diagonal</code>.
        </CardBody>
      </Card>
    </div>
    <div class="col-12 col-lg-6">
      <Card class="bg-pattern-grid bg-pattern-primary bg-pattern-opacity-light">
        <CardBody>
          Card with a primary grid and <code>.bg-pattern-opacity-light</code>.
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>