Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Fixed Column

Usage notes

Fixed columns are used to layout columns with a fixed width and horizontally centered in the screen.

Column 1

Column 2

Column 1

Column 2

Column 3

Toggle markup


        <div class="coral-FixedColumn">
          <div class="coral-FixedColumn-column">
            <h3 class="coral-Heading--S">Column 1</h3>
            <input is="coral-textfield" style="width:100%" aria-label="input">
          </div>
        </div>

        <div class="coral-FixedColumn">
          <div class="coral-FixedColumn-column">
            <h3 class="coral-Heading--S">Column 1</h3>
            <input is="coral-textfield" style="width:100%" aria-label="input">
          </div>
          <div class="coral-FixedColumn-column">
            <h3 class="coral-Heading--S">Column 2</h3>
            <input is="coral-textfield" style="width:100%" aria-label="input">
          </div>
        </div>

        <div class="coral-FixedColumn">
          <div class="coral-FixedColumn-column">
            <h3 class="coral-Heading--S">Column 1</h3>
            <input is="coral-textfield" style="width:100%" aria-label="input">
          </div>
          <div class="coral-FixedColumn-column">
            <h3 class="coral-Heading--S">Column 2</h3>
            <input is="coral-textfield" style="width:100%" aria-label="input">
          </div>
          <div class="coral-FixedColumn-column">
            <h3 class="coral-Heading--S">Column 3</h3>
            <input is="coral-textfield" style="width:100%" aria-label="input">
          </div>
        </div>