Styleguide

Divider

The divider is supposed to break up pieces of information, usually due to visual reasons, within a section or card. Currently, the divider is designed to just work on white backgrounds, as cards are all white and sections are often so. A common setup would be to put a divider below any "explanatory" content on a form, right above any fields

Form title goes here

Sometimes, explanatory copy will go right here. In cases like this, it's good to have a line below to divide up the explanatory content (which is sometimes long), with the input content (like text fields and all that).

.section
  .card
    %h3 Form title goes here
    %p.copy Sometimes, explanatory copy will go right here. In cases like this, it's good to have a line below to divide up the explanatory content (which is sometimes long), with the input content (like text fields and all that).
    .divider
    .field
      %label Field label here
      %input.text-input.input--full{placeholder: "Placeholder", type: "text"}/
    .field
      %label Another field label here
      %input.text-input.input--full{placeholder: "Placeholder", type: "text"}/
    %button.button.button--primary Sounds Good

<div class='section'>
  <div class='card'>
    <h3>Form title goes here</h3>
    <p class='copy'>Sometimes, explanatory copy will go right here. In cases like this, it's good to have a line below to divide up the explanatory content (which is sometimes long), with the input content (like text fields and all that).</p>
    <div class='divider'></div>
    <div class='field'>
      <label>Field label here</label>
      <input class='text-input input--full' placeholder='Placeholder' type='text'>
    </div>
    <div class='field'>
      <label>Another field label here</label>
      <input class='text-input input--full' placeholder='Placeholder' type='text'>
    </div>
    <button class='button button--primary'>Sounds Good</button>
  </div>
</div>

Backup plan

If the .divider component isn't working in your situation — though that's unlikely given how simple it is — you should probably just make a custom divider or a div with a border: for the latter, you can use something like xs-bb1 from our BEM system see helper page.

Contact

Primary designer was Alex Couch; primary developer was Carlos Leon.