Large Article Header

By Christine Siu

full-width article header news blog flexbox

How do I use This?

A nice, large article or blog header with a background image to entice readers.

HTML

<div class="row expanded collapse">
  <div class="column">
    <div class="large-article-header">
      <div class="large-article-header-content">
        <div class="center-container">
          <div class="article-date">
            <p>Published on Jan 12, 2016</p>
          </div>
          <div class="article-title">
            <h1>A Great Big Article Title Goes Here</h1>
          </div>
          <div class="article-details">
            <div class="article-author">
              <img src="https://unsplash.it/50/50?image=1005" alt="" />
              <a href="#">Jane Austen</a>
            </div>
            <div class="article-comments">
              <a href="#"><i class="fa fa-comment" aria-hidden="true"></i> 3 Comments</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

$large-article-header-bg: url('https://unsplash.it/1024/500/?blur');
$large-article-header-color: $white;
$large-article-header-height: rem-calc(500);

.large-article-header {
  background: $large-article-header-bg no-repeat center;
  background-size: cover;
  height: $large-article-header-height;
  position: relative;

  @include breakpoint(small only) {
    height: ($large-article-header-height / 1.5);
  }
}

.large-article-header-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: rem-calc(50);
  left: 0;
  right: 0;

  @include breakpoint(small only) {
    bottom: rem-calc(20);
  }

  .center-container {
    width: 50%;
    margin: 0 auto;

    @include breakpoint(small only) {
      width: 100%;
      padding: 0 rem-calc(20);
    }
  }

  .article-date {
    color: $large-article-header-color;
  }
  .article-title {
    h1 {
      line-height: rem-calc(50);
      color: $large-article-header-color;
      font-weight: 600;

      @include breakpoint(small only) {
        line-height: rem-calc(30);
      }
    }
  }
  .article-details {
    display: flex;
    align-items: center;
    justify-content: space-between;

    a {
      color: $large-article-header-color;
    }
  }
  .article-author {
    display: flex;
    align-items: center;
    margin: $global-margin 0;
    img {
      border-radius: rem-calc(50);
    }
    a {
      margin-left: $global-margin;
    }
  }
}

.large-article-header {
  background: url("https://unsplash.it/1024/500/?blur") no-repeat center;
  background-size: cover;
  height: 31.25rem;
  position: relative;
}

@media screen and (max-width: 39.9375em) {
  .large-article-header {
    height: 20.83333rem;
  }
}

.large-article-header-content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  bottom: 3.125rem;
  left: 0;
  right: 0;
}

@media screen and (max-width: 39.9375em) {
  .large-article-header-content {
    bottom: 1.25rem;
  }
}

.large-article-header-content .center-container {
  width: 50%;
  margin: 0 auto;
}

@media screen and (max-width: 39.9375em) {
  .large-article-header-content .center-container {
    width: 100%;
    padding: 0 1.25rem;
  }
}

.large-article-header-content .article-date {
  color: #fefefe;
}

.large-article-header-content .article-title h1 {
  line-height: 3.125rem;
  color: #fefefe;
  font-weight: 600;
}

@media screen and (max-width: 39.9375em) {
  .large-article-header-content .article-title h1 {
    line-height: 1.875rem;
  }
}

.large-article-header-content .article-details {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.large-article-header-content .article-details a {
  color: #fefefe;
}

.large-article-header-content .article-author {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0;
}

.large-article-header-content .article-author img {
  border-radius: 3.125rem;
}

.large-article-header-content .article-author a {
  margin-left: 1rem;
}

Large Article Header

By Christine Siu

News Image Gallery

Product Image Gallery

Image Hover Link Block

Large Article Header

By Christine Siu

Similar Building Blocks

News Image Gallery

Product Image Gallery

Image Hover Link Block