<h2>Quick Links Compact Items</h2>
<p>Control Class: <code>.hoo-qlcompact</code></p>
<h3>Variants Classes:</h3>
<ul>
    <li>none</li>
    <li>If image is not required remove it from the HTML Structure</li>
    <li>Compact do not support descriptions</li>
</ul>
<h3>Demo</h3>
<div class="{{ col-count }}">
    {{> organism-quick-links-compact-grid }}
</div>
<hr />
<h2>Quick Links List Items</h2>
<p>Control Class: <code>.hoo-qllist</code></p>
<h3>Variants Classes:</h3>
<ul>
    <li>none</li>
    <li>If no description is needed remove it from the markup</li>
</ul>
<h3>Demo</h3>

<div class="{{ col-count }}">
    {{> organism-quick-links-list-grid }}
</div>

<hr />

<h2>Quick Links Button - Outline</h2>
<p>Control Class: <code>.hoo-qlbtn</code></p>
<h3>Variants Classes:</h3>
<ul>
    <li><code>.center</code> - centers the content of button</li>
    <li><code>.one-line</code>- Truncate overflowing Title to one line</li>
    <li>If no description is needed remove it from the markup</li>
</ul>
<h3>
    Demo:
</h3>
<div class="{{ col-count }}">
    {{> organism-quick-links-button-outline-grid }}
</div>
<hr />
<h2>Quick Links Button - No Outline</h2>
<p>Control Class: <code>.hoo-qlbtn .no-outline</code></p>
<h3>Variants Classes:</h3>
<ul>
    <li><code>.center</code> - centers the content of button</li>
    <li><code>.one-line</code>- Truncate overflowing Title to one line</li>
    <li>If no description is needed remove it from the markup</li>
</ul>

<h3>
    Demo:
</h3>
<div class="{{ col-count }}">
    {{> organism-quick-links-button-no-outline-grid }}
</div>
<hr />

<h2>Quick Links Button - Filled</h2>
<p>Control Class: <code>.hoo-qlbtn .filled</code></p>
<h3>Variants Classes:</h3>
<ul>
    <li><code>.center</code> - centers the content of button</li>
    <li><code>.one-line</code>- Truncate overflowing Title to one line - default is two lines of title before truncation
    </li>
    <li>If no description is needed remove it from the markup</li>
</ul>
<h3>
    Demo:
</h3>
<div class="{{ col-count }}">
    {{> organism-quick-links-button-filled-grid }}
</div>

<hr>

<h2>Quick Links Grid</h2>
<p>Control Class: <code>.hoo-qlgrid</code></p>
<h3>Variants Classes:</h3>
Do not have any variants
<h3>
    Demo:
</h3>
<div class="{{ col-count }}">
    {{> organism-quick-links-grid-grid }}
</div>

<hr>

<h2>Quick Links Tiles</h2>
<p>Control Class: <code>.hoo-qltiles</code></p>
<h3>Variants Classes:</h3>
<ul>
    <li><code>default</code> - Small Image Tiles</li>
    <li><code>.img-m</code> - Medium Image Tiles</li>
    <li><code>.img-l</code> - Large Image Tiles</li>
    <li><code>.img-xl</code> - Extra Large Image Tiles</li>
    <li><code>.img-fill</code> - Fill Image Tiles</li>
</ul>
<h3>
    Demo:
</h3>
<h4>Default or small</h4>
<div class="{{ col-count }}">
    {{> organism-quick-links-tiles-grid }}
</div>
<h4>Medium</h4>
<div class="{{ col-count }}">
    {{> organism-quick-links-tiles-medium-grid }}
</div>
<h4>Large</h4>
<div class="{{ col-count }}">
    {{> organism-quick-links-tiles-large-grid }}
</div>
<h4>Extra Large</h4>
<div class="{{ col-count }}">
    {{> organism-quick-links-tiles-xlarge-grid }}
</div>
<h4>Fill</h4>
<div class="{{ col-count }}">
    {{> organism-quick-links-tiles-fill-grid }}
</div>