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 ( State(Blur) 
                                , Color(Default)
                                , Size(Standard)
                                )


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" ]