Previous tutorials have shown stripes, which you might say, are containers. This tutorial aims to show other containers, who's main use is to provide margins, paddings along with stripe-like colors and framework colors. Following tutorials explain in more detail how colors work.

Segments

Segments and solids are containers with its own margins. They provide an easy way to add content and show it is related. We have used segments when providing examples, and we'll continue to do so.

@w{segment}
This text is enclosed in a segment.
@w{/segment}

@w{segment(class=basic)}
Segments can be **basic**, respecting the same margins, but without border.
@w{/segment}

@w{segment(class=blue)}
Segments can have framework colors...
@w{/segment}

@w{segment(class=inverted blue)}
...and use them as background.
@w{/segment}

Solids

Solids are basically segments tuned to allow systems colors.

@w{solid(color=c2)}
This text is enclosed in a solid.
@w{/segment}

Solids use a different way to decide the font color, but the result is similar.

@w{solid(color=primary)}
This text is enclosed in a solid.
@w{/segment}

@w{solid(image=repository(/bg-example.png))}
Solids can also use background images.
@w{/segment}

Transparent

By default, segments and solids have a background. transparent is an easy way to use segments that use their container background.

@w{transparent}
This text is enclosed in a segment.
@w{/transparent}