Springboard

Form Line 

<div class="form-line">
    <div class="portion-2">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
</div>
<div class="form-line">
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
</div>
<div class="form-line">
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
</div>
<div class="form-line">
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
</div>
<div class="form-line">
    <div class="portion-3">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
    <div class="portion-1">
        <label for="inputid">label</label>
        <input type="text" id="inputid" name="input" value="" placeholder="placeholder" />
    </div>
</div>
 
{{#each lines}}
<div class="form-line">
  {{#each line}}
  <div class="portion-{{ size }}">
    {{ render '@input' }}
  </div>
  {{/each}}
</div>
{{/each}}
 
{
  "lines": [
    {
      "line": [
        {
          "size": 2
        },
        {
          "size": 1
        },
        {
          "size": 1
        }
      ]
    },
    {
      "line": [
        {
          "size": 1
        },
        {
          "size": 1
        }
      ]
    },
    {
      "line": [
        {
          "size": 1
        },
        {
          "size": 1
        },
        {
          "size": 1
        }
      ]
    },
    {
      "line": [
        {
          "size": 1
        },
        {
          "size": 1
        },
        {
          "size": 1
        },
        {
          "size": 1
        }
      ]
    },
    {
      "line": [
        {
          "size": 3
        },
        {
          "size": 1
        }
      ]
    }
  ]
}
  • Content: 
    .form-line > * {
  margin-bottom: 1.4em;
}

@include reader {
  .form-line {
    display: flex;
    margin-bottom: 1.4rem;

    > * {
      margin-right: 1em;
      margin-bottom: 0;
      flex: 1;
    }

    > :last-child {
      margin-right: 0;
    }
  }

  .portion-2 {
    flex: 2;
  }

  .portion-3 {
    flex: 3;
  }
}
  • URL: /components/raw/form-line/_sass.scss
  • Filesystem Path: components/02-modules/form/form-line/_sass.scss
  • Size: 327 Bytes

Form lines group form inputs together on a single line on larger viewports. Use child divs to wrap labels, inputs and other input-related elements.

Child divs can include a portion-1, portion-2, or portion-3 class to indicate the fraction of the line that the child should take up. No class is the same as portion-1.