UI Molecules

<button type="button" class="amui-a-btn is--default btn" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Link with href</button>

<div class="amui-m-collapse collapse" id="collapseExample">
  <div class="amui-m-collapse__body">
    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
  </div>
</div>

<div id="accordion" class="amui-m-accordion" role="tablist" aria-multiselectable="true">
  <div class="amui-m-panel amui-m-accordion__content">
    <div class="amui-m-panel__heading" role="tab" id="headingOne">
      <a class="amui-m-panel__heading-title collapsed" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseOne" href="#collapseOne">
        <div class="amui-g-grid row">
          <div class="amui-g-grid__item col-xs-11 is--pull">
            <h3 class="panel-title">Header 3</h3>
          </div>
          <div class="amui-g-grid__item col-xs-1 is--push">
            <i class="material-icons md-24 amui-h-mt-xxs"></i>
          </div>
        </div>
      </a>
    </div>
    <div id="collapseOne" class="amui-m-panel__body collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true">
      <div class="amui-m-panel">
        <div class="amui-m-panel__heading">
          <h4 class="amui-m-panel__heading-title">Header 4</h4>
        </div>
        <div class="amui-m-panel__body is--info">
          <div class="amui-m-panel__heading">
            <h4 class="amui-m-panel__heading-title">Header 5</h4>
          </div>

          <div class="amui-m-panel__body">
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>  <!--  Accordions container -->

<div id="accordion" class="amui-m-accordion is--dark" role="tablist" aria-multiselectable="true">
  <div class="amui-m-panel amui-m-accordion__content">
    <div class="amui-m-panel__heading" role="tab" id="headingOne">
      <a class="amui-m-panel__heading-title collapsed" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseTwo" href="#collapseTwo">
        <div class="amui-g-grid row">
          <div class="amui-g-grid__item col-xs-11 is--pull">
            <h3 class="panel-title">Header 3</h3>
          </div>
          <div class="amui-g-grid__item col-xs-1 is--push">
            <i class="material-icons md-24 amui-h-mt-xxs"></i>
          </div>
        </div>
      </a>
    </div>
    <div id="collapseTwo" class="amui-m-panel__body collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true">

      <div class="amui-m-panel">
        <div class="amui-m-panel__heading">
          <h4 class="amui-m-panel__heading-title">Header 4</h4>
        </div>
        <div class="amui-m-panel__body">
          <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
        </div>
        <div class="amui-m-panel__heading">
          <h4 class="amui-m-panel__heading-title">Header 4</h4>
        </div>
        <div class="amui-m-panel__body is--info">
          <div class="amui-m-panel__heading">
            <h4 class="amui-m-panel__heading-title">Header 5</h4>
          </div>

          <div class="amui-m-panel__body">
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>  <!--  Accordions container -->