Container

    The Container sets the maximum width for content. There are two types of containers:

    Standard

    Use Container (max-width of 1600px and margin-left and margin-right of auto) to center the element on the page

    Container

    <div class="Container u-bgGrayLighter">
  <p class="u-pV5">Container</p>
</div>

    Fluid

    Use Container--fluid to change the max-width to 100 percent (Note: the margin-left and margin-right of auto becomes obsolete)

    Fluid Container

    <div class="Container Container--fluid u-bgGrayLighter">
  <p class="u-pV5">Fluid Container</p>
</div>

    Note: A Container class must be used on a parent element in order to apply to a child.

    Best Practice: Container and Container--fluid classes can be used together without layout issues, but it’s best to use just the Container--fluid class.

    Container Wrap

    The ContainerWrap classes allow for a background image or background color to be fluid with content height. There are several options:

    Standard / Before

    Use ContainerWrap-before to place the background style on the left and content on the right

    Cell

    Cell

    <div class="ContainerWrap u-bgGrayLight">
  <div class="ContainerWrap-before u-bgGrayLighter"></div>
  <div class="Container">
    <div class="Grid">
      <div class="Grid-cell u-size1of2 u-bgGrayLighter">
        <p class="u-pV10">Cell</p>
      </div>
      <div class="Grid-cell u-size1of2 u-bgGrayLight">
        <p class="u-pV10">Cell</p>
      </div>
    </div>
  </div>
</div>

    Applied in context

    Use ContainerWrap-after to place the background style on the right and content on the left

    Cell

    Cell

    <div class="ContainerWrap u-bgGrayLight">
  <div class="Container">
    <div class="Grid">
      <div class="Grid-cell u-size1of2 u-bgGrayLighter">
        <p class="u-pV10">Cell</p>
      </div>
      <div class="Grid-cell u-size1of2 u-bgGrayLight">
        <p class="u-pV10">Cell</p>
      </div>
    </div>
  </div>
  <div class="ContainerWrap-after u-bgGrayLight"></div>
</div>

    Fullscreen Image - Content Split

    Use a Grid with a Grid-cell that has content inside of a Container. The Grid-cell will have an offset that matches the size of the ContainerWrap-befor or ContainerWrap-after size

    Uses Grid Doesn't need to be 50%-50%; Use u-sizeXofX if needed

    WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it. 

    <div class="ContainerWrap u-bgGrayLighter">
  <div
    class="ContainerWrap-before Image Image--fluid Image--fullHeight u-hidden u-lg-tableCell"
    style="background-image:url(https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950)"
  >
  </div>
  <div class="Container">
    <div class="Grid u-mH0">
      <div class="Grid-cell u-pH0 u-lg-hidden">
        <img src="https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950" alt="">
      </div>
      <div class="Grid-cell u-lg-size1of2 u-lg-before1of2 u-bgGrayLighter">
        <p class="u-pV10">
          WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.
        </p>
      </div>
    </div>
  </div>
</div>

    Fullscreen Image - Content Partial Cover

    Uses Grid Doesn't need to be 50%; Use u-sizeXofX if needed

    Add a Background Image

    To use a background image on either ContainerWrap-before or ContainerWrap-after elements, Image, Image--fluid, and Image--fullHeight classes must also be added. This will expand the background image to the full height and width of the ContainerWrap-before or ContainerWrap-after element.

    Content on the Left

    WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it. 

    <div class="ContainerWrap">
  <div
    class="ContainerWrap-after u-lg-sizeFull Image Image--fluid Image--fullHeight u-hidden u-lg-tableCell"
    style="background-image:url(https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950)"
  ></div>
  <div class="Container">
    <div class="Grid u-mH0">
      <div class="Grid-cell u-pH0 u-lg-hidden">
        <img src="https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950" alt="">
      </div>
      <div class="Grid-cell u-lg-size1of2">
        <p class="u-pV25">
          WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.
        </p>
      </div>
    </div>
  </div>
  <div class="ContainerWrap-before u-sizeFull u-lg-size1of2 u-bgGrayLighter u-opacity9"></div>
</div>

    Content on the Right

    Use both the ContainerWrap-before and ContainerWrap-after classes to place content on top of an image

    WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it. 

    <div class="ContainerWrap">
  <div
    class="ContainerWrap-before u-lg-sizeFull Image Image--fluid Image--fullHeight u-hidden u-lg-tableCell"
    style="background-image:url(https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950)"
  ></div>
  <div class="Container">
    <div class="Grid u-mH0">
      <div class="Grid-cell u-pH0 u-lg-hidden">
        <img src="https://unsplash.imgix.net/photo-1423683249427-8ca22bd873e0?q=75&fm=jpg&s=5e57c661d0f772ce269188a6f5325708?fit=crop&fm=jpg&q=75&w=950" alt="">
      </div>
      <div class="Grid-cell u-lg-size1of2 u-lg-before1of2">
        <p class="u-pV25">
          WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.
        </p>
      </div>
    </div>
  </div>
  <div class="ContainerWrap-after u-sizeFull u-lg-size1of2 u-bgGrayLighter u-opacity9"></div>
</div>

    3+ Columns

    Uses Arrange Notably useful in cases where column heights are variable (read: flexbox hack)

    Tall: WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.

    Short

    Tall: WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.

    <div class="ContainerWrap u-bgGrayLight">
  <div class="ContainerWrap-before u-bgGrayLighter"></div>
  <div class="Container">
    <div class="Arrange">
      <div class="Arrange-sizeFit u-block u-md-tableCell u-md-size1of3 u-bgGrayLighter">
        <p class="u-pA2">Tall: WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.</p>
      </div>
      <div class="Arrange-sizeFit u-block u-md-tableCell u-md-size1of3 u-bgGrayLightest">
        <p class="u-pA2">Short</p>
      </div>
      <div class="Arrange-sizeFit u-block u-md-tableCell u-md-size1of3 u-bgGrayLight">
        <p class="u-pA2">Tall: WinWin transfers the user workspace from one computer to another. The transfer is done over some form of network connection - router, network, direct cable or a wireless connection. In order to initial the transfer, the user should run the software on old and new computers, which then auto-locate each other on the network. The transfer is then initiated on the new computer. During the transfer, the old computer is not changed and nothing is removed from it.</p>
      </div>
    </div>
  </div>
</div>

    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-bgGrayLighter" 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

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

    Arrange--withGutter

    Use Arrange-withGutter to add a gutter between child elements

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

    Arrange--middle

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

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

    Arrange--bottom

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

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

    Arrange--equal

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

    1
    2
    3
    4 
    <div class="Arrange Arrange--equal">
  <div class="Arrange-sizeFill u-bgGrayLighter">
    1
  </div>
  <div class="Arrange-sizeFill u-bgGrayLighter">
    2
  </div>
  <div class="Arrange-sizeFill u-bgGrayLighter">
    3
  </div>
  <div class="Arrange-sizeFill u-bgGrayLighter">
    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

    Main content 
    <div class="Arrange">
  <div class="Arrange-sizeFit">
    <div class="u-bgGrayLighter" style="width:150px; height:150px;"></div>
  </div>
  <div class="Arrange-sizeFill u-bgGrayLight">
    <div class="Arrange">
      <div class="Arrange-sizeFill u-bgGrayLight">
        Main content
      </div>
      <div class="Arrange-sizeFit">
        <div class="u-bgGrayLighter" 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:

    Main content 
    <div class="Media">
  <div class="Media-label">
    <div class="u-bgGrayLighter" style="width:150px; height:150px;"></div>
  </div>
  <div class="Media-body u-bgGrayLight">
    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

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

    Background

    Colors

    To alter an element’s background color, apply the u-bg[Color] class to the element’s tag. This will emphasize the color of the element’s background with the color specified in the style’s name. Please ensure there is enough color contrast between the background and foreground elements (such as text), as clear communication is extremely important. u-bg[Color]

    Gray Lighter Background Color 
    <div class="u-cf">
  <div class="u-sizeFull u-bgGrayLighter">
    Gray Lighter Background Color
  </div>
</div>

    Images

    To use a background image on either ContainerWrap-before or ContainerWrap-after elements, Image, Image--fluid, and Image--fullHeight classes must also be added. This will expand the background image to the full height and width of the ContainerWrap-before or ContainerWrap-after element.