@moodxd/component-arrange v1.0.3

MoO Arrange

The Arrange layout imitates a table structure without the use of table HTML, allowing a multiple column layout to have equal heights. There are numerous Arrange options:

Arrange

<div class="Arrange">
  <div class="u-bgYellowLighter" style="width:auto; height:150px;"></div>
</div>

Arrange-sizeFit / Arrange-sizeFill

By default, Arrange-sizeFit sets the element to a table-cell display, while Arrange-sizeFill has a width of 100 percent

<div class="Arrange">
  <div class="Arrange-sizeFit">
    <div class="u-bgYellowLighter" style="width:150px; height:150px;">sizeFit</div>
  </div>
  <div class="Arrange-sizeFill u-bgRedLighter">
    sizeFill
  </div>
</div>

Arrange--withGutter

Use Arrange-withGutter to add a gutter between child elements

<div class="Arrange Arrange--withGutter">
  <div class="Arrange-sizeFit">
    <div class="u-bgYellowLighter" style="width:150px; height:150px;"></div>
  </div>
  <div class="Arrange-sizeFill u-bgRedLighter">
    Main content
  </div>
</div>

Arrange--middle

Use Arrange-Middle to change the vertical alignment of child elements to be aligned middle instead of top

<div class="Arrange Arrange--middle">
  <div class="Arrange-sizeFit">
    <div class="u-bgYellowLighter" style="width:150px; height:150px;"></div>
  </div>
  <div class="Arrange-sizeFill u-bgRedLighter">
    Main content.
  </div>
</div>

Arrange--bottom

Use Arrange-Bottom to change the vertical alignment of child elements to be aligned bottom instead of top

<div class="Arrange Arrange--bottom">
  <div class="Arrange-sizeFit">
    <div class="u-bgYellowLighter" style="width:150px; height:150px;"></div>
  </div>
  <div class="Arrange-sizeFill u-bgRedLighter">
    Main content.
  </div>
</div>

Arrange--equal

Use Arrange-Equal to change the table layout to fixed, which makes all child elements equal width

<div class="Arrange Arrange--equal">
  <div class="Arrange-sizeFill u-bgYellowLighter">
    1
  </div>
  <div class="Arrange-sizeFill u-bgYellowLighter">
    2
  </div>
  <div class="Arrange-sizeFill u-bgYellowLighter">
    3
  </div>
  <div class="Arrange-sizeFill u-bgYellowLighter">
    4
  </div>
</div>

Nested

Nests Arrange elements similar to the Grid layout. Place an Arrange element instead of Arrange-sizeFit or Arrange-sizeFill to start a new Arrange layout

<div class="Arrange">
  <div class="Arrange-sizeFit">
    <div class="u-bgYellowLighter" style="width:150px; height:150px;"></div>
  </div>
  <div class="Arrange-sizeFill u-bgRedLighter">
    <div class="Arrange">
      <div class="Arrange-sizeFill u-bgRedLighter">
        Main content
      </div>
      <div class="Arrange-sizeFit">
        <div class="u-bgYellowLighter" style="width:150px; height:150px;"></div>
      </div>
    </div>
  </div>
</div>

Media

The Media layout creates a fixed width element that is inline with a fluid element (i.e., an inline form element where the label is fixed but the input’s width changes depending on screen size).

via Nicole Sullivan

Media

The Media class should be set on the parent container. Child elements will have these modifiers:

<div class="Media">
  <div class="Media-label">
    <div class="u-bgYellowLighter" style="width:150px; height:150px;"></div>
  </div>
  <div class="Media-body u-bgRedLighter">
    Main content
  </div>
</div>

Media--reversed

Use Media-Reversed to change the left float style of the Media-label element to float right. The Media-Reversed class should be added to the parent container along with the Media class

<div class="Media Media--reversed">
  <div class="Media-label">
    <div class="u-bgYellowLighter" style="width:150px; height:150px;"></div>
  </div>
  <div class="Media-body u-bgRedLighter">
    Main content
  </div>
</div>