A graphical element that can be rendered on screen. Every element is a rectangle with a known width and height, so they can be composed and stacked easily.

Convert an element into HTML, so it can be embedded anywhere in your program.

Convert anything to its textual representation and make it displayable in the browser. Excellent for debugging.

show value =
  leftAligned (Text.monospace (Text.fromString (toString value)))

Create an image given a width, height, and image source.

image 100 100 "yogi.jpg"

Create a fitted image given a width, height, and image source. This will crop the picture to best fill the given dimensions.

fittedImage 100 100 "yogi.jpg"

Create a cropped image. Take a rectangle out of the picture starting at the given top left coordinate. If you have a 140-by-140 image, the following will cut a 100-by-100 square out of the middle of it.

croppedImage (20,20) 100 100 "yogi.jpg"

Create a tiled image. Repeat the image to fill the given width and height.

tiledImage 100 100 "yogi.jpg"

Align text along the left side of the text block. This is sometimes known as ragged right.

Align text along the right side of the text block. This is sometimes known as ragged left.

Center text in the text block. There is equal spacing on either side of a line of text.

Align text along the left and right sides of the text block. Word spacing is adjusted to make this possible.

Create an Element with a given width.

Create an Element with a given height.

Create an Element with a new width and height.

Create an Element with a given background color.

Create an Element with a given opacity. Opacity is a number between 0 and 1 where 0 means totally clear.

Create an Element that is a hyper-link.

Create an Element with a tag. This lets you link directly to it. The element (tag "all-about-badgers" thirdParagraph) can be reached with a link like this: /facts-about-animals.elm#all-about-badgers

Get the width of an Element

Get the height of an Element

Get the width and height of an Element

Have a list of elements flow in a particular direction. The Direction starts from the first element in the list.

flow right [a,b,c]


    +---+---+---+
    | a | b | c |
    +---+---+---+

Represents a flow direction for a list of elements.

Layer elements on top of each other, starting from the bottom: layers == flow outward

Stack elements vertically. To put a above b you would say: a `above` b

Stack elements vertically. To put a below b you would say: a `below` b

Put elements beside each other horizontally. To put a beside b you would say: a `beside` b

An Element that takes up no space. Good for things that appear conditionally:

flow down [ img1, if showMore then img2 else empty ]

Create an empty box. This is useful for getting your spacing right and for making borders.

Put an element in a container. This lets you position the element really easily, and there are tons of ways to set the Position. To center element exactly in a 300-by-300 square you would say:

container 300 300 middle element

By setting the color of the container, you can create borders.

Specifies a position for an element within a container, like “the top left corner”.

Specifies a distance from a particular location within a container, like “20 pixels right and up from the center”. You can use absolute or relative to specify a Pos in pixels or as a percentage of the container.

A position specified in pixels. If you want something 10 pixels to the right of the middle of a container, you would write this:

middleAt (absolute 10) (absolute 0)

A position specified as a percentage. If you want something 10% away from the top left corner, you would say:

topLeftAt (relative 0.1) (relative 0.1)