Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

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

<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

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