MigsLab UIVue 3 component workshop

Foundations

Typography

Heading, size, weight and helper classes from styles/typography.css. The default font is Geist, loaded from styles/fonts.

Headings

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

<h1 class="text-h1">Heading H1</h1>
<h2 class="text-h2">Heading H2</h2>
<!-- text-h3 ... text-h6 -->

Text sizes

text-xs — extra small texttext-sm — small textdefault — body texttext-lg — large text
<span class="text-xs">Extra small</span>
<span class="text-sm">Small</span>
<span class="text-lg">Large</span>

Font weights

font-thin font-extralight font-light font-regular font-medium font-semibold font-bold font-extrabold font-black
<span class="font-light">Light</span>
<span class="font-semibold">Semi-bold</span>
<span class="font-bold">Bold</span>

Helpers

muted — secondary information

Inline inline-code inside text.

text-center

text-right

<p class="muted">Secondary information</p>
<code class="inline-code">inline-code</code>
<p class="text-center">Centered</p>