Adding the class attribute to wiki elements

Wiki elements accept CSS style attributes directly within parenthesis. When adding (attribute:value) wiki expands to style="attribute:value". Attributes starting with & are treated as non-style attributes and became an HTML element attribute. This is the case for class.

[html(&class:ui button)]Button[/html]

<div class="ui button">Button</div>

Mixing class and style attributes

It is possible to use both, class and style attributes in wiki elements. Simply add style attributes separated by comas.

[html(&class:ui button,font-style:oblique,text-transform:uppercase)]Button[/html]

<div class="ui button" style="font-style:oblique;text-transform:uppercase;">Button</div>

Wiki elements relation to HTML

[html]

<div>

[block]

<div>

[span]

<span>

[link]

<a>

[joker(element)]

<element>

The joker as a joker

The joker wiki element can emulate any HTML element. Let's see a joker as an HTML anchor.

[joker(a,&href:/docs,&class:ui button,text-transform:uppercase)]Docs[/joker]

<a href="/docs" class="ui button" style="text-transform:uppercase;">Docs</a>

When to use html or block

As you probably noticed, html and block wiki elements do much the same. They create an HTML div with the difference of accepting or not characters. When accepting characters, the element does not create new lines or paragraphs.

When creating Semantic-UI grids, the grid requires the use of html. Columns may use html or block depending on their content. For example, if the column content is text, is preferable to use block. If the content is mainly other elements, use html instead.

The two blocks of construction would be:

For text columns

[html(&class:ui two column grid)]
[block(&class:column)]
Some text.
[/block]
[block(&class:column)]
Some other text.
[/block]
[/html]

For more element columns

[html(&class:ui two column grid)]
[html(&class:column)]
[block(&class:ui segment)]Some segment.[/block]
[/html]
[html(&class:column)]
[block(&class:ui segment)]Some other segment.[/block]
[/html]
[/html]