Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Beskeder (Alerts)
Informativ besked
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="alert alert-info">
<div class="alert-body">
<h2 class="alert-heading">Informativ besked</h2>
<p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
</div>
</div>
Anvend role="alert"
til beskeder, der skal læses højt af en skærmlæser med det samme, hvis indholdet ændrer sig. Dette kan for eksempel være en besked, der bliver synlig efter at have været skjult eller hvor indholdet ændrer sig. Advarsler og fejlbeskeder bør altid være markeret med role="alert"
.
Hvis beskeden indeholder en alert-heading
, sørg da for at benytte et html-element, der passer ind i konteksten på siden. Dette vil som regel være en overskrift, for eksempel <h3>
, eller et <strong>
-element.
Javascript
Man kan bruge nedenstående JavaScript for at sætte events på luk-knappen i beskederne. Det er kun nødvendigt, hvis man gør brug af luk-knappen.
Man kan enten gøre brug af DKFDS.init()
eller initiere komponenten manuelt med nedenstående:
new DKFDS.Alert(document.getElementById('ALERT-ID')).init();
Events
Event key | Element | Beskrivelse |
---|---|---|
fds.alert.show | div.alert |
Når en besked bliver vist med DKFDS.Alert(document.getElementById('ALERT-ID')).show(); bliver fds.alert.show udløst på beskedelementet |
fds.alert.hide | div.alert |
Når en besked bliver skjult med DKFDS.Alert(document.getElementById('ALERT-ID')).hide(); eller der trykkes på luk bliver fds.alert.hide udløst på beskedelementet |
Varianter
Farver
Informativ
Informativ er blå, og defineres med klassen alert-info
.
<div class="alert alert-info">
<div class="alert-body">
<h2 class="alert-heading">Informativ besked</h2>
<p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
</div>
</div>
Succes
Succesbesked er grøn, og defineres med klassen alert-success
.
<div class="alert alert-success">
<div class="alert-body">
<h3 class="alert-heading">Succesbesked</h3>
<p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
</div>
</div>
Advarsel
Besked med advarsel er gul, og defineres med klassen alert-warning
.
<div class="alert alert-warning" role="alert">
<div class="alert-body">
<h3 class="alert-heading">Advarsel</h3>
<p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
</div>
</div>
Fejl
Besked med fejl er rød, og defineres med klassen alert-error
.
<div class="alert alert-error" role="alert">
<div class="alert-body">
<h3 class="alert-heading">Fejl</h3>
<p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
</div>
</div>
Ikon
Defineres med klassen alert--show-icon
.
Paragrafbredde
Defineres med klassen alert--paragraph
.
<div class="alert alert-info alert--paragraph">
<div class="alert-body">
<h3 class="alert-heading">Besked med mindre bredde</h3>
<p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
</div>
</div>
Luk knap
<div class="alert alert-info has-close">
<div class="alert-body">
<h4 class="alert-heading pr-7">Besked med luk</h4>
<p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
<button type="button" class="alert-close">
<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#close"></use></svg>Luk
</button>
</div>
</div>