Kode

Beskeder (Alerts)

Farver
Beskeder med ikon
Paragrafbredde
Luk knap

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.

Vis dette eksempel i et nyt vindue

<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.

Vis dette eksempel i et nyt vindue

<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.

Vis dette eksempel i et nyt vindue

<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.

Vis dette eksempel i et nyt vindue

<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

Vis dette eksempel i et nyt vindue

<div class="alert alert-info alert--show-icon" role="alert"
    aria-atomic="true">
    <div class="alert-body">
        <p class="alert-heading">Informativ besked - med ikon</p>
        <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
            error sit voluptatem accusantium doloremque laudantium.</p>
    </div>
</div>

<div class="alert alert-success alert--show-icon" role="alert"
    aria-atomic="true">
    <div class="alert-body">
        <p class="alert-heading">Succesmeddelelse - med ikon</p>
        <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
            error sit voluptatem accusantium doloremque laudantium.</p>
    </div>
</div>

<div class="alert alert-warning alert--show-icon" role="alert"
    aria-atomic="true">
    <div class="alert-body">
        <p class="alert-heading">Advarsel - med ikon</p>
        <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
            error sit voluptatem accusantium doloremque laudantium.</p>
    </div>
</div>

<div class="alert alert-error alert--show-icon" role="alert"
    aria-atomic="true">
    <div class="alert-body">
        <p class="alert-heading">Fejlbesked - med ikon</p>
        <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
            error sit voluptatem accusantium doloremque laudantium.</p>
    </div>
</div>

Paragrafbredde

Vis dette eksempel i et nyt vindue

<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

Vis dette eksempel i et nyt vindue

<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>