The basic building block of your layout. Here we create a

import Background
import Element


view =
    Element.el [] (Element.text "Hello!")

Nothing to see here!

Create some plain text.

text "Hello, you stylish developer!"

Note text does not wrap by default. In order to get text to wrap, check out paragraph!

The basic building block of your layout.

import Color exposing (blue, darkBlue)
import Element exposing (Element)
import Element.Background as Background
import Element.Border as Border


myElement : Element msg
myElement =
    Element.el
        [ Background.color blue
        , Border.color darkBlue
        ]
        (Element.text "You've made a stylish element!")

If you want a row of elements, use row!

A paragraph will layout all children as wrapped, inline elements.

import Element
import Element.Font as Font


Element.paragraph []
    [ text "lots of text ...."
    , el [ Font.bold ] (text "this is bold")
    , text "lots of text ...."
    ]

This is really useful when you want to markup text by having some parts be bold, or some be links, or whatever you so desire.

Also, if a child element has alignLeft or alignRight, then it will be moved to that side and the text will flow around it, (ah yes, float behavior).

This makes it particularly easy to do something like a dropped capital.

import Element
import Element.Font as Font


Element.paragraph []
    [ el
        [ alignLeft
        , padding 5
        , Font.lineHeight 1
        ]
        (text "S")
    , text "lots of text ...."
    ]

Which will look something like

Now that we have a paragraph, we need someway to attach a bunch of paragraph's together.

To do that we can use a textColumn.

The main difference between a column and a textColumn is that textColumn will flow the text around elements that have alignRight or alignLeft, just like we just saw with paragraph.

In the following example, we have a textColumn where one child has alignLeft.

Elment.textColumn [ spacing 10, padding 10 ]
    [ paragraph [] [ text "lots of text ...." ]
    , el [ alignLeft ] empty
    , paragraph [] [ text "lots of text ...." ]
    ]

Which will result in something like:

Show some tabular data.

Start with a list of records and specify how each column should be rendered.

So, if we have a list of persons:

type alias Person =
    { firstName : String
    , lastName : String
    }


persons : List Person
persons =
    [ { firstName = "David"
      , lastName = "Bowie"
      }
    , { firstName = "Florence"
      , lastName = "Welch"
      }
    ]

We could render it using

Element.table []
    { data = persons
    , columns =
        [ { header = Element.text "First Name"
          , view =
                (\person ->
                    Element.text person.firstName
                )
          }
        , { header = Element.text "Last Name"
          , view =
                 (\person ->
                    Element.text person.lastName
                 )
          }
        ]
    }

This is your top level node where you can turn Element into Html.

Any hover styles, aka attributes with mouseOver in the name, will be always turned on.

This is useful for when you're targeting a platform that has no mouse, such as mobile.

Disable all mouseOver styles.

link []
    { url = "google.com"
    , label = text "My Link to Google"
    }

A link to download a file.

A link to download a file, but you can specify the filename.

Both a source and a description are required for images. The description is used to describe the image to screen readers.

If an image is purely decorative, you can skip the caption.

Set the cursor to the pointer hand.

Fill the available space. The available space will be split evenly between elements that have width fill.

Sometimes you may not want to split available space evenly. In this case you can use fillPortion to define which elements should have what portion of the available space.

So, two elements, one with width (fillPortion 2) and one with width (fillPortion 3). The first would get 2 portions of the available space, while the second would get 3.

Also: fill == fillPortion 1

Set horizontal and vertical padding.

In the majority of cases you'll just need to use spacing, which will work as intended.

However for some layouts, like textColumn, you may want to set a different spacing for the x axis compared to the y axis.

above takes a Bool first so that you can easily toggle showing and hiding the element.