Detaljer

Sådan bruges komponenten

Anvendes til

Anvendes til at gøre siden lettere for brugeren at skimme ved at skjule information, som de fleste brugere ikke vil have brug for, og som derfor ikke bør dominere brugergrænsefladen.

Anvendes ikke til

Anvendes ikke som erstatning for accordions.

Anvendes ikke til indhold, som de fleste brugere behøver at læse såsom sidens brødtekst.

Anvendes ikke til at skjule navigationselementer såsom accordions, faneblade eller flere detaljer.

Anvendes ikke til at vise indhold, som er afhængigt af brugerinput. Se i stedet radioknap med skjult indhold og tjekbokse med skjult indhold.

Vejledning

Hold det enkelt. Hvis du har behov for at eksponere større mængder af ekstra funktionalitet eller indhold, bør du overveje at fordele det ud over flere sider i stedet.

Skjult indhold skal fortsat overholde dokumentets outline (overskriftshierarki) og tilgængelighedskrav.

Placér aldrig detaljer inden i et andet detaljeelement, da dette kan forvirre brugeren. Undgå generelt for mange interaktionsniveauer.

Se komponenten i eksempelløsninger

• Sagsoversigt: Find sag
• Sagsoversigt: Afgørelser

Installation

HTML Struktur

<details class="details">
    <summary class="details-summary">Mere information</summary>
    <div class="details-text">
        <p>Pellentesque nulla mi, pulvinar id blandit eu, volutpat at libero. Integer euismod
            augue leo. </p>
        <p>Morbi faucibus nunc tortor, condimentum vulputate urna sollicitudin non. Nam
            commodo nulla metus. Phasellus varius eu dolor nec ultricies. Lorem ipsum dolor
            sit amet, consectetur adipiscing elit. Mauris ac leo finibus, blandit velit nec,
            consequat est. Nulla facilisi.</p>
    </div>
</details>