Heading

Rubrik, h1, h2, h3, h4, h5, h6

Storybook

React Aria

Rubrik med fördefinierad stil.

import { Heading } from '@midas-ds/components'

<Heading level={2}>Jag är en vanlig h2-rubrik</Heading>

Jag är en vanlig h2-rubrik

Varianter

Nivå

Använd egenskapen level för att justera rubrikens nivå.

<Heading level={3}>Jag är en vanlig h3-rubrik</Heading>

Jag är en vanlig h3-rubrik

Inbyggda marginaler

Använd egenskapen enableMargins för att aktivera inbyggda marginaler ovan och under rubriken.

<Text elementType='p'>En inledande paragraf</Text>
<Heading
  level={2}
  enableMargins
>
  Jag är en vanlig h2-rubrik med inbyggda marginaler
</Heading>
<Text elementType='p'>Rubrikens marginaler fick denna paragraf att flytta på sig lite</Text>

En inledande paragraf

Jag är en vanlig h2-rubrik med inbyggda marginaler

Rubrikens marginaler fick denna paragraf att flytta på sig lite

Extern

Använd egenskapen isExpressive för ett externt och luftigare utseende.

<Heading
  level={2}
  isExpressive
>
  Jag är en luftig h2-rubrik
</Heading>

Jag är en luftig h2-rubrik

Val av semantiskt element

Egenskapen elementType kan användas för att ändra rubrikens semantiska nivå utan att påverka utseendet.

<Heading
  level={1}
  elementType='h3'
>
  Jag är h3:a som ser ut som en vanlig h1:a
</Heading>

Jag är h3:a som ser ut som en vanlig h1:a

API

Heading

Name	Type	Default	Description
elementType	"h1" | "h2" | "h3" | "h4" | "h5" | "h6"	-	Override the semantic element of the component but keep the look of the level property
enableMargins	boolean	false	Enable top and bottom margins
isExpressive	boolean	false	Use the external/expressive look
level	number	3
render	DOMRenderFunction<"h1", undefined>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.