Gå til sidens indhold

Vælg et tema

Luk

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.

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" aria-label="Beskedbox der viser information">
    <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" aria-label="Beskedbox der viser succes">
    <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" aria-label="Beskedbox der viser en advarsel">
    <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" aria-label="Beskedbox der viser en fejlmeddelelse">
    <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><a href="javascript:void(0);"
            class="alert-close"><svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#close"></use></svg>Luk</a>
    </div>
</div>