Divided Container

Divided Container is a custom grid particular to the theme.

General Info


The grid it is used in many cases to what form elements together with the corresponding label.

Base structure is like this: 


<div class="div-c">
    <div class="divided-column">
        <label>Label 1</label>
        <input type="text" placeholder="Input Here">
    </div>
    ...
</div>

Columns


By default .div-c columns have 100% width.


In order to have multiple columns on one line you can use these classes::

  • .inline-2 - two columns in a row.
  • .inline-3 - thre columns in a row.
  • .inline-4 - four columns in a row.

No matter the above options, on mobile the width will always be 100%.



<div class="div-c inline-2">
    <div class="divided-column">
        <label>Label 1</label>
        <input type="text" placeholder="Input Here">
    </div>
    <div class="divided-column">
        <label>Label 2</label>
        <input type="text" placeholder="Input Here">
    </div>
    ...
</div>



<div class="div-c inline-3">
    <div class="divided-column">
        <label>Label 1</label>
        <input type="text" placeholder="Input Here">
    </div>
    <div class="divided-column">
        <label>Label 2</label>
        <input type="text" placeholder="Input Here">
    </div>
    <div class="divided-column">
        <label>Label 2</label>
        <input type="text" placeholder="Input Here">
    </div>
</div>

One Label Option

There are cases when the elements grid needs just one label. You can use the .one-label class like this:


<div class="div-c one-label inline-4">
    <label>Label 1</label>
    <div class="divided-column">
        <input type="text" placeholder="Input Here">
    </div>
    <div class="divided-column">
        <input type="text" placeholder="Input Here">
    </div>
    <div class="divided-column">
        <input type="text" placeholder="Input Here">
    </div>
    <div class="divided-column">
        <input type="text" placeholder="Input Here">
    </div>
</div>

No Padding Option


To remove columns gutter you can use this class .no-padding


<div class="div-c inline-2 no-padding">
    <div class="divided-column">
        <label>Label 1</label>
        <input type="text" placeholder="Input Here">
    </div>
    <div class="divided-column">
        <label>Label 2</label>
        <input type="text" placeholder="Input Here">
    </div>
    ...
</div>

Border Option


To apply a border on the whole .div-c, excluding the label, you can use .border-sq class along with .no-padding class.

Element 01
Element 02
Element 03

<div class="div-c inline-3 one-label no-padding border-sq">
    <label>Label 1</label>
    <div class="divided-column">Element 01</div>
    <div class="divided-column">Element 02</div>
    <div class="divided-column">Element 03</div>
</div>