singleline

Displays enclosed elements on a single line

Form

<fieldset>
	<legend>singleline</legend>
	<ol class="singleline">
		<li> tel [tel cf7s-tel-01 15/] </li>
		<li> mobile [tel cf7s-tel-02 15/] </li>
	</ol>
	<ol class="singleline box">
		<li> Item1 [text item1] </li>
		<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
		<li> Item2 [text item2] </li>
	</ol>
</fieldset>

column

Displays enclosed elements in a vertical column

Form

<fieldset>
	<legend>column</legend>
	<ol class="column">
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1a] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
			<li> Item2 [text item2a] </li>
		</ol>
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1b] </li>
			<li> Item2 [text item2b] </li>
			<li> Item3 [text item3b] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
		</ol>
	</ol>
	<ol class="column box">
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1c] </li>
			<li> Item2 [text item2c] </li>
			<li> Item3 [text item3c] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
		</ol>
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1d] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
			<li> Item2 [text item2d] </li>
		</ol>
		<ol>
			<li> <strong>Ready Class column</strong> </li>
			<li> Item1 [text item1e] </li>
			<li> Item2 [text item2e] </li>
			<li> Item3 [text item3e] </li>
			<li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li>
		</ol>
	</ol>
</fieldset>

grid

Implements a strict form grid

Form

<fieldset>
	<legend>grid (with grid-hover & grid-lined)</legend>
	<ol class="grid grid-hover grid-lined">
		<ol data-row-span="1">
			<li data-field-span="1"> Field 1 [text item-g1a] </li>
		</ol>
		<ol data-row-span="2">
			<li data-field-span="1"> Field 1 [text item-g1b] </li>
			<li data-field-span="1"> Field 2 [text item-g2b] </li>
		</ol>
		<ol data-row-span="3">
			<li data-field-span="1"> Field 1 [text item-g1c] </li>
			<li data-field-span="1"> Field 2 [text item-g2c] </li>
			<li data-field-span="1"> Field 3 [text item-g3c] </li>
		</ol>
		<ol data-row-span="4">
			<li data-field-span="1"> Field 1 [text item-g1d] </li>
			<li data-field-span="1"> Field 2 [text item-g2d] </li>
			<li data-field-span="1"> Field 3 [text item-g3d] </li>
			<li data-field-span="1"> Field 4 [text item-g4d] </li>
		</ol>
		<ol data-row-span="5">
			<li data-field-span="1"> Field 1 [text item-g1e] </li>
			<li data-field-span="1"> Field 2 [text item-g2e] </li>
			<li data-field-span="1"> Field 3 [text item-g3e] </li>
			<li data-field-span="1"> Field 4 [text item-g4e] </li>
			<li data-field-span="1"> Field 5 [text item-g5e] </li>
		</ol>
		<ol data-row-span="3">
			<li data-field-span="2"> Field 1 [text item-g1f] </li>
			<li data-field-span="1"> Field 2 [text item-g2f] </li>
		</ol>
		<ol data-row-span="3">
			<li data-field-span="1"> Field 1 [text item-g1g] </li>
			<li data-field-span="2"> Field 2 [text item-g2g] </li>
		</ol>
		<ol data-row-span="4">
			<li data-field-span="1"> Field 1 [text item-g1h] </li>
			<li data-field-span="2"> Field 2 [text item-g2h] </li>
			<li data-field-span="1"> Field 3 [text item-g3h] </li>
		</ol>
		<ol data-row-span="4">
			<li data-field-span="2"> Field 1 [text item-g1i] </li>
			<li data-field-span="1"> Field 2 [text item-g2i] </li>
			<li data-field-span="1"> Field 3 [text item-g3] </li>
		</ol>
		<ol data-row-span="4">
			<li data-field-span="3"> Field 1 [text item-g1i] </li>
			<li data-field-span="1"> Field 2 [text item-g2j] </li>
		</ol>
	</ol>
</fieldset>

box

Displays enclosed elements in a surrounding box

Form

<fieldset>
	<legend>box</legend>
	<ol class="box">
		<ol class="singleline">
			<li> Item1 [text item1a] </li>
			<li> Dropdown Menu [[select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"]] </li>
			<li> Item2 [text item2a] </li>
		</ol>
	</ol>
</fieldset>

checkbox & radio buttons – horizontal

Displays checkboxes & radio buttons in horizontal line

Form

<fieldset>
	<legend>checkbox & radio buttons - horizontal</legend>
	<ol>
		<li class="checkbox-horizontal">Checkboxes (<strong>Ready Class checkbox-horizontal</strong>)
		 [checkbox cf7s-checkbox-02 "Item1" "Item2" "Item3" "Item4"] </li>
		<li  class="radio-horizontal">Radio Buttons (<strong>Ready Class radio-horizontal</strong>)
		 [radio cf7s-radio-02 label_first use_label_element "Item1" "Item2" "Item3"] </li>
	</ol>
</fieldset>