Section <kui-section>
<kui-section> provide a flexible and extensible content container with multiple variants and options
Attributes Configurations
Configure <kui-section> through the following attributes
Below is a list of the available attributes for configuring <kui-section>
| Attribute | Type | Default value | Description |
|---|---|---|---|
| kui-header-title | String | The section title | |
| kui-header-icon | String | The section icon | |
| kui-style | KUISectopn.Style | KUISectopn.Style.Light | Predefined styles that serves different semantic purposes |
| kui-outline | Boolean | false | Should the section style be outlined |
| kui-collapse-by | KUISection.CollapseBy | Defines how the section can be collapsed | |
| kui-collapsed | Boolean | false | Should the section be collapsed by default |
| kui-closable | Boolean | false | Should the section be closable by showing the close action |
| kui-allow-fullscreen | Boolean | false | Should the section be expanded to fullscreen by showing a fullscreen action |
Basic Examples
The basic usage of <kui-section> is to provide a container for your contents
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
<kui-section kui-header-title="at auctor" kui-header-icon="fas fa-award">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-header-title="mauris pharetra">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
</p>
<div slot="footer">Lorem ipsum dolor sit amet</div>
</kui-section>
Section styles
<kui-section> include various options for customizing their backgrounds, borders, and color
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Using outlined style
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
<div style="display: flex;">
<kui-section kui-style="primary" kui-header-title="fermentum et">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="secondary" kui-header-title="at auctor">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="info" kui-header-title="mauris pharetra">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
</p>
</kui-section>
<kui-section kui-style="warning" kui-header-title="sit amet">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="danger" kui-header-title="mauris augue">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
</p>
</kui-section>
<kui-section kui-style="success" kui-header-title="ullamcorper malesuada">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="light" kui-header-title="vel turpis">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="dark" kui-header-title="aliquet nibh">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
</div>
<h3>Using outlined style</h3>
<div style="display: flex;">
<kui-section kui-style="primary" kui-outline="" kui-header-title="fermentum et">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="secondary" kui-outline="" kui-header-title="at auctor">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="info" kui-outline="" kui-header-title="mauris pharetra">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
</p>
</kui-section>
<kui-section kui-style="warning" kui-outline="" kui-header-title="sit amet">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="danger" kui-outline="" kui-header-title="mauris augue">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
</p>
</kui-section>
<kui-section kui-style="success" kui-outline="" kui-header-title="ullamcorper malesuada">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="light" kui-outline="" kui-header-title="vel turpis">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-style="dark" kui-outline="" kui-header-title="aliquet nibh">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
</div>
Section visibility
Control <kui-section> visibility by collapsing the contents and expanding
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
<kui-section kui-header-title="Collapsed by default" kui-header-icon="fas fa-award" kui-collapsed="" kui-collapse-by="header">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
<kui-section kui-header-title="Collapsible Section" kui-header-icon="fas fa-award" kui-collapse-by="icon">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
</p>
<div slot="footer">Lorem ipsum dolor sit amet</div>
</kui-section>
Fullscreen Mode
<kui-section> can be expanded to fill the screen for maximum visibility
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
<kui-section kui-header-title="Fullscreen section" kui-header-icon="fas fa-award" kui-allow-fullscreen="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>
Closing the section
<kui-section> can be closed and removed from the page
Use kui-closable to allow users to close the section, but once the section is closed it can't be restored.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.
<kui-section kui-style="primary" kui-header-title="fermentum et" kui-closable="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Augue lacus viverra vitae congue.
</p>
</kui-section>