Etat Pur Design System

Typography 

<!-- Section Display -->
<section class="border-b border-gray-200 pb-8">
    <h4 class="mt-6 mb-2 h4">Display</h4>

    <div class="typography-content">
        <!-- Display Bold -->
        <div class="flex flex-col space-y-2 mt-6">
            <div class="display">Display/Large/D1 Bold</div>
        </div>

        <!-- Display Regular -->
        <div class="flex flex-col space-y-2 mt-6">
            <div class="display-base">Display/Large/D1 Regular</div>
        </div>
    </div>
</section>

<!-- Section Header -->
<section class="border-b border-gray-200 pb-8">
    <h4 class="mt-6 mb-2 h4">Header</h4>

    <div class="flex flex-wrap gap-8">
        <!-- Header Bold -->
        <div class="flex flex-col space-y-2 mt-6">
            <div class="h1">Heading/Large/S1 Bold</div>
            <div class="h2">Heading/Large/S2 Bold</div>
            <div class="h3">Heading/Large/S3 Bold</div>
            <div class="h4">Heading/Large/S4 Bold</div>
            <div class="h5">Heading/Large/S5 Bold</div>
            <div class="h6">Heading/Large/S6 Bold</div>
        </div>

        <!-- Header Regular -->
        <div class="flex flex-col space-y-2 mt-6">
            <div class="h1-base">Heading/Large/S1 Regular</div>
            <div class="h2-base">Heading/Large/S2 Regular</div>
            <div class="h3-base">Heading/Large/S3 Regular</div>
            <div class="h4-base">Heading/Large/S4 Regular</div>
            <div class="h5-base">Heading/Large/S5 Regular</div>
            <div class="h6-base">Heading/Large/S6 Regular</div>
        </div>
    </div>
</section>

<!-- Section Body -->
<section class="border-b border-gray-200 pb-8">
    <h4 class="mt-6 mb-2 h4">Body</h4>

    <div class="typography-content flex flex-row space-x-12">
        <div class="text-body-lg">
            <div>large normal</div>
            <div class="italic">large italic</div>
            <div class="font-bold">large bold</div>
            <div class="font-bold italic">large bold italic</div>
            <div class="underline text-brand">large link</div>
        </div>
        <div class="text-body-base">
            <div>standard normal</div>
            <div class="italic">standard italic</div>
            <div class="font-bold">standard bold</div>
            <div class="font-bold italic">standard bold italic</div>
            <div class="underline text-brand">standard link</div>
        </div>
        <div class="text-body-sm">
            <div>small normal</div>
            <div class="italic">small italic</div>
            <div class="font-bold">small bold</div>
            <div class="font-bold italic">small bold italic</div>
            <div class="underline text-brand">small link</div>
        </div>
        <div class="text-body-xs">
            <div>extra small normal</div>
            <div class="italic">extra small italic</div>
            <div class="font-bold">extra small bold</div>
            <div class="font-bold italic">extra small bold italic</div>
            <div class="underline text-brand">extra small link</div>
        </div>
        <div class="text-body-xxs">
            <div>extra extra small normal</div>
            <div class="italic">extra extra small italic</div>
            <div class="font-bold">extra extra small bold</div>
            <div class="font-bold italic">extra extra small bold italic</div>
            <div class="underline text-brand">extra extra small link</div>
        </div>
        <div class="text-script">
            <div>script normal</div>
            <div class="italic">script italic</div>
            <div class="font-bold">script bold</div>
            <div class="font-bold italic">script bold italic</div>
            <div class="underline text-brand">script link</div>
        </div>
    </div>
</section>

<!-- Section Click -->
<section class="border-b border-gray-200 pb-8">
    <h4 class="mt-6 mb-2 h4">Click</h4>

    <div class="typography-content flex flex-row space-x-12">
        <div class="text-click-lg">
            <div>large normal</div>
            <div class="italic">large italic</div>
            <div class="underline text-brand">large link</div>
            <div class="uppercase">large uppercase</div>
            <div class="uppercase italic">large uppercase italic</div>
            <div class="uppercase underline text-brand">large uppercase link</div>
        </div>
        <div class="text-click-base">
            <div>standard normal</div>
            <div class="italic">standard italic</div>
            <div class="underline text-brand">standard link</div>
            <div class="uppercase">standard uppercase</div>
            <div class="uppercase italic">standard uppercase italic</div>
            <div class="uppercase underline text-brand">standard uppercase link</div>
        </div>
        <div class="text-click-sm">
            <div>small normal</div>
            <div class="italic">small italic</div>
            <div class="underline text-brand">small link</div>
            <div class="uppercase">small uppercase</div>
            <div class="uppercase italic">small uppercase italic</div>
            <div class="uppercase underline text-brand">small uppercase link</div>
        </div>
        <div class="text-click-xs">
            <div>extra small normal</div>
            <div class="italic">extra small italic</div>
            <div class="underline text-brand">extra small link</div>
            <div class="uppercase">extra small uppercase</div>
            <div class="uppercase italic">extra small uppercase italic</div>
            <div class="uppercase underline text-brand">extra small uppercase link</div>
        </div>
    </div>
</section>
 
<!-- Section Display -->
<section class="border-b border-gray-200 pb-8">
    <h4 class="mt-6 mb-2 h4">Display</h4>

    <div class="typography-content">
        <!-- Display Bold -->
        <div class="flex flex-col space-y-2 mt-6">
            {% for display in displays %}
                <div class="{{ display.classWeight }}">Display/Large/{{ display.label }} Bold</div>
            {% endfor %}
        </div>

        <!-- Display Regular -->
        <div class="flex flex-col space-y-2 mt-6">
            {% for display in displays %}
                <div class="{{ display.class }}">Display/Large/{{ display.label }} Regular</div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Section Header -->
<section class="border-b border-gray-200 pb-8">
    <h4 class="mt-6 mb-2 h4">Header</h4>

    <div class="flex flex-wrap gap-8">
        <!-- Header Bold -->
        <div class="flex flex-col space-y-2 mt-6">
            {% for size in sizesHeading %}
                <div class="{{ size.classWeight }}">Heading/Large/{{ size.label }} Bold</div>
            {% endfor %}
        </div>

        <!-- Header Regular -->
        <div class="flex flex-col space-y-2 mt-6">
            {% for size in sizesHeading %}
                <div class="{{ size.class }}">Heading/Large/{{ size.label }} Regular</div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Section Body -->
<section class="border-b border-gray-200 pb-8">
    <h4 class="mt-6 mb-2 h4">Body</h4>

    <div class="typography-content flex flex-row space-x-12">
        {% for size in sizesBody %}
            <div class="{{ size.class }}">
                <div>{{ size.label }} normal</div>
                <div class="italic">{{ size.label }} italic</div>
                <div class="font-bold">{{ size.label }} bold</div>
                <div class="font-bold italic">{{ size.label }} bold italic</div>
                <div class="underline text-brand">{{ size.label }} link</div>
            </div>
        {% endfor %}
    </div>
</section>

<!-- Section Click -->
<section class="border-b border-gray-200 pb-8">
    <h4 class="mt-6 mb-2 h4">Click</h4>

    <div class="typography-content flex flex-row space-x-12">
        {% for size in sizesClick %}
            <div class="{{ size.class }}">
                <div>{{ size.label }} normal</div>
                <div class="italic">{{ size.label }} italic</div>
                <div class="underline text-brand">{{ size.label }} link</div>
                <div class="uppercase">{{ size.label }} uppercase</div>
                <div class="uppercase italic">{{ size.label }} uppercase italic</div>
                <div class="uppercase underline text-brand">{{ size.label }} uppercase link</div>
            </div>
        {% endfor %}
    </div>
</section>
 
{
  "displays": [
    {
      "label": "D1",
      "classWeight": "display",
      "class": "display-base"
    }
  ],
  "sizesHeading": [
    {
      "label": "S1",
      "classWeight": "h1",
      "class": "h1-base"
    },
    {
      "label": "S2",
      "classWeight": "h2",
      "class": "h2-base"
    },
    {
      "label": "S3",
      "classWeight": "h3",
      "class": "h3-base"
    },
    {
      "label": "S4",
      "classWeight": "h4",
      "class": "h4-base"
    },
    {
      "label": "S5",
      "classWeight": "h5",
      "class": "h5-base"
    },
    {
      "label": "S6",
      "classWeight": "h6",
      "class": "h6-base"
    }
  ],
  "sizesBody": [
    {
      "label": "large",
      "class": "text-body-lg"
    },
    {
      "label": "standard",
      "class": "text-body-base"
    },
    {
      "label": "small",
      "class": "text-body-sm"
    },
    {
      "label": "extra small",
      "class": "text-body-xs"
    },
    {
      "label": "extra extra small",
      "class": "text-body-xxs"
    },
    {
      "label": "script",
      "class": "text-script"
    }
  ],
  "sizesClick": [
    {
      "label": "large",
      "class": "text-click-lg"
    },
    {
      "label": "standard",
      "class": "text-click-base"
    },
    {
      "label": "small",
      "class": "text-click-sm"
    },
    {
      "label": "extra small",
      "class": "text-click-xs"
    }
  ]
}

No notes defined.