Block-level attributes

Often you may wish to assign attributes to block-level elements. To do this, follow the element with a block inline attribute list (block IAL). A block IAL consists of a left curly brace, followed by a colon, the attribute definitions and a right curly brace.

# Apply the class “main” to this heading

    {: .main}

Renders as:

This is the blockquote {: .className}

{.className}{#id} # This is the blockquote #.main Hello

#: .main Does this h1 title have the class “main” applied to it

Classes are applied with the syntax .className and IDs with #ID-name. For any other attribute you simply write the desired syntax:

# Another heading with the ‘role’ attribute applied
{: role="banner"}

Renders as:

Another heading with the ‘role’ attribute applied

For multiple attributes, create a space-separated list inside the blockIAL.

# This heading has two classes and one ID applied
    {: .class1 .class2 #ID-1}

Renders as:

This heading has two classes and one ID applied

{: .class1 .class2 #ID-1}