Pull column

Use to create a balanced and clearer layout for pairing types of content that have different visual weights.

Description

This layout pattern is for the cases when we have two equal columns that behave differently:

  • One of them follows the page grid
  • The content within the other column will fill all of the available space, sitting outside the page grid and "pulling" the content within this column to the left or right edge of the viewport

    The component requires a pull-column--left or pull-column--right modifier, depending on which one is the one that pulls the content. The order of pull-column__content and pull-column__pulled depends on which modifier is applied. This is not applied on small screens where the content goes back to stacked rows.

    variations:

    • pull-column--reorder-items: re-order items on a mobile device
    • pull-column--pulled-background: pulls background but does not remove gutters

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-pull-column;

Usage

Usage example

Pull Column left

Consectetur quaerat at mollitia suscipit voluptatibus?
Eligendi neque reprehenderit fugit odit molestiae eveniet Soluta quia doloribus nemo officiis veritatis Fugiat nemo minima nulla omnis molestias!

Pull Column right

Eligendi neque reprehenderit fugit odit molestiae eveniet Soluta quia doloribus nemo officiis veritatis Fugiat nemo minima nulla omnis molestias!
Consectetur quaerat at mollitia suscipit voluptatibus?

Re-order items for mobile

Consectetur quaerat at mollitia suscipit voluptatibus?
Eligendi neque reprehenderit fugit odit molestiae eveniet Soluta quia doloribus nemo officiis veritatis Fugiat nemo minima nulla omnis molestias!

Pull background

Consectetur quaerat at mollitia suscipit voluptatibus?
Eligendi neque reprehenderit fugit odit molestiae eveniet Soluta quia doloribus nemo officiis veritatis Fugiat nemo minima nulla omnis molestias!

Code example

<div class="pull-column-examples">
  <h2>Pull Column left</h2>
  <div class="pull-column pull-column--left pull-column-- u-pv-large u-mb-large">
          <div class="pull-column__content">
    <div class="example-content">
      Consectetur quaerat at mollitia suscipit voluptatibus?
    </div>
  </div>
      <div class="pull-column__pulled">
    <div class="example-content">
      Eligendi neque reprehenderit fugit odit molestiae eveniet Soluta quia doloribus nemo officiis veritatis Fugiat nemo minima nulla omnis molestias!
    </div>
  </div>
  </div>

  <h2>Pull Column right</h2>
  <div class="pull-column pull-column--right pull-column-- u-pv-large u-mb-large">
          <div class="pull-column__pulled">
    <div class="example-content">
      Eligendi neque reprehenderit fugit odit molestiae eveniet Soluta quia doloribus nemo officiis veritatis Fugiat nemo minima nulla omnis molestias!
    </div>
  </div>
      <div class="pull-column__content">
    <div class="example-content">
      Consectetur quaerat at mollitia suscipit voluptatibus?
    </div>
  </div>
  </div>

  <h2>Re-order items for mobile</h2>
  <div class="pull-column pull-column--left pull-column--reorder-items u-pv-large u-mb-large">
          <div class="pull-column__content">
    <div class="example-content">
      Consectetur quaerat at mollitia suscipit voluptatibus?
    </div>
  </div>
      <div class="pull-column__pulled">
    <div class="example-content">
      Eligendi neque reprehenderit fugit odit molestiae eveniet Soluta quia doloribus nemo officiis veritatis Fugiat nemo minima nulla omnis molestias!
    </div>
  </div>
  </div>

  <h2>Pull background</h2>
  <div class="pull-column pull-column--left pull-column--pulled-background u-pv-large u-mb-large">
          <div class="pull-column__content">
    <div class="example-content">
      Consectetur quaerat at mollitia suscipit voluptatibus?
    </div>
  </div>
      <div class="pull-column__pulled">
    <div class="example-content">
      Eligendi neque reprehenderit fugit odit molestiae eveniet Soluta quia doloribus nemo officiis veritatis Fugiat nemo minima nulla omnis molestias!
    </div>
  </div>
  </div>
</div>