Beskeder (Alerts)

• Farver
• Beskeder med ikon
• Paragrafbredde
• Luk knap

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

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

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.

<div class="alert alert-info alert--show-icon">
    <div class="alert-body">
        <h4 class="alert-heading">Informativ besked - med ikon</h4>
        <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">
    <div class="alert-body">
        <h4 class="alert-heading">Succesmeddelelse - med ikon</h4>
        <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">
    <div class="alert-body">
        <h4 class="alert-heading">Advarsel - med ikon</h4>
        <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">
    <div class="alert-body">
        <h4 class="alert-heading">Fejlbesked - med ikon</h4>
        <p class="alert-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>

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>