Gå til hovedinnhold
KOMPONENTER

Typography

npmv1.8.24

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.
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "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

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';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

LeadParagraph

import { LeadParagraph } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

Paragraph

import { Paragraph } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "bottom" "bottom"

Hvor du vil ha marginer

SubParagraph

import { SubParagraph } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

SmallText

import { SmallText } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

Label

import { Label } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

SubLabel

import { SubLabel } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

StrongText

import { StrongText } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

EmphasizedText

import { EmphasizedText } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

import { Link } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

margin?"none" | "both" | "bottom" | "top" "both"

Hvor du vil ha marginer

ariaLabelExternalIcon?string

PreformattedText

import { PreformattedText } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

CodeText

import { CodeText } from '@entur/typography';
NavnTypeDefault-verdiBeskrivelse
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

childrenReactNode

Innholdet

UnorderedList

import { UnorderedList } from '@entur/typography';
NavnTypeBeskrivelse
className?string

Ekstra klassenavn

children?ReactNode

Innholdet

NumberedList

import { NumberedList } from '@entur/typography';
NavnTypeBeskrivelse
className?string

Ekstra klassenavn

children?ReactNode

Innholdet

ListItem

import { ListItem } from '@entur/typography';
NavnTypeBeskrivelse
className?string

Ekstra klassenavn

children?ReactNode

Innholdet

title?ReactNode

Tittel

Rediger denne siden på Bitbucket