Syntax: Elements

Elements are just lines.

div

Class names and ID’s

You may add .classes and #ids after an element name.

p.alert
div#box

If you do, the element name is optional.

#box
.alert

You may chain them as much as you need to.

.alert.alert-danger#error

Enclose attributes in (...) after an element name.

a(href="google.com") Google
a(class="button" href="google.com") Google
.box(style="display: none")

The attribute values are Elixir expressions.

script(src=static_path(@conn, "/js/app.js"))

Text after the classes/attributes are shown as plain text. See text.

a(href="google.com") Google

You may also use | for plain text with other elements.

div
  | Welcome, new user!
  a(href="/signup") Register

Nest elements by indentation.

ul
  li
    a(href="/") Home
  li
    a(href="/about") About

Attributes may span multiple lines. Expug tries to intelligently figure out what you mean by balancing ( [ { " ' pairs.

a(
  href=page_path(
    @conn,
    "index.html"
  )
)= "View list of pages"