Container
The Container component is a versatile wrapper for layout and styling, rendering as different HTML5 semantic elements.
Props
Prop | Type | Default | Description |
|---|---|---|---|
type | 'div' | 'nav' | 'section' | 'main' | 'header' | 'footer' | 'aside' | 'article' | 'div' | The HTML element tag to render. |
class | string | '' | CSS classes to apply to the container. |
overrideDefaultStyling | boolean | false | If true, removes the base fluid-container class. |
transitionFn | Function | undefined | Svelte transition function. |
transitionParams | object | undefined | Parameters for the transition function. |
...rest | HTMLAttributes | — | Standard HTML attributes. |
Samples
Header
Header Content
0
<Container type="header" class="bg-primary-100 p-4">1
<Text>Header Content</Text>2
</Container>Navigation
0
<Container type="nav" class="bg-secondary-100 p-4">1
<Text>Navigation Content</Text>2
</Container>Section
Section Content
0
<Container type="section" class="bg-info-100 p-4">1
<Text>Section Content</Text>2
</Container>Footer
0
<Container type="footer" class="bg-warning-100 p-4">1
<Text>Footer Content</Text>2
</Container>