Glossery Section
Responsive list of terms and definitions
Component Props
mainTitle: [string] - Section main title
section: [array] - Alphabetic range of glossary terms
- secTitle: [string] - Section main title
items: [array] - list of product literature card data
- term: [string] - Definition term
description: [string] - Definition description
Example
<section class="rbn-section-space text-bg-dark">
<div class="container-xxl">
<div class="row">
<div class="col">
<h2 class="text-uppercase h4">Main section title</h2>
</div>
</div>
<div class="row">
<div class="col rbn-column-flow">
<h3 class="fw-normal mb-2">A-D</h3>
<dl class="rbn-glossary-list">
<dt>Term</dt>
<dd>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
<dt>Term</dt>
<dd>Amet mattis vulputate enim nulla aliquet. In dictum non consectetur a erat nam at lectus.</dd>
<dt>Term</dt>
<dd>Massa id neque aliquam vestibulum morbi blandit cursus risus at. Etiam tempor orci eu lobortis. Tincidunt praesent semper feugiat nibh sed.</dd>
<dt>Term</dt>
<dd>Morbi tincidunt augue interdum velit euismod in pellentesque.</dd>
<dt>Term</dt>
<dd>Ac ut consequat semper viverra nam libero justo laoreet. Sit amet dictum sit amet justo donec enim.</dd>
<dt>Term</dt>
<dd>Hac habitasse platea dictumst vestibulum. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.</dd>
</dl>
<h3 class="fw-normal mb-2">E-H</h3>
<dl class="rbn-glossary-list">
<dt>Term</dt>
<dd>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
<dt>Term</dt>
<dd>Amet mattis vulputate enim nulla aliquet. In dictum non consectetur a erat nam at lectus.</dd>
<dt>Term</dt>
<dd>Massa id neque aliquam vestibulum morbi blandit cursus risus at. Etiam tempor orci eu lobortis. Tincidunt praesent semper feugiat nibh sed.</dd>
<dt>Term</dt>
<dd>Hac habitasse platea dictumst vestibulum. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.</dd>
<dt>Term</dt>
<dd>Morbi tincidunt augue interdum velit euismod in pellentesque.</dd>
<dt>Term</dt>
<dd>Ac ut consequat semper viverra nam libero justo laoreet. Sit amet dictum sit amet justo donec enim.</dd>
</dl>
<h3 class="fw-normal mb-2">I-L</h3>
<dl class="rbn-glossary-list">
<dt>Term</dt>
<dd>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
<dt>Term</dt>
<dd>Amet mattis vulputate enim nulla aliquet. In dictum non consectetur a erat nam at lectus.</dd>
<dt>Term</dt>
<dd>Massa id neque aliquam vestibulum morbi blandit cursus risus at. Etiam tempor orci eu lobortis. Tincidunt praesent semper feugiat nibh sed.</dd>
<dt>Term</dt>
<dd>Morbi tincidunt augue interdum velit euismod in pellentesque.</dd>
<dt>Term</dt>
<dd>Ac ut consequat semper viverra nam libero justo laoreet. Sit amet dictum sit amet justo donec enim.</dd>
<dt>Term</dt>
<dd>Hac habitasse platea dictumst vestibulum. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.</dd>
<dt>Term</dt>
<dd>Massa id neque aliquam vestibulum morbi blandit cursus risus at. Etiam tempor orci eu lobortis. Tincidunt praesent semper feugiat nibh sed.</dd>
</dl>
<h3 class="fw-normal mb-2">M-P</h3>
<dl class="rbn-glossary-list">
<dt>Term</dt>
<dd>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
<dt>Term</dt>
<dd>Amet mattis vulputate enim nulla aliquet. In dictum non consectetur a erat nam at lectus.</dd>
<dt>Term</dt>
<dd>Massa id neque aliquam vestibulum morbi blandit cursus risus at. Etiam tempor orci eu lobortis. Tincidunt praesent semper feugiat nibh sed.</dd>
<dt>Term</dt>
<dd>Morbi tincidunt augue interdum velit euismod in pellentesque.</dd>
<dt>Term</dt>
<dd>Ac ut consequat semper viverra nam libero justo laoreet. Sit amet dictum sit amet justo donec enim.</dd>
<dt>Term</dt>
<dd>Hac habitasse platea dictumst vestibulum. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.</dd>
</dl>
<h3 class="fw-normal mb-2">Q-T</h3>
<dl class="rbn-glossary-list">
<dt>Term</dt>
<dd>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
<dt>Term</dt>
<dd>Amet mattis vulputate enim nulla aliquet. In dictum non consectetur a erat nam at lectus.</dd>
<dt>Term</dt>
<dd>Massa id neque aliquam vestibulum morbi blandit cursus risus at. Etiam tempor orci eu lobortis. Tincidunt praesent semper feugiat nibh sed.</dd>
<dt>Term</dt>
<dd>Ac ut consequat semper viverra nam libero justo laoreet. Sit amet dictum sit amet justo donec enim.</dd>
<dt>Term</dt>
<dd>Hac habitasse platea dictumst vestibulum. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.</dd>
</dl>
<h3 class="fw-normal mb-2">U-Z</h3>
<dl class="rbn-glossary-list">
<dt>Term</dt>
<dd>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
<dt>Term</dt>
<dd>Amet mattis vulputate enim nulla aliquet. In dictum non consectetur a erat nam at lectus.</dd>
</dl>
</div>
</div>
</div>
</section>