Typography

The Typograpy component is used to write text and content on the sites.

It has built in support for TypeScript and can be used with our without types.

Properties

Props	Default	Beskrivning
variant	' '	The variant is used to implement additional styling to the component.
component	'p'	The component is the semantic tag that will render.
className	' '	Add a class name to add styling.
id	undefined	Renders the href link, if none is provided it will render from the contents inside.
noMargin	false	Removes the margin of the element.
noMarginTop	false	Removes the margin top of the element.
noMarginBottom	false	Removes the margin bottom of the element.
noAnchor	false	Removes the anchor on the element.
inverted	false	Can be built to support dark theme

Usage

Since we are utilising mdx in our system, in .mdx files you can either use markdown to render text nodes or use the Typography component, in order to add styling to the text. If you do not specify the component type it will default to rendering a 'p' tag. The component can semantically be an h1-h5 and p.

Basic functionality

If you do not need to do anything advanced with you component there is no need to complicate things. As previously stated the component will default to a 'p' tag and if this is what you need all you have to do is use the Typography component like this:

<Typography >Some text within a p tag</Typography>

If you would like your component to be one of the different sizes of the 'p' tag you can send in a variant. This will render a p tag of type body-200.

<Typography variant="body200">Some text within a p tag</Typography>

If you want to render a headline that is semantically correct you need to use the component prop. This will provide you with a component that is sematically correct as well as having the default styles for that type of element.

<Typography component="h2">Headline 200</Typography>

Semancally render elements without default styling

Sometimes the sematic tag of the element does not fit in with the design on the page. To still be accessible we do need to render the tag sematically correct, but we want the styling to be different from the default. The variant tag is built to support this behaviour. There are multiple different variants that you can send in depending on the style of the element that you want to use.

See the different varaints that are available here

Semantically h2 looks like a paragraph

<Typography component="h2" variant="body200">Semantically h2 looks like a paragraph</Typography>

Semantically p looks like a h3

<Typography component="p" variant="headline100">Semantically h2 looks like a paragraph</Typography>

Generating a href and anchor

If the component is a heading (h1-h5) it will automatically render an anchor with an href so that the user can hyperlink to that particular heading. If you do not whish to have this behaviour you can opt out by using the noAnchor prop.

Heading with anchor

<Typography component="h5" >Heading with anchor</Typography>

Heading without anchor

<Typography component="h5" noAnchor >Heading without anchor</Typography>

Styling

As you can see in the props table there are multiple boolean values that can be passed in as props, all of these provide som sort of styling to the component. The className prop can be used to send in your custom styles for the componenet, but since we use css modules the styles need to be in the scope of the Typography modules.

inverted

Currently inverted does not do anything, however this can be used if we want to build in a dark theme for the site.

noMargin

The Typography element has a built in margin on top and the bottom, you need to opt out of it by using noMargin if you do not whish to have ot. Removes the top and bottom margin of the element. All Heading-XXX and Subtitle-XXX has a default margin top of 1.5 * it's own size and a margin bottom of it's own size / 2. All Body-XXX has a margin top and a margin bottom of it's own size.

Remember that margins cancel each other out, so the element with the largest margin will determine the air between two adjacent elements if both have margins.

<Typography component="h2" noMargin >Heading without any margin</Typography>

noMarginTop

Removes the top margin of the element.

<Typography component="h2" noMarginTop >Heading without any top margin</Typography>

noMarginBottom

Removes the bottom margin of the element.

<Typography component="h2" noMarginBottom >Heading without any bottom margin</Typography>

There is also use of children, which is the content inside of the brackets. This can be used to render an id and anchor for components h1-h5.