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">
<p class="alert-heading">Informativ besked</p>
<p class="alert-text">Lorem ipsum dolor sit amet, Lorem ipsum dolor
sit amet.</p>
</div>
</div>
Anvend ARIA role="alert"
til at øge tilgængeligheden ved at markere beskeden som noget der skal annonceres gennem eventuelle hjælpeteknologier. Mærk beskeden med role="alertdialog"
, hvis den indeholder interaktivitet for brugeren.
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">
<p class="alert-heading">Informativ besked</p>
<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">
<p class="alert-heading">Succesbesked</p>
<p class="alert-text">Lorem ipsum dolor sit amet, Lorem ipsum dolor
sit amet.</p>
</div>
</div>
Advarsel
Besked med advarsel er orange, og defineres med klassen alert-warning
.
Bemærk, at attributten role="alert"
bør tilføjes i dette tilfælde for at øge tilgængeligheden. Uanset, hvor fokus er på siden, vil beskeden da blive læst op med det samme.
<div class="alert alert-warning" role="alert" aria-atomic="true">
<div class="alert-body">
<p class="alert-heading">Advarsel</p>
<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
.
Bemærk, at attributten role="alert"
bør tilføjes i dette tilfælde for at øge tilgængeligheden. Uanset, hvor fokus er på siden, vil beskeden da blive læst op med det samme.
<div class="alert alert-error" role="alert" aria-atomic="true">
<div class="alert-body">
<p class="alert-heading">Fejl</p>
<p class="alert-text">Lorem ipsum dolor sit amet, Lorem ipsum dolor
sit amet.</p>
</div>
</div>
Ikon
Paragrafbredde
<div class="alert alert-info alert--paragraph">
<div class="alert-body">
<p class="alert-heading">Besked med mindre bredde</p>
<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">
<p class="alert-heading pr-7">Besked med luk</p>
<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" aria-hidden="true" focusable="false"><use xlink:href="#close"></use></svg>Luk</button>
</div>
</div>