Let us know what you think about the new Building Blocks

Article Row Section

By Rafi

F6
#
How do I use This?

A news, blog or article block that you can use to lead into your writing. It works like a media object, meaning the image stays it's natural size until it stack for a small screen. You can use the .article-row-reversed class to have the image on right for large screens.

HTML
<div class="article-row-section">
  <div class="article-row-section-inner">

    <h2 class="article-row-section-header">News</h2>

    <a href="#">
      <article class="article-row">
        <div class="article-row-img">
          <img src="http://placehold.it/200" alt="picture of a whale eating a donkey" />
        </div>
        <div class="article-row-content">
          <h1 class="article-row-content-header">HOW SPENDING $162,301.42 ON CLOTHES MADE ME $692,500</h1>

          <p class="article-row-content-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quia sit ullam, assumenda et. est at. Minima cum enim, vero eligendi perspiciatis similique modi voluptatem officia fugiat.</p>

          <p class="article-row-content-author">By Yeti</p>
          <time class="article-row-content-time" datetime="2008-02-14 20:00">July 14th 2021</time>
        </div>
      </article>
    </a>

    <a href="#">
      <article class="article-row article-row-reversed">
        <div class="article-row-img">
          <img src="http://placehold.it/200" alt="picture of a whale eating a donkey" />
        </div>
        <div class="article-row-content">
          <h1 class="article-row-content-header">HOW TO QUIT YOUR JOB, MOVE TO PARADISE AND GET PAID TO CHANGE THE WORLD</h1>

          <p class="article-row-content-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore accusamus sint quas, odit, enim architecto officiis culpa!</p>

          <p class="article-row-content-author">By Yeti</p>
          <time class="article-row-content-time" datetime="2008-02-14 20:00">July 14th 2021</time>
        </div>
      </article>
    </a>

    <a href="#">
      <article class="article-row">
        <div class="article-row-img">
          <img src="http://placehold.it/200" alt="picture of a whale eating a donkey" />
        </div>
        <div class="article-row-content">
          <h1 class="article-row-content-header">HOW I’M GOING TO LOSE ALL MY CUSTOMERS AND WRECK MY BUSINESS</h1>

          <p class="article-row-content-description">Lorem ipsum dolor sit amet, consectetur cupiditate, unde libero quisquam ipsam debitis earum omnis aperiam nulla eaque vitae error optio tempora voluptatem, quae impedit laborum placeat. Expedita!</p>

          <p class="article-row-content-author">By Yeti</p>
          <time class="article-row-content-time" datetime="2008-02-14 20:00">July 14th 2021</time>
        </div>
      </article>
    </a>

  </div>
</div>

.article-row-section {
  @include flex-grid-row(null, $global-width, 12);
  justify-content: center;
}

.article-row-section-inner {
  @include flex-grid-column(12);

  @include breakpoint(medium) {
    @include flex-grid-column(10);
  }
}

.article-row-section-header {
  padding: 1.5rem 0;
  margin: 0;
  line-height: 1;
}

.article-row {
  display: flex;
  flex-direction: column;
  border-top: 1px solid $light-gray;
  padding: 1.5rem 0;

   @include breakpoint(medium) {
    flex-direction: row;
  }
}

.article-row-img img {
  width: 100%;

  @include breakpoint(medium) {
    max-width: none;
    width: auto;
  }
}

.article-row-content {
  padding: 1.5rem 0 0;
  color: $body-font-color;

  @include breakpoint(medium) {
    padding: 0 0 0 1.5rem;
  }
}

.article-row-content-header {
  font-size: 1.5rem;
}

.article-row-content-description {
  font-size: 1.25rem;
}

.article-row-content-author,
.article-row-content-time {
  font-size: 0.875rem;
  margin-bottom: 0;
  color: $dark-gray;
}

.article-row-reversed {
  .article-row-content {
    order: 2;
    padding: 0 1.5rem 0 0;
  }

  .article-row-img {
    order: 1;
    padding: 0 0 1.5rem 0;
  }

  @include breakpoint(medium) {
    .article-row-content {
      order: 1;
    }

    .article-row-img {
      order: 2;
    }
  }
}


.article-row-section {
  max-width: 75rem;
  margin-right: auto;
  margin-left: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.article-row-section-inner {
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
  max-width: 100%;
}

@media print, screen and (min-width: 40em) {
  .article-row-section-inner {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

@media print, screen and (min-width: 40em) {
  .article-row-section-inner {
    -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
            flex: 0 0 83.33333%;
    max-width: 83.33333%;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
    max-width: 83.33333%;
  }
}

@media print, screen and (min-width: 40em) and (min-width: 40em) {
  .article-row-section-inner {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

.article-row-section-header {
  padding: 1.5rem 0;
  margin: 0;
  line-height: 1;
}

.article-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  border-top: 1px solid #e6e6e6;
  padding: 1.5rem 0;
}

@media print, screen and (min-width: 40em) {
  .article-row {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.article-row-img img {
  width: 100%;
}

@media print, screen and (min-width: 40em) {
  .article-row-img img {
    max-width: none;
    width: auto;
  }
}

.article-row-content {
  padding: 1.5rem 0 0;
  color: #0a0a0a;
}

@media print, screen and (min-width: 40em) {
  .article-row-content {
    padding: 0 0 0 1.5rem;
  }
}

.article-row-content-header {
  font-size: 1.5rem;
}

.article-row-content-description {
  font-size: 1.25rem;
}

.article-row-content-author,
.article-row-content-time {
  font-size: 0.875rem;
  margin-bottom: 0;
  color: #8a8a8a;
}

.article-row-reversed .article-row-content {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  padding: 0 1.5rem 0 0;
}

.article-row-reversed .article-row-img {
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  padding: 0 0 1.5rem 0;
}

@media print, screen and (min-width: 40em) {
  .article-row-reversed .article-row-content {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  .article-row-reversed .article-row-img {
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
}

JS