Feature list

The calendar feature makes scheduling a snap.

Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.

You can get notified by email or SMS.

You know those marketing pages that display feature images and descriptions in alternating order? There’s one simple flexbox property that makes this easy to do:

flex-direction: row-reverse displays the container’s children in the reverse order of how they appear in the markup.

CSS

.featureListItem {
  /**
   * Lay out the children of this container with
   * flexbox, which is horizontal by default.
   */
  display: flex;

  /**
   * Align the children in the center, along
   * the main axis, which is horizontal in this case.
   */
  align-items: center;

  max-width: 400px;
  padding: 10px;
}

.featureListItem + .featureListItem {
  border-top: 1px solid #D7DBDD;
}

.featureListItem--reverse {
  /**
   * We can specify the flex-direction so that
   * the children elements are displayed in the
   * reverse order of how they appear in the
   * markup.
   */
  flex-direction: row-reverse;
}

  .featureListItem__icon,
  .featureListItem__description {
    padding: 5px 15px;
  }

  .featureListItem__icon {
    font-size: 50px;
    line-height: 0;
  }

  .featureListItem__description {
    color: #57727C;
    font-size: 12px;
  }

HTML

<div class="featureListItem">
  <div class="featureListItem__icon">
    <div class="icon fa fa-calendar"></div>
  </div>
  <div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
</div>
<div class="featureListItem featureListItem--reverse">
  <div class="featureListItem__icon">
    <div class="icon fa fa-dashboard"></div>
  </div>
  <div class="featureListItem__description">Our dashboard gives you a bird&rsquo;s-eye-view-at-a-glance-on-the-go.</div>
</div>
<div class="featureListItem">
  <div class="featureListItem__icon">
    <div class="icon fa fa-envelope"></div>
  </div>
  <div class="featureListItem__description">You can get notified by email or SMS.</div>
</div>

More stuff

If you like my writing you can find more at my blog, cenizal.com. Right now I'm mostly writing about people management, software engineering, and interaction design.