Class names and attributes

Learn how to add class names and attributes, see the full list of available CSS utility classes, and find out how you can use Tailwind CSS.

Add class names and attributes

Add class names and other attributes (such as IDs, WAI-ARIA tags, etc.) to any block-level element by putting them inside [...] and placing this at the very start of the element's syntax. IDs start with #, class names start with ., and other attributes can be added as-is, for example, style="...".

Here's how you can add class names and attributes to all the elements that support it:

# [#my-heading .anchored] Heading

[style="font-size: 17px;"]
Paragraph

- [.col-6 .xs:col-6 .list-inside]
- List item
- List item

0. [.col-6 .xs:col-6 .list-inside]
1. List item
2. List item

> [.text-accent #my-blockquote aria-label="..."]
> Blockquote

``` [.col-6 #my-code-block] python
def add(a, b):
  return a + b
```

[.col-6 .mt-3]
input* = TextInput(
  | question = What is your answer?
)

<div> element and data-binding

Create wrapping <div> elements by putting content inside pairs of :::. The content inside can be any valid Markdown, such as headings, paragraphs, lists, form fields, etc. Class names and other attributes are supported via [...]. Moreover, you can bind one or more fields to a <div> element by adding the names of the fields inside {$...$} (separated by spaces), and placing this within the [...]. This means that whenever the value of a binded field changes, the content inside the <div> will be automatically re-rendered.

price* = NumberInput(
  | question = Price | unitEnd = $ | subfield | min = 1
)

quantity* = NumberInput(
  | question = Quantity | subfield | min = 1
)

::: [.col-8 .text-end .xs:text-start {$ price quantity $}]
{% if price and quantity -%}
  Total: ${{ price }} × {{ quantity }} = ${{ price * quantity }}
{% else -%}
  Total: Set price and quantity
{% endif %}
:::

Learn more about data-binding.

Available CSS utility classes

The following CSS utility classes are included by default in blocks.md:

Layout

The content in blocks.md uses a grid based, 12-column system. This means you can add a .col-{value} class to any block-level element to have it occupy only a portion of the full width of the row. These class names come in the following formats:

• .col-{value} (only for non-phone devices, ≥ 576px)

• .xs:col-{value} (only for phones, < 576px)

The {value} can be any integer between 1 to 12 (included) or auto. So for example, .col-4 would span 4 columns.

[.col-4 .xs:col-6 style="border: 1px solid"]
price* = NumberInput(
  | question = Price | unitEnd = $ | subfield | min = 1
)

[.col-4 .xs:col-6 style="border: 1px solid"]
quantity* = NumberInput(
  | question = Quantity | subfield | min = 1
)

Layout classes

You can also push and pull each column using the following classes:

• .col-start-{value}/.xs:col-start-{value} (sets grid-column-start: {value})

• .col-end-{value}/.xs:col-end-{value} (sets grid-column-end: {value})

Here, the {value} can be any integer between 1 to 13 (included) or auto.

[.col-4 .xs:col-6 style="border: 1px solid"]
price* = NumberInput(
  | question = Price | unitEnd = $ | subfield | min = 1
)

[.col-4 .col-start-9 .xs:col-6 style="border: 1px solid"]
quantity* = NumberInput(
  | question = Quantity | subfield | min = 1
)

Layout classes

<div> elements created using ::: can also be given .col-{value} classes. Moreover, each <div> element is also a 12-column grid, so these classes can also be used on sub-elements within the <div>.

::: [.col-9 style="border: 1px solid"]
[.col-6 style="border: 1px solid red"]
Paragraph

- [.col-6 style="border: 1px solid red"]
- Item
- Item
:::

Layout classes on and inside <div>

Color

Class	Description

Display (and flex)

Class	Description

Heading

Class	Description

Font size

Class	Description

Font weight

Class	Description

Form

Class	Description

Light/dark mode

Class	Description

List

Class	Description

LTR/RTL

Class	Description

Spacing

The class names for the margin and padding utilities come in the following formats: .m{sides}-{size} and .p{sides}-{size}.

{sides}

{size}

Text alignment

Class	Description

Visibility

Class	Description

Use with Tailwind CSS or other frameworks

blocks.md adds a bmd- prefix to all CSS classes. This prefix comes from the #! css-prefix = bmd- setting. You can see how all of the available utility classes discussed on this page have this prefix in blocksmd.css. This makes sure that there are no collisions with other CSS frameworks that you may choose to use.

Therefore, if you want to use Tailwind CSS with your forms and pages, you would need to do the following:

• Set prefix to none by adding the #! css-prefix = none line.

• Include Tailwind CSS in your base.html.

After that, you can add Tailwind classes in [...] and everything should work as expected when you build your forms and pages by running the blocksmd command.