Article Row Section

By Rafi

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="https://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="https://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="https://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;
  }
}

Article Row Section

By Rafi

Product Image Gallery

Promotion Hero with Links

Neat Article container

Article Row Section

By Rafi

Similar Building Blocks

Product Image Gallery

Promotion Hero with Links

Neat Article container