# All files / src/components/atoms TypographySection.tsx

0% Statements 0/71
0% Branches 0/1
0% Functions 0/1
0% Lines 0/71

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72

     import { Card } from '@/components/ui/card'
    import { Separator } from '@/components/ui/separator'

    export function TypographySection() {
      return (
        <section className="space-y-6">
          <div>
            <h2 className="text-3xl font-bold mb-2">Typography</h2>
            <p className="text-muted-foreground">
              Text styles and hierarchical type scale
            </p>
          </div>

          <Card className="p-6">
            <div className="space-y-6">
              <div>
                <h1 className="text-5xl font-bold mb-2">Heading 1</h1>
                <p className="text-sm text-muted-foreground">
                  Bricolage Grotesque Bold / 48px
                </p>
              </div>
              <Separator />
              <div>
                <h2 className="text-4xl font-semibold mb-2">Heading 2</h2>
                <p className="text-sm text-muted-foreground">
                  Bricolage Grotesque Semibold / 36px
                </p>
              </div>
              <Separator />
              <div>
                <h3 className="text-3xl font-semibold mb-2">Heading 3</h3>
                <p className="text-sm text-muted-foreground">
                  Bricolage Grotesque Semibold / 30px
                </p>
              </div>
              <Separator />
              <div>
                <h4 className="text-2xl font-medium mb-2">Heading 4</h4>
                <p className="text-sm text-muted-foreground">
                  Bricolage Grotesque Medium / 24px
                </p>
              </div>
              <Separator />
              <div>
                <p className="text-base mb-2">
                  Body text - The quick brown fox jumps over the lazy dog. This is
                  regular body text used for paragraphs and general content.
                </p>
                <p className="text-sm text-muted-foreground">Inter Regular / 16px</p>
              </div>
              <Separator />
              <div>
                <p className="text-sm text-muted-foreground mb-2">
                  Small text - Additional information, captions, and secondary content.
                </p>
                <p className="text-sm text-muted-foreground">Inter Regular / 14px</p>
              </div>
              <Separator />
              <div>
                <code className="text-sm bg-muted px-2 py-1 rounded">
                  const example = "code text";
                </code>
                <p className="text-sm text-muted-foreground mt-2">
                  JetBrains Mono Regular / 14px
                </p>
              </div>
            </div>
          </Card>
        </section>
      )
    }