<div class="accordion">
   <div class="accordion__item">
     <h4 class="title-text__title">This is a collapsed item</h4>
     <div class="title-text__text"><p>Lorum ipsum dolar sit.</p></div>
   </div>
   <div class="accordion__item open">
     <h4 class="title-text__title open">This is an open item</h4>
     <div class="title-text__text">
       <p>
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </p>
     </div>
   </div>
 </div>

<div id="sitewide-alert">
 <div>
   <div class="sitewide-alert alert [modifier class]" role="alert">
     <span>
       <div>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
       </div>
     </span>
     <button class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
   </div>
 </div>
</div>

<div class="hero-banner [modifier class]">
 <div class="hero-banner__image js-img-to-bg" style="background-image: url(https://picsum.photos/1200/500?random=1);">
  <img src="https://picsum.photos/1200/500?random=1" width="1200" height="500" class="image-style-hero-banner" style="visibility: hidden;">
 </div>
 <div class="hero-banner__container container">
   <div class="hero-banner__container-content">
     <div class="hero-banner__title">
     Welcome to District. This is our default website theme.</div>
     <a href="/services" class="button button--light">Learn More</a>
   </div>
 </div>
</div>

<div class="page__highlight with-hero">
 <div class="region region-hero">
   <div class="js-img-to-bg hero-basic__image" style="background-image: url(https://picsum.photos/1200/400?random=1); background-size: cover;">  <img src="https://picsum.photos/1200/400?random=1" width="1200" height="400" alt="" class="image-style-banner" style="visibility: hidden;">
   </div>
 </div>
 <div class="container">
   <div class="region region-breadcrumb">
     <div class="block block-system block-system-breadcrumb-block">
       <nav class="breadcrumb" role="navigation">
         <h2 id="system-breadcrumb" class="visually-hidden duk-sr-only">Breadcrumb</h2>
         <ol>
           <li>
             <a href="/">Home</a>
           </li>
           <li>
             <a href="/news-events">News and Events</a>
           </li>
           <li>
             <a href="/news-events/articles">News Articles</a>
           </li>
         </ol>
       </nav>
     </div>
   </div>
   <div class="region region-title">
     <div class="block block-core block-page-title-block">
       <h1 class="js-quickedit-page-title page-title"><span class="field field--name-title field--type-string field--label-hidden">District CMS News Article</span>
       </h1>
     </div>
   </div>
 </div>
</div>

<div class="jumbotron [modifier class]">
 <div class="jumbotron__image js-img-to-bg" style="background-image: url(https://picsum.photos/1200/500?random=1);">
  <img src="https://picsum.photos/1200/500?random=1" width="1200" height="500" class="image-style-jumbotron" style="visibility: hidden;">
 </div>
 <div class="jumbotron__container container">
   <div class="jumbotron__container-content">
     <div class="jumbotron__title">
     Welcome to District. This is our default website theme.</div>
     <a href="/services" class="button button--light">Learn More</a>
   </div>
 </div>
</div>

 <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
   <ol>
     <li>
       <a href="/">Home</a>
     </li>
     <li>
       <a href="/news-events">News and Events</a>
     </li>
     <li>
       <a href="/news-events/events">Events</a>
     </li>
   </ol>
 </nav>

<div class="layout-flag layout-flag--left">
  <div class="layout-flag__image js-img-to-bg js-clickable-image" style="background-image: url(https://picsum.photos/1800/800);">
  </div>
  <div class="layout-flag__content">
    Flag content
  </div>
</div>

<div class="page__footer" style="padding: 2rem;">
 <div class="newsletter-subscription-footer block block-webform block-webform-block">
   <form class="webform-submission-form" action="/" method="post">
     <div class="webform-elements js-form-wrapper form-wrapper">
       <div class="js-form-item form-item js-form-type-email form-type-email js-form-item-email form-item-email form-no-label">
         <label for="edit-email" class="visually-hidden js-form-required form-required">Email</label>
         <input type="email" id="edit-email" name="email" value="" size="60" maxlength="254" placeholder="Enter your email to subscribe to our newsletter" class="form-email required" required="required" aria-required="true">
       </div>
       <div class="form-actions webform-actions js-form-wrapper form-wrapper" id="edit-actions--2">
         <input class="webform-button--submit button button--primary js-form-submit form-submit" type="submit" id="edit-actions-submit" name="op" value="Submit">
       </div>
     </div>
   </form>
 </div>
</div>

<div class="featured-links duk-pl--2 duk-pr--2">
  <div class="featured-links__image">
    <img src="https://www.fillmurray.com/640/640">
  </div>
  <div class="featured-links__content">
    <div class="featured-links__body">
        <h2>This is a featured links component</h2>
        <p>Nullam vitae augue orci. Suspendisse vitae nunc non velit egestas imperdiet. Morbi elit elit, elementum et tortor vitae, faucibus pellentesque elit</p>
        <h4>Popular services</h4>
    </div>
    <div class="featured-links__links">
      <ul>
        <li><a href="#">Join the library</a></li>
        <li><a href="#">Computers &amp; internet</a></li>
        <li><a href="#">Search the catalogue</a></li>
        <li><a href="#">Suggest an item</a></li>
        <li><a href="#">Locations &amp; opening hours</a></li>
        <li><a href="#">Ask a librarian</a></li>
      </ul>
    </div>
  </div>
</div>

 <div class="region-primary-menu">
   <ul class="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
 </div>

 <div class="address-map">
   <div>123 My Street Name Ave<br />My Town 1234<br />Australia</div>
   <div>
     <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>

<nav class="pager">
  <ul class="pager__items js-pager__items">
    <li class="pager__item pager__item--first">
      <a href="#" title="Go to first page">
        <span aria-hidden="true">« First</span>
      </a>
    </li>
    <li class="pager__item pager__item--previous">
      <a href="#" title="Go to previous page" rel="prev">
        <span aria-hidden="true">‹‹</span>
      </a>
    </li>
    <li class="pager__item">
      <a href="#" title="Go to page 1">1</a>
    </li>
    <li class="pager__item">
      <a href="#" title="Go to page 2">2</a>
    </li>
    <li class="pager__item is-active">
      <a href="#" title="Current page">3</a>
    </li>
    <li class="pager__item">
      <a href="#" title="Go to page 4">4</a>
    </li>
    <li class="pager__item">
      <a href="#" title="Go to page 5">5</a>
    </li>
    <li class="pager__item pager__item--next">
      <a href="#" title="Go to next page" rel="next">
        <span aria-hidden="true">››</span>
      </a>
    </li>
    <li class="pager__item pager__item--last">
      <a href="#" title="Go to last page">
        <span aria-hidden="true">Last »</span>
      </a>
    </li>
  </ul>
</nav>

 <div class="node node__landing-page node--type-landing-page node--view-mode-search-result search-result">
   <div class="search-result__title">
     <strong>
       <a href="#" hreflang="en">Lorem ipsuml</a>
     </strong>
     <span><i></i></span>
   </div>
   <div class="search-result__description">
     … Lorem <strong>ipsum</strong> dolor sit amet <strong>consectetur</strong> adipiscing elit, sed do eiusmod tempor <strong>incididunt</strong> ut labore et dolore magna aliqua. Ut enim ad minim veniam …
   </div>
   <div class="search-result__meta">
     <div class="field field--name-bundle-fieldnode field--type-ds field--label-hidden field__item">Landing page</div>
   </div>
 </div>

 <div class="social-media-share" aria-label="Social media sharing">
   <div class="social-media-share__prefix">Share</div>
   <ul class="social-media-share__list">
     <li class="social-media-share__list-item">
       <a href="http://www.facebook.com/share.php?u=http://districtcms.local/home" target="_blank" aria-label="Share this page on facebook." title="Share this page on facebook." class="social-media-share__link social-media-share__link--facebook">
         <span>Facebook</span>
       </a>
     </li>
     <li class="social-media-share__list-item">
       <a href="https://twitter.com/intent/tweet?url=http://districtcms.local/home&amp;hashtags=Hashtag" target="_blank" aria-label="Share this page on twitter." title="Share this page on twitter." class="social-media-share__link social-media-share__link--twitter">
         <span>Twitter</span>
       </a>
     </li>
     <li class="social-media-share__list-item">
       <a href="mailto:?subject=Homepage&amp;body=Check out this site http://districtcms.local/home" aria-label="Email a link to this page." title="Email a link to this page." class="social-media-share__link social-media-share__link--email">
         <span>Email</span>
       </a>
     </li>
     <li class="social-media-share__list-item">
       <a href="#" class="js-dsms-print social-media-share__link social-media-share__link--print" aria-label="Open the print dialog." title="Open the print dialog.">
         <span>Print</span>
       </a>
     </li>
   </ul>
 </div>

 <ol class="steps">
   <li class="steps__item">
     <h4 class="title-text__title">This is the first step</h4>
     <div class="title-text__text">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>
   </li>
   <li class="steps__item">
     <h4 class="title-text__title">This is the second step</h4>
     <div class="title-text__text">
       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
     </div>
   </li>
   <li class="steps__item">
     <h4 class="title-text__title">Third and final step</h4>
     <div class="title-text__text">
       <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
       <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </div>
   </li>
 </ol>

 <div class="block-views-exposed-filter-blocksearch-sitewide-search">
 <form>
   <div class="form--inline clearfix">
     <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-keywords form-item-keywords">
       <label for="edit-keywords">Keywords</label>
       <input placeholder="Find a service, event or general info" type="text" class="form-text">
     </div>
     <div class="form-actions js-form-wrapper form-wrapper">
       <input type="submit"value="Search" class="button js-form-submit form-submit">
     </div>
   </div>
 </form>
 </div>

<div class="layout-text-on-image layout-text-on-image--middle paragraph paragraph__layout-text-on-image paragraph--type-layout-text-on-image paragraph--view-mode-default text-on-image" style="max-width: 100%;">
 <div class="text-on-image__image js-img-to-bg" style="background-image: url(https://picsum.photos/1300/867);">
   <img src="https://picsum.photos/1300/867" width="1300" height="867" class="image-style-max-1300x1300" style="visibility: hidden;">
 </div>
 <div class="text-on-image__content">
   <div class="text-on-image__content--inner">
     <div class="clearfix text-formatted field field--name-field-body field--type-text-long field--label-hidden field__item">
       <h2>This is a text on image component</h2>
       <p>This can help break up content and add additional colour to your page</p>
     </div>
     <a href="#" class="button button--secondary">Find out more</a>
   </div>
 </div>
</div>