teaser-composite.html

<!-- 
This is the teaser composite.
For the sake of simplicity, it only has an image an a button.
Could also have a description, tags, social media buttons,
etc
-->
<div class="teaser__base atomic-align--center">
  <div class="teaser__wrapper">
    <!-- Let's include here out image -->
    <picture>
       <source srcset="image-cropped?witdh=480" media="(min-width: 480px)">
       <source srcset="image-cropped?witdh=768" media="(min-width: 768px)">
       <source srcset="image-cropped?witdh=1024" media="(min-width: 1024px)">
       <img src="cropped?witdh=480.png" alt="image-alt">
    </picture>
    <!-- End of image include -->
  </div>
  <div class="teaser__wrapper">
  <!-- Let's include here out button -->
    <button class="button__base" type="button">
      <span class="button__label">Click me!</span>
      <svg class="button__icon icon-class">
          <use xlink:href="#icon-class"></use>
        </svg>
    </button> 
    <!-- End of button include -->
  </div>
</div>