Arrange

Arrange Component

This component lets you lay out a row of cells in various ways. You can specify whether a cell should be wide enough to fit its content, or take up the remaining space in the row. It's also possible to give all cells an equal width, and to control their vertical alignment.

HTML

<style>
  .fixture-Box {
    background: rgb(100, 150, 50);
    border: 1px solid black;
    min-height: 150px;
    width: 150px;
  }
  .dev-Highlight {
    background: yellow;
  }
</style>

Arrange - Full Width

Arrange render full width by default

HTML

<div class="l-arrange">
    <div class="fixture-Box" style="width: auto;"></div>
</div>

Arrange - Size Fit

Sizefit/Sizefill shrinkwraps content of .Arrange-sizeFit. Fills the remaining space with content of .Arrange-sizeFill. Each column has equal height.

Main Content

HTML

<div class="l-arrange">
    <div class="l-arrange-sizeFit">
        <div class="fixture-Box"></div>
    </div>
    <div class="l-arrange-sizeFill dev-Highlight">Main Content</div>
</div>

Arrange - Ordering

Arrange can work with Sizefit/Sizefill in either order.

l-arrange-sizeFill

HTML

<div class="l-arrange">
  <div class="l-arrange-sizeFill">
      l-arrange-sizeFill
  </div>
  <div class="l-arrange-sizeFit dev-Highlight">
      <div class="fixture-Box"></div>
  </div>
</div>

Arrange - Multiple Instances

Arrange allows multiple instances of .Arrange-sizeFit in any order

Copywrite notice

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id massa dui. In quam sapien, vulputate ut ultrices eu, ultricies non felis. Donec nisi diam, accumsan viverra laoreet sed, ultricies ut lacus. Sed sed iaculis sapien. Phasellus nec massa elit. Nullam rutrum, sapien non semper fermentum, mauris libero eleifend diam, ac rhoncus risus metus sed magna. Duis venenatis, orci at fermentum pulvinar, est diam consequat eros, in tristique neque ligula commodo lorem. Pellentesque eleifend mollis tincidunt. Donec a porta nisl. Phasellus ultrices rutrum odio tincidunt tristique. In hac habitasse platea dictumst. Proin nec massa ultrices est fermentum pretium sed non elit. Aenean nec erat augue.

Copywrite notice

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Copywrite notice

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML

<div class="l-arrange">
    <div class="l-arrange-sizeFit dev-highlight">
        <div class="fixture-Box"></div>
        <small>Copywrite notice</small>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="l-arrange-sizeFill">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id massa dui. In quam sapien, vulputate ut ultrices eu, ultricies non felis. Donec nisi diam, accumsan viverra laoreet sed, ultricies ut lacus. Sed sed iaculis sapien. Phasellus nec massa elit. Nullam rutrum, sapien non semper fermentum, mauris libero eleifend diam, ac rhoncus risus metus sed magna. Duis venenatis, orci at fermentum pulvinar, est diam consequat eros, in tristique neque ligula commodo lorem. Pellentesque eleifend mollis tincidunt. Donec a porta nisl. Phasellus ultrices rutrum odio tincidunt tristique. In hac habitasse platea dictumst. Proin nec massa ultrices est fermentum pretium sed non elit. Aenean nec erat augue.</p>
    </div>
    <div class="l-arrange-sizeFit dev-highlight">
        <div class="fixture-Box"></div>
    </div>
</div>
<br>
<div class="l-arrange">
    <div class="l-arrange-sizeFit dev-highlight">
        <div class="fixture-Box"></div>
        <small>Copywrite notice</small>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="l-arrange-sizeFit dev-highlight">
        <div class="fixture-Box"></div>
    </div>
    <div class="l-arrange-sizeFill">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id massa dui. In quam sapien, vulputate ut ultrices eu, ultricies non felis. Donec nisi diam, accumsan viverra laoreet sed, ultricies ut lacus. Sed sed iaculis sapien. Phasellus nec massa elit. Nullam rutrum, sapien non semper fermentum, mauris libero eleifend diam, ac rhoncus risus metus sed magna. Duis venenatis, orci at fermentum pulvinar, est diam consequat eros, in tristique neque ligula commodo lorem. Pellentesque eleifend mollis tincidunt. Donec a porta nisl. Phasellus ultrices rutrum odio tincidunt tristique. In hac habitasse platea dictumst. Proin nec massa ultrices est fermentum pretium sed non elit. Aenean nec erat augue.</p>
    </div>
</div>
<br>
<div class="l-arrange">
    <div class="l-arrange-sizeFill">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id massa dui. In quam sapien, vulputate ut ultrices eu, ultricies non felis. Donec nisi diam, accumsan viverra laoreet sed, ultricies ut lacus. Sed sed iaculis sapien. Phasellus nec massa elit. Nullam rutrum, sapien non semper fermentum, mauris libero eleifend diam, ac rhoncus risus metus sed magna. Duis venenatis, orci at fermentum pulvinar, est diam consequat eros, in tristique neque ligula commodo lorem. Pellentesque eleifend mollis tincidunt. Donec a porta nisl. Phasellus ultrices rutrum odio tincidunt tristique. In hac habitasse platea dictumst. Proin nec massa ultrices est fermentum pretium sed non elit. Aenean nec erat augue.</p>
    </div>
    <div class="l-arrange-sizeFit dev-highlight">
        <div class="fixture-Box"></div>
        <small>Copywrite notice</small>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="l-arrange-sizeFit dev-highlight">
        <div class="fixture-Box"></div>
    </div>
</div>

Arrange - With Gutter

Supports inter-cell gutters.

Main content

HTML

<div class="l-arrange l-arrange--withGutter">
  <div class="l-arrange-sizeFit">
      <div class="fixture-Box"></div>
  </div>
  <div class="l-arrange-sizeFill">
      <div class="dev-highlight">Main content</div>
  </div>
</div>

Arrange - Middle

Middle aligns content.

Main content.

HTML

<div class="l-arrange l-arrange--middle">
    <div class="l-arrange-sizeFit dev-highlight">
        <div class="fixture-Box"></div>
    </div>
    <div class="l-arrange-sizeFill dev-highlight">
        <p>Main content.</p>
    </div>
</div>

Arrange - Bottom

Bottom aligns content.

Main content.

HTML

<div class="l-arrange l-arrange--bottom">
    <div class="l-arrange-sizeFit dev-highlight">
        <div class="fixture-Box"></div>
    </div>
    <div class="l-arrange-sizeFill dev-highlight">
        <p>Main content.</p>
    </div>
</div>

Arrange - Equal

Renders equal width cells

HTML

<div class="l-arrange l-arrange--equal">
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">A</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">B</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">C</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">D</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">E</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">F</div>
    </div>
</div>

Arrange - Equal with Gutter

Can arrange equal width cells with a gutter

HTML

<div class="l-arrange l-arrange--equal l-arrange--withGutter">
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">A</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">B</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">C</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">D</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">E</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">F</div>
    </div>
</div>

Arrange - Equal Cells Varying Content

Renders equal width cells even when content width varies.

Orangutan

Gorilla

Chimpanzee

Bonobo

Gibbon

Siamang

HTML

<div class="l-arrange l-arrange--equal">
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">Orangutan</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">Gorilla</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">Chimpanzee</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">Bonobo</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">Gibbon</div>
    </div>
    <div class="l-arrange-sizeFill">
        <div class="dev-highlight">Siamang</div>
    </div>
</div>

Arrange - Complex Example

A complex example that shows intermixing images with fit and fill.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML

<div class="l-arrange">
    <div class="l-arrange-sizeFit dev-highlight">
        <img class="u-block" src="http://lorempixel.com/120/120" alt="">
    </div>
    <div class="l-arrange-sizeFill u-textBreak dev-highlight">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img class="u-sizeFullWidth" src="http://lorempixel.com/700/150" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id massa dui. In quam sapien, vulputate ut ultrices eu, ultricies non felis. Donec nisi diam, accumsan viverra laoreet sed, ultricies ut lacus. Sed sed iaculis sapien. Phasellus nec massa elit. Nullam rutrum, sapien non semper fermentum, mauris libero eleifend diam, ac rhoncus risus metus sed magna. Duis venenatis, orci at fermentum pulvinar, est diam consequat eros, in tristique neque ligula commodo lorem. Pellentesque eleifend mollis tincidunt. Donec a porta nisl. Phasellus ultrices rutrum odio tincidunt tristique. In hac habitasse platea dictumst. Proin nec massa ultrices est fermentum pretium sed non elit. Aenean nec erat augue.</p>
    </div>
    <div class="l-arrange-sizeFit dev-highlight">
        <img class="u-block" src="http://lorempixel.com/80/80" alt="">
    </div>
    <div class="l-arrange-sizeFit dev-highlight">
        <img class="u-block" src="http://lorempixel.com/40/40" alt="">
    </div>
</div>