KOMPONENTER

Typography

npmv1.8.49

Retningslinjer for bruk av typografi står beskrevet under Visuell identitet.

npm install @entur/typography

@import '@entur/typography/dist/styles.css';

Det er definert en typografisk skala, hvor vi bruker ulike fontstørrelser for å skape typografisk hierarki i teksten. Dette er den typografiske skalaen for løpende brødtekst og titler, navngitt etter “heading” nummerering i synkende skala der øverste nivå er H1, deretter H2, H3 osv.

Tabellen viser hvilke størrelser og linjeavstander vi skal bruke når vi designer for web. Ved å kombinere ulike fontstørrelser på en god måte kan vi skape et tydelig hierarki og en struktur som gjør det enklere for leseren å forstå og navigere seg gjennom tekstene våre.

Tekstavstand:

Tekstavstanden skal kunne overstyres for å gjøre teksten lettere å lese. Suksesskriterium for tekstavstand er følgende:

Linjehøyde (linjeavstand) angis til minst 1,5 ganger skriftstørrelsen.
Avstand etter avsnitt angis til minst 2 ganger skriftstørrelsen.
Avstanden mellom bokstaver i blokker av tekst (sperring) angis til minst 0,12 ganger skriftstørrelsen.
Avstanden mellom ord angis til minst 0,16 ganger skriftstørrelsen.

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"h1"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer

Overskrifter

Vi har egne komponenter for hver overskriftstype - en for hvert av de 6 nivåene vi støtter.

Ingress

Ingressen er et kort avsnitt som normalt kommer etter tittelen på en side.

Vanlig tekst

Vi har tre nivåer med tekst - "paragraph", "sub paragraph" og "small text".

Label-tekst

Vi har to nivåer med "label"-tekst - "label" og "sub label".

Lister

Du har to forskjellige listetyper - usortert og nummerert.

Andre typografiske elementer

Blockquote

Link

CSS properties

Vi eksponerer noen CSS-properties fra denne pakken, som kan brukes på tvers av andre komponenter. Disse er:

--primary-background-color;
--primary-text-color;
--primary-label-color;

De vil bli dokumentert bedre etterhvert, men vil være de aktuelle hovedfargene for gitt tema og modus.

Komponenter

Heading1-6

import { Heading1, Heading2, Heading3, Heading4, Heading5, Heading6 } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"h1"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer

LeadParagraph

import { LeadParagraph } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"p"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer

Paragraph

import { Paragraph } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"p"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "bottom"`	`"bottom"`	Hvor du vil ha marginer

SubParagraph

import { SubParagraph } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"p"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer

SmallText

import { SmallText } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"span"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer

Label

import { Label } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"label"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer

SubLabel

import { SubLabel } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"span"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer

StrongText

import { StrongText } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"strong"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer

EmphasizedText

import { EmphasizedText } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"em"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer

Link

import { Link } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`external?`	`boolean`
`as?`	`string \| React.ElementType`	`"a"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet
`margin?`	`"none" \| "both" \| "top" \| "bottom"`	`"both"`	Hvor du vil ha marginer
`ariaLabelExternalIcon?`	`string`

PreformattedText

import { PreformattedText } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"pre"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet

CodeText

import { CodeText } from '@entur/typography';

Navn	Type	Default-verdi	Beskrivelse
`as?`	`string \| React.ElementType`	`"code"`	HTML-elementet eller React-komponenten som rendres An override of the default HTML tag. Can also be another React component.
`className?`	`string`		Ekstra klassenavn
`children`	`ReactNode`		Innholdet

UnorderedList

import { UnorderedList } from '@entur/typography';

Navn	Type	Beskrivelse
`className?`	`string`	Ekstra klassenavn
`children?`	`ReactNode`	Innholdet

NumberedList

import { NumberedList } from '@entur/typography';

Navn	Type	Beskrivelse
`className?`	`string`	Ekstra klassenavn
`children?`	`ReactNode`	Innholdet

ListItem

import { ListItem } from '@entur/typography';

Navn	Type	Beskrivelse
`className?`	`string`	Ekstra klassenavn
`children?`	`ReactNode`	Innholdet
`title?`	`ReactNode`	Tittel

Props, alle typografikomponenter

Overskrifter

Ingress

Vanlig tekst

Label-tekst

Lister

Andre typografiske elementer

Blockquote

Link

CSS properties

Komponenter

Heading1-6

Props

LeadParagraph

Props

Paragraph

Props

SubParagraph

Props

SmallText

Props

Label

Props

SubLabel

Props

StrongText

Props

EmphasizedText

Props

Link

Props

PreformattedText

Props

CodeText

Props

UnorderedList

Props

NumberedList

Props

ListItem

Props