<div class="[modifier class]">
  <div><div class="duk-island--tertiary">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
</div>

 <div id="page__main"><div class="container">
   Bacon ipsum dolor amet t-bone bacon alcatra pig. Meatball ball tip beef bacon, tongue doner pork pork chop ham
   pastrami beef ribs jowl short loin ground round. Sausage strip steak turkey flank doner ham hock ribeye venison
   pork belly tri-tip fatback. Salami alcatra meatball swine. Tri-tip sausage frankfurter ham, rump cow burgdoggen
   porchetta leberkas ham hock capicola beef turducken tail swine. Rump drumstick swine andouille shankle ribeye.
 </div></div>

<div class="layout-multi-column layout-multi-column--3">
  <div class=""><h3>This is a 3 column card layout</h3><p>Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Lacinia quis vel eros donec ac odio tempor orci dapibus.</p></div>
    <div class="field--name-field-cards">
      <div class="field__item">
        <div class="card paragraph paragraph__card paragraph--type-card teaser teaser--stacked">
          <div class="teaser__image">
            <a href="#"><img src="https://picsum.photos/600/400?random=1" width="600" height="400" class="image-style-card"></a>
          </div>
         <div class="teaser__main">
           Card 1
         </div>
       </div>
     </div>
     <div class="field__item">
       <div class="card paragraph paragraph__card paragraph--type-card teaser teaser--stacked">
         <div class="teaser__image">
            <a href="#"><img src="https://picsum.photos/600/400?random=1" width="600" height="400" class="image-style-card"></a>
         </div>
         <div class="teaser__main">
           Card 2
         </div>
       </div>
     </div>
  <div class="field__item">
    <div class="card paragraph paragraph__card paragraph--type-card teaser teaser--stacked">
      <div class="teaser__image">
        <a href="#"><img src="https://picsum.photos/600/400?random=1" width="600" height="400" class="image-style-card"></a>
     </div>
     <div class="teaser__main">
       Card 3
     </div>
   </div>
  </div>
 </div>
</div>

<div class="teaser teaser--horizontal">
 <div class="teaser__row">
   <div class="teaser__image">
     <a href="#">
       <img src="https://picsum.photos/400/300" width="400">
     </a>
   </div>
   <div class="teaser__content">
     <div class="teaser__title">
       <div>
         <a href="#">New bins rolled out in recycling trials</a>
       </div>
     </div>
   <div class="teaser__main">
   </div>
   <div class="teaser__tag">
     <div class="field field--name-field-tags">
       <div class="field__item"><a href="#">Waste</a></div>
          <div class="field__item"><a href="#">Environment</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="node node__location node--type-location node--view-mode-teaser-large teaser-large teaser-large--location">
 <div class="teaser-large__top">
   <div class="teaser-large__image js-img-to-bg" style="background-image: url(https://picsum.photos/400/300);">
     <a href="#" hreflang="en"><img src="https://picsum.photos/400/300" width="400" height="300" class="image-style-teaser-default" style="visibility: hidden;">
     </a>
   </div>
   <div class="teaser-large__content">
     <div class="teaser-large__title">
       <h3>
         <a href="#">Lorem ipsum dolor</a>
       </h3>
     </div>
     <div class="teaser-large__meta">
       sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...
     </div>
   </div>
 </div>
 <div class="teaser-large__map">
   <iframe width="100%" style="height: 300px" id="gmap_canvas" src="https://maps.google.com/maps?q=Melbourne&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
 </div>
</div>

 <div class="teaser-map-popup">
   <div class="teaser__row">
     <div class="teaser__image">
       <img src="http://placekitten.com/100/100" />
     </div>
     <div class="teaser__content">
       <h4><a href="#">This is the title</a></h4>
       Subtext
     </div>
   </div>
 </div>

 <div class="teaser-mini">
   <div class="teaser__row">
     <div class="teaser__image">
       <img src="http://placekitten.com/100/100" />
     </div>
     <div class="teaser__content">
       <strong>This is the title</strong>
     </div>
   </div>
 </div>

<div class="teaser teaser--stacked" style="max-width: 360px;">
  <div class="teaser__image js-img-to-bg">
    <a href="#"><img src="https://picsum.photos/400/300" width="400" height="300" class="image-style-teaser-default"></a>
  </div>
  <div class="teaser_content-wrapper">
    <div class="teaser__title">
      <a href="#" hreflang="en">Lorem ipsum dolor</a>
    </div>
    <div class="teaser__tag">
      <div class="category-tags category-tags--secondary">
        <a>Cafe</a>
      </div>
    </div>
    <div class="teaser__main">
      sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    </div>
    <div class="teaser__suffix">
      <div class="field field--name-post-date">
        2nd Nov
      </div>
      <div class="field field--name-comments-count">
        3 Comments
      </div>
    </div>
  </div>
</div>

 <ul class="tags">
   <li><a href="#">One</a></li>
   <li><a href="#">Two</a></li>
   <li><a href="#">Three</a></li>
 </ul>