<div class="dropdown">
            <button type="button">
              <<span>Example<</span>
              <<i class="ico ico--md ico--f-caret-d"><</i>
            <</button>
            <<ul>
              <<li><<input type="checkbox" name="" value=""><<label>Label<</label><</li>
              <<li><<input type="checkbox" name="" value=""><<label>Label<</label><</li>
              <<li><<input type="checkbox" name="" value=""><<label>Label<</label><</li>
              <<li><<input type="checkbox" name="" value=""><<label>Label<</label><</li>
            <</ul>
          <</div>
        

          <div class="dropdown dropdown--primary">
            <button type="button">
              <i class="ico ico--i ico--i-male"></i>
              <span>Example with icon</span>
              <i class="ico ico--md ico--f-caret-d"></i>
            </button>
            <ul>
              <li><input type="checkbox" name="" value=""><label>Label</label></li>
              <li><input type="checkbox" name="" value=""><label>Label</label></li>
              <li><input type="checkbox" name="" value=""><label>Label</label></li>
              <li><input type="checkbox" name="" value=""><label>Label</label></li>
            </ul>
          </div>
                

          <div class="dropdown dropdown--secondary">
            <button type="button">
              <span>Example</span>
              <i class="ico ico--md ico--f-caret-d"></i>
            </button>
            <ul>
              <li><input type="checkbox" name="" value=""><label>Label</label></li>
              <li><input type="checkbox" name="" value=""><label>Label</label></li>
              <li><input type="checkbox" name="" value=""><label>Label</label></li>
              <li><input type="checkbox" name="" value=""><label>Label</label></li>
            </ul>
          </div>
        

                    <div class="dropdown dropdown--tertiary">
                        <button type="button">
                            <span>Example</span>
                            <i class="ico ico--lg ico--f-caret-d"></i>
                        </button>
                        <ul>
                            <li><input type="checkbox" name="" value=""><label>Label</label></li>
                            <li><input type="checkbox" name="" value=""><label>Label</label></li>
                            <li><input type="checkbox" name="" value=""><label>Label</label></li>
                            <li><input type="checkbox" name="" value=""><label>Label</label></li>
                        </ul>
                    </div>
                

          <div class="dropdown dropdown--quaternary">
            <button type="button">
              <span>Select country of citizenship</span>
              <i class="ico ico--md ico--f-caret-d"></i>
            </button>
            <ul>
              <li><label>Australia</label></li>
              <li><label>China</label></li>
              <li><label>India</label></li>
              <li><label>Nepal</label></li>
              <li><label>New Zealand</label></li>
              <li><label>Uganda</label></li>
            </ul>
          </div>
        

                    <div class="dropdown dropdown--label">
                        <button type="button">
                            <span>Please select a country</span>
                        </button>
                        <label>What country are you from?</label>
                        <i class="ico ico--md ico--f-caret-d"></i>
                        <ul>
                            <li data-value="Australia">Australia</li>
                            <li data-value="China">China</li>
                            <li data-value="Hong Kong">Hong Kong</li>
                            <li data-value="India">India</li>
                            <li data-value="Indonesia">Indonesia</li>
                            <li data-value="Iran">Iran</li>
                            <li data-value="Japan">Japan</li>
                            <li data-value="Korea">Korea</li>
                            <li data-value="Malaysia">Malaysia</li>
                            <li data-value="Mongolia">Mongolia</li>
                            <li data-value="Myanmar">Myanmar</li>
                            <li data-value="Nepal">Nepal</li>
                            <li data-value="Nigeria">Nigeria</li>
                            <li data-value="Pakistan">Pakistan</li>
                            <li data-value="Phillipines">Phillipines</li>
                            <li data-value="Saudi Arabia">Saudi Arabia</li>
                        </ul>
                    </div>
                

          <div class="story-list">
            <div class="dropdown dropdown--secondary margin-btm--24" data-type="categories" data-filter="">
              <button type="button" class="flex" readonly="" aria-readonly="true" aria-label="">
                <span>Pick a category</span>
                <i class="ico ico--md ico--f-caret-d pad--4"></i>
              </button>
              <ul>
                <div class="clear">
                  <h4>Categories</h4>
                  <button type="button" name="button">Clear all</button>
                </div>
                <li>
                  <input type="checkbox" name="" value="">
                  <label for="">
                    <p>Services</p>
                    <span></span>
                  </label>
                </li>
                <li>
                  <input type="checkbox" name="" value="">
                  <label for="">
                    <p>Products</p>
                    <span></span>
                  </label>
                </li>
                <li>
                  <input type="checkbox" name="" value="">
                  <label for="">
                    <p>Lifestyle and wellbeing</p>
                    <span></span>
                  </label>
                </li>
                <li>
                  <input type="checkbox" name="" value="">
                  <label for="">
                    <p>Research and innovation</p>
                    <span></span>
                  </label>
                </li>
                <li>
                  <input type="checkbox" name="" value="">
                  <label for="">
                    <p>Software and gaming</p>
                    <span></span>
                  </label>
                </li>
              </ul>
            </div>
            <div class="no-results">
              <h4>No results</h4>
              <p>Sorry, there doesn't seem to be anything matching your query.</p>
            </div>
            <div class="story story--secondary">
              <div class="margin-btm--16">
                <div class="tag tag--light-tertiary">Services</div>
              </div>
              <div class="img__company">
                <img src="https://picsum.photos/500/300?random=1" alt="Random image">
              </div>
              <h3>Story Title — 30cc</h3>
              <h4></h4>
              <span class="flex flex--column flex--align-start">
                <p>In collaboration with an inter-disciplinary research team of experts from universities and government, Associate Professor Paul Beggs has taken a leading role in research at the frontier of this dynamic field. It encompasses the MJA-Lancet Countdown, trac...</p>
                <a class="link--cta" href="https://www.mq.edu.au/faculty-of-science-and-engineering/departments-and-schools/department-of-earth-and-environmental-sciences/impact-case-studies/the-perfect-storm-climate-change-and-asthma">Read more - 25 cc</a>
              </span>
            </div>
            <div class="story story--secondary">
              <div class="margin-btm--16">
                <div class="tag tag--light-tertiary">Products</div>
                <div class="tag tag--light-tertiary">Research and innovation</div>
                <div class="tag tag--light-tertiary">Lifestyle and wellbeing</div>
              </div>
              <div class="img__company">
                <img src="https://picsum.photos/500/300?random=2" alt="Random image">
              </div>
              <h3>Story Title — 30cc</h3>
              <h4></h4>
              <span class="flex flex--column flex--align-start">
                <p>In collaboration with an inter-disciplinary research team of experts from universities and government, Associate Professor Paul Beggs has taken a leading role in research at the frontier of this dynamic field. It encompasses the MJA-Lancet Countdown, trac...</p>
                <a class="link--cta" href="https://www.mq.edu.au/faculty-of-science-and-engineering/departments-and-schools/department-of-earth-and-environmental-sciences/impact-case-studies/the-perfect-storm-climate-change-and-asthma">Read more - 25 cc</a>
              </span>
            </div>
            <div class="story story--secondary">
              <div class="margin-btm--16">
                <div class="tag tag--light-tertiary">Software and gaming</div>
              </div>
              <div class="img__company">
                <img src="https://picsum.photos/500/300?random=3" alt="Random image">
              </div>
              <h3>Story Title — 30cc</h3>
              <h4></h4>
              <span class="flex flex--column flex--align-start">
                <p>In collaboration with an inter-disciplinary research team of experts from universities and government, Associate Professor Paul Beggs has taken a leading role in research at the frontier of this dynamic field. It encompasses the MJA-Lancet Countdown, trac...</p>
                <a class="link--cta" href="https://www.mq.edu.au/faculty-of-science-and-engineering/departments-and-schools/department-of-earth-and-environmental-sciences/impact-case-studies/the-perfect-storm-climate-change-and-asthma">Read more - 25 cc</a>
              </span>
            </div>
            <div class="story story--secondary">
              <div class="margin-btm--16">
                <div class="tag tag--light-tertiary">Software and gaming</div>
                <div class="tag tag--light-tertiary">Products</div>
              </div>
              <div class="img__company">
                <img src="https://picsum.photos/500/300?random=4" alt="Random image">
              </div>
              <h3>Story Title — 30cc</h3>
              <h4></h4>
              <span class="flex flex--column flex--align-start">
                <p>In collaboration with an inter-disciplinary research team of experts from universities and government, Associate Professor Paul Beggs has taken a leading role in research at the frontier of this dynamic field. It encompasses the MJA-Lancet Countdown, trac...</p>
                <a class="link--cta" href="https://www.mq.edu.au/faculty-of-science-and-engineering/departments-and-schools/department-of-earth-and-environmental-sciences/impact-case-studies/the-perfect-storm-climate-change-and-asthma">Read more - 25 cc</a>
              </span>
            </div>
          </div>