This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0
README

Html.Template

This is a large amount of html elements for showcasing styles on a single page. Helpful for if you're creating things like styleguides, resets, or other css related libraries and need a quick, large set of HTML elements to showcase those styles.

Html Template

view : Html a

The html template view for use in your view functions

module MyModule exposing (..)

import Html exposing (Html, div)
import Html.Template

main : Html a
main =
    div []
        [ Html.Template.view
        ]
module Html.Template exposing (view)

{-| This is a large amount of html elements for showcasing styles on a single page. Helpful
for if you're creating things like styleguides, resets, or other css related libraries and need
a quick, large set of HTML elements to showcase those styles.

# Html Template
@docs view

-}

import Html exposing (..)
import Html.Attributes exposing (..)
import Svg
import Svg.Attributes


{-| The html template view for use in your view functions

    module MyModule exposing (..)

    import Html exposing (Html, div)
    import Html.Template

    main : Html a
    main =
        div []
            [ Html.Template.view
            ]
-}
view : Html a
view =
    div [ id "top" ]
        [ header []
            [ h1 [] [ text "Css.Normalize Test page" ]
            , p [] [ text "This page shows off the normalized styles of basic HTML elements" ]
            ]
        , nav []
            [ ul []
                [ li []
                    [ a [ href "#text" ] [ text "Text" ]
                    , ul []
                        [ li [] [ a [ href "#text__headings" ] [ text "Headings" ] ]
                        , li [] [ a [ href "#text__paragraphs" ] [ text "Paragraphs" ] ]
                        , li [] [ a [ href "#text__blockquotes" ] [ text "Blockquotes" ] ]
                        , li [] [ a [ href "#text__lists" ] [ text "Lists" ] ]
                        , li [] [ a [ href "#text__hr" ] [ text "Horizontal rules" ] ]
                        , li [] [ a [ href "#text__tables" ] [ text "Tabular data" ] ]
                        , li [] [ a [ href "#text__code" ] [ text "Code" ] ]
                        , li [] [ a [ href "#text__inline" ] [ text "Inline elements" ] ]
                        ]
                    ]
                , li []
                    [ a [ href "#embedded" ] [ text "Embedded content" ]
                    , ul []
                        [ li [] [ a [ href "#embedded__images" ] [ text "Images" ] ]
                        , li [] [ a [ href "#embedded__audio" ] [ text "Audio" ] ]
                        , li [] [ a [ href "#embedded__video" ] [ text "Video" ] ]
                        , li [] [ a [ href "#embedded__canvas" ] [ text "Canvas" ] ]
                        , li [] [ a [ href "#embedded__meter" ] [ text "Meter" ] ]
                        , li [] [ a [ href "#embedded__progress" ] [ text "Progress" ] ]
                        , li [] [ a [ href "#embedded__svg" ] [ text "Inline" ] ]
                        , li [] [ a [ href "#embedded__iframe" ] [ text "IFrames" ] ]
                        ]
                    ]
                , li []
                    [ a [ href "#forms" ] [ text "Form elements" ]
                    , ul []
                        [ li [] [ a [ href "#forms__input" ] [ text "Inputfields" ] ]
                        , li [] [ a [ href "#forms__select" ] [ text "Select" ] ]
                        , li [] [ a [ href "#forms__checkbox" ] [ text "Checkboxes" ] ]
                        , li [] [ a [ href "#forms__radio" ] [ text "Radio buttons" ] ]
                        , li [] [ a [ href "#forms__textareas" ] [ text "Textareas" ] ]
                        , li [] [ a [ href "#forms__html5" ] [ text "HTML5 inputs" ] ]
                        , li [] [ a [ href "#forms__action" ] [ text "Action buttons" ] ]
                        ]
                    ]
                ]
            ]
        , main_ []
            [ section [ id "text" ]
                [ header [] [ h1 [] [ text "Text" ] ]
                , article [ id "text__headings" ]
                    [ header [] [ h1 [] [ text "Headings " ] ]
                    , div []
                        [ h1 [] [ text "Header 1" ]
                        , h2 [] [ text "Header 2" ]
                        , h3 [] [ text "Header 3" ]
                        , h4 [] [ text "Header 4" ]
                        , h5 [] [ text "Header 5" ]
                        , h6 [] [ text "Header 6" ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "text__paragraphs" ]
                    [ header [] [ h1 [] [ text "Paragraphs" ] ]
                    , div []
                        [ p []
                            [ text "A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose." ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "text__blockquotes" ]
                    [ header [] [ h1 [] [ text "Blockquotes" ] ]
                    , div []
                        [ blockquote []
                            [ p [] [ text "A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text." ]
                            , p [] [ text "It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom." ]
                            , Html.cite [] [ a [ href "#!" ] [ text "Said no one, ever." ] ]
                            ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "text__lists" ]
                    [ header [] [ h1 [] [ text "Lists" ] ]
                    , div []
                        [ h3 [] [ text "Defintion list" ]
                        , dl []
                            [ dt [] [ text "Definition List Title" ]
                            , dd [] [ text "This is a definition list division." ]
                            ]
                        , h3 [] [ text "Ordered List" ]
                        , ol []
                            [ li [] [ text "List Item 1" ]
                            , li [] [ text "List Item 2" ]
                            , li [] [ text "List Item 3" ]
                            ]
                        , h3 [] [ text "Unordered List" ]
                        , ul []
                            [ li [] [ text "List Item 1" ]
                            , li [] [ text "List Item 2" ]
                            , li [] [ text "List Item 3" ]
                            ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "text__hr" ]
                    [ header [] [ h1 [] [ text "Horizontal rules" ] ]
                    , div [] [ hr [] [] ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "text__tables" ]
                    [ header [] [ h1 [] [ text "Tabular data" ] ]
                    , table []
                        [ caption [] [ text "Table Caption" ]
                        , thead []
                            [ tr []
                                [ th [] [ text "Table Header 1" ]
                                , th [] [ text "Table Header 2" ]
                                , th [] [ text "Table Header 3" ]
                                , th [] [ text "Table Header 4" ]
                                , th [] [ text "Table Header 5" ]
                                ]
                            ]
                        , tfoot []
                            [ tr []
                                [ th [] [ text "Table Footer 1" ]
                                , th [] [ text "Table Footer 2" ]
                                , th [] [ text "Table Footer 3" ]
                                , th [] [ text "Table Footer 4" ]
                                , th [] [ text "Table Footer 5" ]
                                ]
                            ]
                        , tbody []
                            [ tr []
                                [ td [] [ text "Table Cell 1" ]
                                , td [] [ text "Table Cell 2" ]
                                , td [] [ text "Table Cell 3" ]
                                , td [] [ text "Table Cell 4" ]
                                , td [] [ text "Table Cell 5" ]
                                ]
                            , tr []
                                [ td [] [ text "Table Cell 1" ]
                                , td [] [ text "Table Cell 2" ]
                                , td [] [ text "Table Cell 3" ]
                                , td [] [ text "Table Cell 4" ]
                                , td [] [ text "Table Cell 5" ]
                                ]
                            , tr []
                                [ td [] [ text "Table Cell 1" ]
                                , td [] [ text "Table Cell 2" ]
                                , td [] [ text "Table Cell 3" ]
                                , td [] [ text "Table Cell 4" ]
                                , td [] [ text "Table Cell 5" ]
                                ]
                            ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "text__code" ]
                    [ header [] [ h1 [] [ text "Code" ] ]
                    , div []
                        [ p []
                            [ strong [] [ text "Keyboard input: " ]
                            , kbd [] [ text "Cmd" ]
                            ]
                        , p []
                            [ strong [] [ text "Inline code: " ]
                            , code [] [ text "<div>code</div>" ]
                            ]
                        , p []
                            [ strong [] [ text "Sample output: " ]
                            , samp [] [ text "This is sample output from a computer program." ]
                            ]
                        , h2 [] [ text "Pre-formatted text" ]
                        , pre []
                            [ text """
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - .
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z   ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
                            """
                            ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "text__inline" ]
                    [ header [] [ h1 [] [ text "Inline elements" ] ]
                    , div []
                        [ p [] [ a [ href "#!" ] [ text "This is a text link" ] ]
                        , p [] [ strong [] [ text "Strong is used to indicate strong importance." ] ]
                        , p [] [ em [] [ text "This text as added emphasis." ] ]
                        , p []
                            [ text "The "
                            , b [] [ text "b element " ]
                            , text "is stylistically different text from normal text, wihtout any special importance"
                            ]
                        , p []
                            [ text "The "
                            , i [] [ text "i element " ]
                            , text "is text that is offset from the normal text."
                            ]
                        , p []
                            [ text "The "
                            , u [] [ text "u element " ]
                            , text "is text with an unarticulated, though explicitly rendered, non-textual annotation."
                            ]
                        , p []
                            [ del [] [ text "This text is deleted" ]
                            , text " and "
                            , ins [] [ text "This text is inserted" ]
                            ]
                        , p [] [ s [] [ text "This text has a strikethrough" ] ]
                        , p [] [ text "Superscript", sup [] [ text "®" ] ]
                        , p []
                            [ text "Subscript for things like H"
                            , sub [] [ text "2" ]
                            , text "O."
                            ]
                        , p [] [ small [] [ text "This small text is small for for fine print, etc." ] ]
                        , p [] [ text "Abbreviation: ", abbr [ title "HyperText Markup Language" ] [ text "HTML" ] ]
                        , p [] [ q [ Html.Attributes.cite "https://developer.mozilla.org/en-US/docs/HTML/Element/q" ] [ text "This text is a short inline quotation." ] ]
                        , p [] [ Html.cite [] [ text "This is a citation." ] ]
                        , p []
                            [ text "The "
                            , dfn [] [ text "dfn element" ]
                            , text " indicates a definition."
                            ]
                        , p []
                            [ text "The "
                            , mark [] [ text "mark element" ]
                            , text " indicates a highlight."
                            ]
                        , p []
                            [ text "The "
                            , var [] [ text "variable element" ]
                            , text ", such as "
                            , var [] [ text "x" ]
                            , text " = "
                            , var [] [ text "y" ]
                            , text "."
                            ]
                        , p []
                            [ text "The time element: "
                            , time [ datetime "2013-04-06T12:32+00:00" ] [ text "2 weeks ago" ]
                            ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                ]
            , section [ id "embedded" ]
                [ header [] [ h1 [] [ text "Embedded content" ] ]
                , article [ id "embedded__images" ]
                    [ header [] [ h2 [] [ text "Images" ] ]
                    , div []
                        [ h3 []
                            [ text "No "
                            , code [] [ text "<figure>" ]
                            , text " element"
                            ]
                        , p [] [ img [ src "http://placekitten.com/480/480", alt "Image alt text" ] [] ]
                        , h3 []
                            [ text "wrapped in a "
                            , code [] [ text "<figure>" ]
                            , text " element, no "
                            , code [] [ text "<figcaption>" ]
                            ]
                        , figure []
                            [ img [ src "http://placekitten.com/420/420", alt "Image alt text" ] []
                            ]
                        , h3 []
                            [ text "Wrapped in a "
                            , code [] [ text "<figure>" ]
                            , text " element, with a "
                            , code [] [ text "<figcaption>" ]
                            ]
                        , figure []
                            [ img [ src "http://placekitten.com/420/420", alt "Image alt text" ] []
                            , figcaption [] [ text "Here is a caption for this image." ]
                            ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "embedded__audio" ]
                    [ header [] [ h2 [] [ text "Audio" ] ]
                    , div [] [ audio [ controls True ] [] ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "embedded__video" ]
                    [ header [] [ h2 [] [ text "Video" ] ]
                    , div [] [ video [ controls True ] [] ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "embedded__canvas" ]
                    [ header [] [ h2 [] [ text "Canvas" ] ]
                    , div [] [ canvas [] [ text "canvas" ] ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "embedded__meter" ]
                    [ header [] [ h2 [] [ text "Meter" ] ]
                    , div []
                        [ meter
                            [ value "2"
                            , Html.Attributes.min "0"
                            , Html.Attributes.max "10"
                            ]
                            [ text "2 out of 10" ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "embedded__progress" ]
                    [ header [] [ h2 [] [ text "Progress" ] ]
                    , div [] [ progress [] [ text "progress" ] ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "embedded__svg" ]
                    [ header [] [ h2 [] [ text "Inline SVG" ] ]
                    , div []
                        [ Svg.svg
                            [ Svg.Attributes.width "100px"
                            , Svg.Attributes.height "100px"
                            ]
                            [ Svg.circle
                                [ Svg.Attributes.cx "100"
                                , Svg.Attributes.cy "100"
                                , Svg.Attributes.r "100"
                                , Svg.Attributes.fill "#1fa3ec"
                                ]
                                []
                            ]
                        ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                , article [ id "embedded__iframe" ]
                    [ header [] [ h2 [] [ text "IFrame" ] ]
                    , div [] [ iframe [ src "index.html", height 300 ] [] ]
                    , footer [] [ p [] [ a [ href "#top" ] [ text "[Top]" ] ] ]
                    ]
                ]
            , section [ id "forms" ]
                [ header [] [ h1 [] [ text "Form elements" ] ]
                , Html.form []
                    [ fieldset [ id "forms__fieldset" ]
                        [ legend [] [ text "Input fields" ]
                        , p []
                            [ label [ for "input__text" ] [ text "Text Input" ]
                            , input [ id "input__text", type_ "text", placeholder "Text Input" ] []
                            ]
                        , p []
                            [ label [ for "input__password" ] [ text "Password" ]
                            , input [ id "input__password", type_ "password", placeholder "Type your Password" ] []
                            ]
                        , p []
                            [ label [ for "input__webaddress" ] [ text "Web Address" ]
                            , input [ id "input__webaddress", type_ "url", placeholder "http://elm-lang.org" ] []
                            ]
                        , p []
                            [ label [ for "input__emailaddress" ] [ text "Email Address" ]
                            , input [ id "input__emailaddress", type_ "email", placeholder "asdf@asdf.com" ] []
                            ]
                        , p []
                            [ label [ for "input__phone" ] [ text "Phone Number" ]
                            , input [ id "input__phone", type_ "tel", placeholder "(999) 999-9999" ] []
                            ]
                        , p []
                            [ label [ for "input__search" ] [ text "Search" ]
                            , input [ id "input__search", type_ "search", placeholder "Enter Search Term" ] []
                            ]
                        , p []
                            [ label [ for "input__text2" ] [ text "Number Input" ]
                            , input [ id "input__text2", type_ "number", placeholder "Enter a Number" ] []
                            ]
                        ]
                    ]
                , p [] [ a [ href "#top" ] [ text "[Top]" ] ]
                , fieldset [ id "forms__select" ]
                    [ legend [] [ text "Select menus" ]
                    , p []
                        [ label [ for "select" ] [ text "Select" ]
                        , select [ id "select" ]
                            [ optgroup []
                                [ option [] [ text "Option One" ]
                                , option [] [ text "Option Two" ]
                                , option [] [ text "Option Three" ]
                                ]
                            ]
                        ]
                    ]
                , p [] [ a [ href "#top" ] [ text "[Top]" ] ]
                , fieldset [ id "forms__checkbox" ]
                    [ legend [] [ text "Checkboxes" ]
                    , ul []
                        [ li []
                            [ label [ for "checkbox1" ]
                                [ input
                                    [ id "checkbox1"
                                    , name "checkbox"
                                    , type_ "checkbox"
                                    , checked True
                                    ]
                                    []
                                , text "Choice A"
                                ]
                            ]
                        , li []
                            [ label [ for "checkbox2" ]
                                [ input
                                    [ id "checkbox2"
                                    , name "checkbox"
                                    , type_ "checkbox"
                                    ]
                                    []
                                , text "Choice B"
                                ]
                            ]
                        , li []
                            [ label [ for "checkbox3" ]
                                [ input
                                    [ id "checkbox3"
                                    , name "checkbox"
                                    , type_ "checkbox"
                                    ]
                                    []
                                , text "Choice C"
                                ]
                            ]
                        ]
                    ]
                , p [] [ a [ href "#top" ] [ text "[Top]" ] ]
                , fieldset [ id "forms__radio" ]
                    [ legend [] [ text "Radio Buttons" ]
                    , ul []
                        [ li []
                            [ label [ for "radio1" ]
                                [ input
                                    [ id "radio1"
                                    , name "radio"
                                    , type_ "radio"
                                    , checked True
                                    ]
                                    []
                                , text "Option 1"
                                ]
                            ]
                        , li []
                            [ label [ for "radio2" ]
                                [ input
                                    [ id "radio2"
                                    , name "radio"
                                    , type_ "radio"
                                    ]
                                    []
                                , text "Option 2"
                                ]
                            ]
                        , li []
                            [ label [ for "radio3" ]
                                [ input
                                    [ id "radio1"
                                    , name "radio"
                                    , type_ "radio"
                                    ]
                                    []
                                , text "Option 3"
                                ]
                            ]
                        ]
                    ]
                , p [] [ a [ href "#top" ] [ text "[Top]" ] ]
                , fieldset [ id "formst__textareas" ]
                    [ legend [] [ text "Textareas" ]
                    , p []
                        [ label [ for "textarea" ] [ text "Textarea" ]
                        , textarea
                            [ id "textarea"
                            , rows 8
                            , cols 48
                            , placeholder "Enter your message here"
                            ]
                            []
                        ]
                    ]
                , p [] [ a [ href "#top" ] [ text "[Top]" ] ]
                , fieldset [ id "forms__html5" ]
                    [ legend [] [ text "HTML5 inputs" ]
                    , p []
                        [ label [ for "ic" ] [ text "Color input" ]
                        , input
                            [ type_ "color"
                            , id "ic"
                            , value "#000000"
                            ]
                            []
                        ]
                    , p []
                        [ label [ for "in" ] [ text "Number input" ]
                        , input
                            [ type_ "number"
                            , id "in"
                            , Html.Attributes.min "0"
                            , Html.Attributes.max "10"
                            , value "5"
                            ]
                            []
                        ]
                    , p []
                        [ label [ for "ir" ] [ text "Range input" ]
                        , input
                            [ type_ "range"
                            , id "ir"
                            , value "10"
                            ]
                            []
                        ]
                    , p []
                        [ label [ for "idd" ] [ text "Date input" ]
                        , input
                            [ type_ "date"
                            , id "idd"
                            , value "1970-01-01"
                            ]
                            []
                        ]
                    , p []
                        [ label [ for "idm" ] [ text "Month input" ]
                        , input
                            [ type_ "month"
                            , id "idm"
                            , value "1970-01"
                            ]
                            []
                        ]
                    , p []
                        [ label [ for "idw" ] [ text "Week input" ]
                        , input
                            [ type_ "week"
                            , id "idw"
                            , value "1970-W01"
                            ]
                            []
                        ]
                    , p []
                        [ label [ for "idt" ] [ text "Datetime input" ]
                        , input
                            [ type_ "datetime"
                            , id "idt"
                            , value "1970-01-01T00:00:00Z"
                            ]
                            []
                        ]
                    , p []
                        [ label [ for "idtl" ] [ text "Datetime-local input" ]
                        , input
                            [ type_ "datetime-local"
                            , id "idtl"
                            , value "1970-01-01T00:00"
                            ]
                            []
                        ]
                    ]
                ]
            , p [] [ a [ href "#top" ] [ text "[Top]" ] ]
            , fieldset [ id "forms__action" ]
                [ legend [] [ text "Action buttons" ]
                , p []
                    [ input [ type_ "submit", value "<input type=submit>" ] []
                    , input [ type_ "button", value "<input type=button>" ] []
                    , input [ type_ "reset", value "<input type=reset>" ] []
                    , input [ type_ "submit", value "<input disabled>", disabled True ] []
                    ]
                , p []
                    [ button [ type_ "submit" ] [ text "<button type=submit>" ]
                    , button [ type_ "button" ] [ text "<button type=button>" ]
                    , button [ type_ "reset" ] [ text "<button type=reset>" ]
                    , button [ type_ "button", disabled True ] [ text "<button disabled>" ]
                    ]
                ]
            , p [] [ a [ href "#top" ] [ text "[Top]" ] ]
            ]
        , footer []
            [ p []
                [ text "Ported from "
                , a
                    [ href "https://github.com/necolas/normalize.css/blob/master/test.html"
                    , target "_blank"
                    ]
                    [ text "normalize.css test page." ]
                ]
            , p []
                [ text "Shout out to "
                , a [ href "http://twitter.com/cbracco", target "_blank" ] [ text "@cbracco" ]
                ]
            ]
        ]