Knapp - primary-large
<Button variant="primary-large"><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Cover Design System
Knapp - primary-large
<Button variant="primary-large" disabled><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - primary-small
<Button variant="primary-small"><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - primary-small
<Button variant="primary-small" disabled><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - primary
<Button variant="primary"><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - primary
<Button variant="primary" disabled><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - secondary-large
<Button variant="secondary-large"><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - secondary-large
<Button variant="secondary-large" disabled><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - secondary-small
<Button variant="secondary-small"><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - secondary-small
<Button variant="secondary-small" disabled><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - secondary
<Button variant="secondary"><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - secondary
<Button variant="secondary" disabled><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - tertiary-large
<Button variant="tertiary-large"><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - tertiary-large
<Button variant="tertiary-large" disabled><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - tertiary-small
<Button variant="tertiary-small"><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - tertiary-small
<Button variant="tertiary-small" disabled><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - tertiary
<Button variant="tertiary"><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>Knapp - tertiary
<Button variant="tertiary" disabled><PiArrowLeft /><span>Klikk meg!</span><PiArrowRight /></Button>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
Card - default
<Card>{LOREM_IPSUM}</Card>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
Card - elevated
<Card variant="elevated">{LOREM_IPSUM}</Card>Link - default
<Link>Klikk meg!</Link>Link - cta-bold
<Link variant="cta-bold">Klikk meg!</Link>Link - cta-bold-small
<Link variant="cta-bold-small">Klikk meg!</Link>Link - cta-small
<Link variant="cta-small">Klikk meg!</Link>Link - inline
<Link variant="inline">Klikk meg!</Link>Link - menu
<Link variant="menu">Klikk meg!</Link>FileLink
<FileLink href="#a-link.pdf" icon={PiFilePdf}>Lenke til vedlegget.pdf</FileLink>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - title-2xl
<Typography variant="title-2xl">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - title-xl
<Typography variant="title-xl">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - title-lg
<Typography variant="title-lg">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - title-md
<Typography variant="title-md">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - title-sm
<Typography variant="title-sm">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - title-xs
<Typography variant="title-xs">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - title-kicker
<Typography variant="title-kicker">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-3xl
<Typography variant="headline-3xl">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-3xl-italic
<Typography variant="headline-3xl-italic">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-2xl
<Typography variant="headline-2xl">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-2xl-italic
<Typography variant="headline-2xl-italic">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-xl
<Typography variant="headline-xl">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-xl-italic
<Typography variant="headline-xl-italic">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-alt-3xl
<Typography variant="headline-alt-3xl">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-alt-3xl-italic
<Typography variant="headline-alt-3xl-italic">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-alt-2xl
<Typography variant="headline-alt-2xl">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-alt-2xl-italic
<Typography variant="headline-alt-2xl-italic">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-alt-xl
<Typography variant="headline-alt-xl">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - headline-alt-xl-italic
<Typography variant="headline-alt-xl-italic">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - body-xl
<Typography variant="body-xl">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - body-lg
<Typography variant="body-lg">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - body-base
<Typography variant="body-base">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - body-sm
<Typography variant="body-sm">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - body-xs
<Typography variant="body-xs">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - body-base-tight
<Typography variant="body-base-tight">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - body-sm-tight
<Typography variant="body-sm-tight">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - body-xs-tight
<Typography variant="body-xs-tight">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - label-lg
<Typography variant="label-lg">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - label-md
<Typography variant="label-md">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - label-sm
<Typography variant="label-sm">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - quote-lg
<Typography variant="quote-lg">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - quote-md
<Typography variant="quote-md">{LOREM_IPSUM}</Typography>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet
Typography - quote-sm
<Typography variant="quote-sm">{LOREM_IPSUM}</Typography>Tittel på accordion
"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
Accordion
<Accordion icon={PiPackage} title={"Tittel på accordion"}>{LOREM_IPSUM}</Accordion>Omslag kommer
Canvas
<Canvas><BookStencil/></Canvas>Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Stack - carousel
<Stack variant="carousel"><BookStencil/></Stack>Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Omslag kommer
Stack - grid
<Stack variant="grid"><BookStencil/></Stack>Drawer
<Drawer>{LOREM_IPSUM}</Drawer>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
InfoBox
<InfoBox>{LOREM_IPSUM}</InfoBox>Header
<Header>{LOREM_IPSUM}</Header>"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
Page
<Page>{LOREM_IPSUM}</Page>Input
<label htmlFor="input">It is important to assign <code>htmlFor</code> and id to make the <code>label</code> clickable</label><Input id="input" type="text" />aria-invalid="true" aria-errormessage="input-error-error" is on Input
Input
<label htmlFor="input">It is important to assign <code>htmlFor</code> and id to make the <code>label</code> clickable</label><Input id="input" type="text" className="error" />Checkbox
<Checkbox id="checkbox" /><label htmlFor="checkbox">{LOREM_IPSUM.split(".")[0]}</label>Radio
<Radio id="radio" /><label htmlFor="radio">{LOREM_IPSUM.split(".")[0]}</label>Stencil Showcase
Stencil - calm
<StencilShape variant="calm" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - calm-full
<StencilShape variant="calm-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - dark
<StencilShape variant="dark" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - dark-full
<StencilShape variant="dark-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - energetic
<StencilShape variant="energetic" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - energetic-full
<StencilShape variant="energetic-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - intense
<StencilShape variant="intense" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - intense-full
<StencilShape variant="intense-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - mysterious
<StencilShape variant="mysterious" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - mysterious-full
<StencilShape variant="mysterious-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - playful
<StencilShape variant="playful" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - playful-full
<StencilShape variant="playful-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - poetic
<StencilShape variant="poetic" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - poetic-full
<StencilShape variant="poetic-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - serious
<StencilShape variant="serious" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - serious-full
<StencilShape variant="serious-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - thrilling
<StencilShape variant="thrilling" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - thrilling-full
<StencilShape variant="thrilling-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - warm
<StencilShape variant="warm" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>Stencil - warm-full
<StencilShape variant="warm-full" type="image" className="aspect-4/3 w-full">
{imageSrc}
</StencilShape>