Feature a list of quick links as a secondary navigation.
The Quick Links component provides a simple and structured way to display navigational links alongside icons, allowing users to quickly access key sections of the site. Each quick link consists of an SVG icon (using the Icon Component structure), link text, and a link URL. The component supports customization using utility classes for background and text color, making it flexible for different design requirements.
The following example shows the basic structure of the Quick Links component:
<div class="bt1d-quick-links">
<div class="bt1d-quick-link">
<span class="bt1d-quick-link__icon">
<svg class="bt1d-icon" role="img" aria-label="Link">
<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-symptoms"></use>
</svg>
</span>
<a href="#" class="bt1d-quick-link__link">Symptoms</a>
</div>
<div class="bt1d-quick-link">
<span class="bt1d-quick-link__icon">
<svg class="bt1d-icon" role="img" aria-label="Link">
<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-treatments"></use>
</svg>
</span>
<a href="#" class="bt1d-quick-link__link">Treatments</a>
</div>
<div class="bt1d-quick-link">
<span class="bt1d-quick-link__icon">
<svg class="bt1d-icon" role="img" aria-label="Link">
<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-faq"></use>
</svg>
</span>
<a href="#" class="bt1d-quick-link__link">FAQ</a>
</div>
<div class="bt1d-quick-link">
<span class="bt1d-quick-link__icon">
<svg class="bt1d-icon" role="img" aria-label="Link">
<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-screening"></use>
</svg>
</span>
<a href="#" class="bt1d-quick-link__link">Early Detection</a>
</div>
</div>bt1d-quick-links: The main wrapper for the Quick Links component, containing multiple quick link items.bt1d-quick-link: Wraps each individual quick link, including the icon and the link text.bt1d-quick-link__icon: The class for the SVG icon, which is structured using the Icon Component.bt1d-quick-link__link: The class for the clickable link text that directs users to the specified URL.The Quick Links component can be customized with utility classes such as bt1d-opal-background-color for background color and can also extend beyond its parent container to go full width using the bt1d-alignfull class.
Example with Utility Classes:
<div class="bt1d-quick-links bt1d-alignfull bt1d-opal-background-color">
<div class="bt1d-quick-link">
<span class="bt1d-quick-link__icon">
<svg class="bt1d-icon" role="img" aria-label="Link">
<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-symptoms"></use>
</svg>
</span>
<a href="#" class="bt1d-quick-link__link">Symptoms</a>
</div>
<!-- Additional quick links can be added here -->
</div>If you’re stuck or need assistance, don’t hesitate to reach out to our support team for guidance.