Designsystemet.List

Bulleted and numbered lists with Designsystemet's spacing.

Mirrors List from @digdir/designsystemet-react.

Import it under another name so it doesn't shadow List from elm/core:

import Designsystemet.List as DsList


DsList.ordered []
    [ DsList.item [] [ Html.text "Fyll ut skjemaet" ]
    , DsList.item [] [ Html.text "Last opp vedlegg" ]
    , DsList.item [] [ Html.text "Send inn" ]
    ]

React → Elm

<List.Unordered> → DsList.unordered []
<List.Ordered> → DsList.ordered []
<List.Item> → DsList.item []

asChild is not ported. The styling is just the ds-list class, so Html.menu [ Attr.class "ds-list" ] does the same, and List.Item adds no markup.

unordered : List (Attribute msg) -> List (Html msg) -> Html msg

A <ul class="ds-list">, for items in no particular order.

ordered : List (Attribute msg) -> List (Html msg) -> Html msg

An <ol class="ds-list">, for steps or rankings where the order matters. Attr.start and Attr.reversed work as usual.

item : List (Attribute msg) -> List (Html msg) -> Html msg

An <li>. Nest a list inside it for sub-items; the CSS tightens nested spacing.

ensolabs/designsystemet-elm/1.0.0

Designsystemet.List

React → Elm

Modules

Basics

Actions

Forms

Navigation

Overlays

Feedback

Content