Logo

Logotyp

Storybook

På webbsida och e-tjänster ska Migrationsverkets officiella logotyp, den röda bron tillsammans med namnet, finnas.

<Logo />

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

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

Varianter

Logotypen finns i fyra olika storlekar (xsmall, small, medium och large) samt med eller utan bakgrund. X-small skiljer sig från de andra då det endast är ett M. Den används när skärmstorleken är mindre än 380px för spara plats i headern.

X-small

<Logo size="x-small" />
<Logo primary={false} size="x-small" />

Small

<Logo size='small' />
<Logo primary={false} size='small'/>

Medium

<Logo size="medium" />
<Logo primary={false} size="medium" />

Large

<Logo size="large" />
<Logo primary={false} size="large" />

Logotyp i SVG-format

För de fall där komponenten inte kan användas tilhandahåller vi även logotypen som SVG. I paketet finns två SVG-filer, en med logotypen och en med bara M:et för små skärmar.

Ladda ner logotypen som SVG (komprimerad fil)

API

Name	Type	Default	Description
primary	boolean	true	Display logo in primary color, set to false for monochrome/dark version of the logo
size	"small" | "x-small" | "medium" | "large"	medium	Specify logo size
padding	boolean	true	There must be whitespace around the logo. By disabling our built in padding you must add at least an equal amount yourself.