A white box to contain other elements. The box is simply a container with a shadow, a border, a radius, and some padding.

myBox : Html msg
myBox =
    box []
        [ p []
            [ text "I'm the box ghost!" ]
        ]

The basic defaults for buttons.

import Bulma.Modifiers
    exposing
        ( Color(Default)
        , Size(Standard)
        , State(Blur)
        )


myButtonModifiers : ButtonModifiers msg
myButtonModifiers =
    { disabled = False
    , outlined = False
    , inverted = False
    , size = Standard
    , state = Blur
    , color = Default
    }

type Msg
    = DoSomething
    | DoSomethingElse


myButton : Html Msg
myButton =
    button myButtonModifiers
        [ onClick DoSomething ]
        [ text "Click me!" ]


myIconButton : Html Msg
myIconButton =
    button myButtonModifiers
        [ onClick DoSomething ]
        [ icon [] [ Bulm.Elements.Icon.star ]
        , span [] [ text "No, click me!" ]
        ]

type Msg
    = DoSomething
    | DoSomethingElse


myEasyButton : Html Msg
myEasyButton =
    easyButton myButtonModifiers
        []
        DoSomethingElse
        "Click me!"

myButtons : Html Msg
myButtons =
    buttons Left
        []
        [ button { buttonModifiers | color = Success } [ text "Save changes" ]
        , button { buttonModifiers | color = Primary } [ text "Save and continue" ]
        , button { buttonModifiers | color = Danger } [ text "Cancel" ]
        ]

myConnectedButtons : Html Msg
myConnectedButtons =
    connectedButtons Left
        []
        [ button buttonModifiers [ text "Yes" ]
        , button { buttonModifiers | color = Primary } [ text "Maybe" ]
        , button buttonModifiers [ text "No" ]
        ]

A single class to handle WYSIWYG-generated content, where only HTML tags are available.

import Bulma.Modifiers exposing (Size(Standard))


myContent : Html msg
myContent =
    content Standard
        []
        [ p [] [ text "Lorem ipsum..." ]
        ]

It can handle almost any HTML element, including:

• p
• ul / ol / dl
• h1 through h6
• blockquote
• em & strong
• table, tr, th, and td tables

Versatile delete cross.

type Msg
    = DeleteMsg


myEasyDelete : Html Msg
myEasyDelete =
    easyDelete [] DeleteMsg

import Icon.FontAwesome exposing ( fontAwesomeCDN, meh_o ) -- see http://package.elm-lang.org/packages/surprisetalk/elm-icon/latest

import Bulma.Modifiers exposing (Size(Large))


view : Model -> Html msg
view model =
    div []
        [ fontAwesomeCDN
        , icon Large [] [ meh_o ]
        , icon Large [] [ i [ class "fas fa-meh-o" ] [] ]
        ]

Use the image container to specify a precisely-sized container so that your layout isn't broken because of loading or broken images.

myImage : Html msg
myImage =
    image FourByThree
        []
        [ img [ src "https://i.imgur.com/pPjvmVS.jpg" ] []
        ]

myEasyImage : Html msg
myEasyImage =
    easyImage Natural
        []
        "http://i.imgur.com/I47PSAO.png"

This is a quick and dirty way to make placeholder images, using sources like http://bulma.io/images/placeholders/16x16.png .

-- OneByOne X16       ->  16 X  16
-- OneByOne X24       ->  24 X  24
-- OneByOne X32       ->  32 X  32
-- OneByOne X48       ->  48 X  48
-- OneByOne X64       ->  64 X  64
-- OneByOne X96       ->  96 X  96
-- OneByOne X128      -> 128 X 128
-- OneByOne Unbounded -> 256 X 256
-- FourByThree        -> 640 X 480
-- ThreeByTwo         -> 480 X 320
-- SixteenByNine      -> 640 X 360
-- TwoByOne           -> 640 X 320
-- _                  -> 256 X 256
myEasyPlaceholderImage : Html msg
myEasyPlaceholderImage =
    easyPlaceholderImage (OneByOne Unbounded) []

import Bulma.Modifiers exposing (Color(Danger))


myNotification : Html msg
myNotification =
    notification Danger
        []
        [ text "Something went wrong!"
        ]

import Bulma.Modifiers exposing (Color(Success))


type Msg
    = ClearNotificationsMsg


myNotification : Html Msg
myNotification =
    notificationWithDelete Danger
        []
        ClearNotificationsMsg
        [ text "Something went right!"
        ]

myProgressBar : Int -> Int -> Html msg
myProgressBar pVal pMax =
    progress myProgressModifiers
        [ value <| toString pVal
        , max <| toString pMax
        ]
        []

myProgressBar : Float -> Html msg
myProgressBar percentCompleted =
    progress myProgressModifiers
        []
        percentCompleted

myTable : Html msg
myTable =
    table myTableModifiers
        []
        [ tableHead [] []
        , tableBody [] []
        , tableFoot [] []
        ]

myTableBody : Html msg
myTableBody =
    tableBody []
        [ tableRow False
            []
            [ tableCell [] []
            , tableCell [] []
            , tableCell [] []
            ]
        , tableRow True
            []
            [ tableCell [] []
            , tableCell [] []
            , tableCell [] []
            ]
        ]

myTableHead : Html msg
myTableHead =
    tableHead []
        [ tableRow False
            []
            [ tableCellHead [] []
            , tableCellHead [] []
            , tableCellHead [] []
            ]
        ]

myTableFoot : Html msg
myTableFoot =
    tableFoot []
        [ tableRow False
            []
            [ tableCellHead [] []
            , tableCellHead [] []
            , tableCellHead [] []
            ]
        ]

myTag : Html msg
myTag =
    tag myTagModifiers
        []
        [ text "Hip to Be Square"
        ]

myTag : Html msg
myTag =
    easyTag myTagModifiers
        []
        "That was easy."

myMultitag : Html msg
myMultitag =
    multitag []
        [ myMainTag
        , myDeleteTag
        ]


myDeleteTag : Html msg
myDeleteTag =
    deleteTag myTagModifiers
        [ onClick DeleteTag ]
        "Delete me!"

myTag : Html msg
myTag =
    roundedTag myTagModifiers
        []
        [ text "Behold! I'm circlular!"
        ]

type Msg
    = DeleteTag Id


myTag : Id -> Html Msg
myTag id =
    tagWithDelete myTagModifiers
        []
        (DeleteTag id)
        [ text "cool"
        ]

type Msg
    = DeleteTag Id


myTag : Id -> Html Msg
myTag id =
    tagWithDelete myTagModifiers
        []
        (DeleteTag id)
        "cooler"

myTags : Html msg
myTags =
    tags []
        [ myFirstTag
        , mySecondTag
        ]

myMultitag : Html msg
myMultitag =
    multitag []
        [ myFirstTag
        , mySecondTag
        ]


myMultitags : Html msg
myMultitags =
    multilineFields []
        [ control myControlModifiers
            []
            [ myMultiTag
            ]
        , control myControlModifiers
            []
            [ myMultiTag
            ]
        , control myControlModifiers
            []
            [ myMultiTag
            ]
        ]

myTitle : Html msg
myTitle =
    title H1
        []
        [ text "Hullo"
        ]

mySubtitle : Html msg
mySubtitle =
    subtitle H3
        []
        [ text "World"
        ]

myTitle : Html msg
myTitle =
    easyTitleWithSubtitle False
        H1
        [ text "EPISODE V" ]
        [ text "THE EMPIRE STRIKES BACK" ]