Session 0 component html solution

section.html

<!-- Front End Components -->

<!-- SECTION // -->
<!-- Component class modifier changes background image -->
<!-- .page-section--spotlight -->
<section class="page-section page-section--spotlight">
  <div class="l-constrain">
    <header class="page-section__header">
      <h2 class="page-section__title">Title</h2>
      <a href="#" class="page-section__link">See All</a>
    </header>

    <div class="page-section__body">
      <!-- Section Content Goes Here -->
    </div>
    <!-- Option Footer accepts other compoents or markup-->
    <footer>
      <a class="button">Subscribe</a>
    </footer>
  </div>
</section>
<!-- // SECTION  -->


<!-- BUTTON // -->
<a class="button">Subscribe</a>
<!--// BUTTON -->



<!-- CATEGORY // -->
<div class="category category--type">
  category
</div>
<!--// CATEGORY-->


<!-- FIGURE //-->
<figure class="figure">
  <img src="https://picsum.photos/200/300" alt="This is a picture">
  <!-- optional figure caption -->
  <figcaption>This is a caption</figcaption>
</figure>
<!--// FIGURE -->


<!-- TEASER //-->
<!-- 
  Modifier for teaser type: updates header title type,
  general font size  
-->
<!-- .teaser--feature-major -->
<!-- .teaser--feature-minor -->
<article class="teaser teaser--feature-major">

  <!-- Optional CATEGORY component -->
<!--   
  <div class="category category--type">
    category
  </div> 
-->

  <!-- Optional FIGURE component -->
  <!-- 
    <figure class="figure">
    <img src="#" alt="">
    <figcaption></figcaption>
  </figure> 
-->
  <h3 class="teaser__title">
    <a class="teaser__link" href="#">Teaser Title</a>
  </h3>
  <div class="teaser__byline">
    by John Smith, April Ryan
  </div>
  <div class="teaser__content">
    Mauris dapibus vivamus nibh eleifend cras netus rhoncus metus mattis.
  </div>
</article>
<!-- // TEASER -->



<!-- Layouts -->

<!-- 4 Column Layout -->
<div class="grid-4-col">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>

<!-- 3 column asynmmetrical -->
<div class="grid-50-25-25">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>