import Html.Styled exposing (..)
import Nri.Ui.Outline.V1 as Outline


main : Html msg
main =
    Outline.view []

import Html.Styled exposing (..)
import Nri.Ui.Outline.V1 as Outline exposing (Outline)


myRow : Outline msg
myRow =
    Outline.row
        { title = Just "My node"
        , content = text "This is my content"
        , palette = RowTheme.red
        , rows = []
        }

Aliased strictly for exporting

The row view.

import Html.Styled exposing (..)
import Nri.Ui.Outline.V1 as Outline


main : Html msg
main =
    Outline.viewKeyed [{- Rows go here -}]

Render an unstyled row with only the outline styles.

import Html.Styled exposing (..)
import Nri.Ui.Outline.V1 as Outline


main : Html msg
main =
    Outline.viewKeyed []
        [ Outline.keyedRow someKey
            { title = Just "My outline node"
            , content = text "This is my content"
            , palette = RowTheme.red
            , rows = []
            }
        ]

Render a row with extra content. This row cannot have child rows.

import Html.Styled exposing (..)
import Nri.Ui.Outline.V1 as Outline


main : Html msg
main =
    Outline.view
        [ Outline.keyedRowWithExtraContent someKey
            { title = Just "My outline node"
            , content = text "This is my content"
            , palette = RowTheme.red
            , extraContent = text "My extra content"
            , rows = []
            }
        ]

White palette (borders are blue)

Dark Gray palette

Blue palette

Dark blue palette

Purple palette with a purple border instead of a purple background color

Turquoise palette

Green palette

Red palette

Aqua palette

Cornflower palette

Blue palette

Purple palette with a purple border instead of a purple background color

Green palette with a green border instead of a green background color