Box Settings

Default
Flushed
Slim
Documentation

Box Settings

Default

Settings Label This is a default settings box with informative sidebar and text/content.

Fermentum

Settings box without informative sidebar.

Settings Label This is a default settings box with informative sidebar and text/content.

Fermentum

Box Settings

Flushed

Settings Label This is a flushed settings box with informative sidebar and text/content. NOTE: Notice how borders / separators reach box edge.

Fermentum

Flushed settings box without informative sidebar.

Settings Label This is a flushed settings box with informative sidebar and text/content. NOTE: Notice how borders / separators reach box edge.

Fermentum

Box Settings

Slim

Slim boxes allows you to split content without separators in two columns: left sidebar with title and basic description, and main content displayed at right.

Website Name

Type

Your name

Documentation

Main Wrappers

Default

<div class="sui-box-settings-row">
	<!-- NOTE: Informative sidebar or content wrapper go here. -->
</div>

Flushed

<div class="sui-box-settings-row sui-flushed">
	<!-- NOTE: Informative sidebar or content wrapper go here. -->
</div>

Slim

<div class="sui-box-settings-slim-row">
	<!-- NOTE: Informative sidebar or content wrapper go here. -->
</div>

Inner Wrappers

Informative Sidebar

<!--
NOTE: This element goes inside default, flushed or slim markup.
-->

<div class="sui-box-settings-col-1">
	<!-- NOTE: Block title and/or description go here. -->
</div>

Main Content

<!--
NOTE: This element goes inside default, flushed or slim markup.
-->

<div class="sui-box-settings-col-2">
	<!-- NOTE: Main content goes here. -->
</div>

Basic Elements

Settings Label

Sample for settings label On sidebar label will always have a dark color, while on main content it will be grayish.

<span class="sui-settings-label">Settings Label</span>

Sample for darker settings label Some times when you use settings label on content you need to make it dark, for those cases you can use the sui-dark class variation.

<span class="sui-settings-label">Settings Label</span>

Description

You can use the description styles on both containers: sidebar and main content.

<span class="sui-description">Description goes here...</span>