Groups Layout

Documentation and examples on how to group a series of elements together to build a panel of buttons and form controls on a single line or stack them in a vertical column.

Overview

in this documentation, we will use .px-group opt-in style class name and .radius-{size} to group form-controls with each other attached like on panels or buttons to create a tabs panel and extend with our modifiers classes and CSS Variables to make a different style out of it

Buttons Group

in the next example, we will use .px-group to make the group of buttons stacked against each other.

<!-- Buttons Group -->
<div class="px-group radius-md">
    <button class="btn fs-14 primary">Primary</button>
    <button class="btn fs-14 secondary">Secondary</button>
    <button class="btn fs-14 dark">Dark button</button>
    <button class="btn fs-14 info">Informative</button>
    <button class="btn fs-14 success">Success button</button>
</div>
<!-- // Buttons Group -->

Vertical Stack

in the next example, we will use .px-group-v to make the group layout columns above each other.

<!-- Buttons Group -->
<div class="px-group px-group-v radius-md mb-30 w-max-120">
    <button class="btn large fs-14 primary">Primary</button>
    <button class="btn large fs-14 secondary">Secondary</button>
    <button class="btn large fs-14 dark">Dark button</button>
    <button class="btn large fs-14 info">Informative</button>
    <button class="btn large fs-14 success">Success button</button>
</div>
<!-- // Buttons Group -->

Form Controls

in the next example, we will use .px-group and .px-group-v to make the group of controllers stacked against each other.

<!-- Controllers Group -->
<div class="px-group radius-md mb-30">
    <!-- input -->
    <input type="text" placeholder="input controller example" class="form-control col-4">
    <!-- input -->
    <select class="form-control col-4">
        <option value="">-- Select Example --></option>
    </select>
    <!-- input -->
    <input type="number" placeholder="Numbers" class="form-control col-2">
    <!-- input -->
    <button class="btn info col-2">BooM</button>
</div>
<!-- // Controllers Group -->

Classes List

in the table below you can learn all class names available to extend and customize groups.