Content Grid

View in Github

Standard two col grid with a content area and sidebar. This grid starts at bp-l. The sidebar width is to account for 300x250 ads. {{isWide}}

.l-content-grid

<div class="l-content-grid ">
  <div class="l-content-grid__content has-bg-white-off">
    <h3 class="has-padding">Content</h3>
  </div>
  <div class="l-content-grid__side has-bg-gray-light">
    <h3 class="has-padding">Sidebar</h3>
  </div>
</div>

Repo	Count	Location(s)
texastribune	13	List section_base.html base.html results.html about_layout.html firehose.html tag_detail.html tag_list.html our_picks.html index.html events_archive.html index.html landing.html series_detail.html

.l-content-grid--swapped-until-bp-l

Flip the visual order on smaller devices

<div class="l-content-grid l-content-grid--swapped-until-bp-l">
  <div class="l-content-grid__content has-bg-white-off">
    <h3 class="has-padding">Content</h3>
  </div>
  <div class="l-content-grid__side has-bg-gray-light">
    <h3 class="has-padding">Sidebar</h3>
  </div>
</div>

Repo	Count	Location(s)
texastribune	2	List section_base.html series_detail.html