Container

View Source

NOTE: Introduced feature in v0.2.0.

WARNING: This feature received a breaking change in v0.6.0.

Container is a layout primitive used to typically constrain chunks of content to a max width or parent width, and centered horizontally with padding. By default it sets the max width to 65 characters.

<script>
    import {Container, Text} from "@kahi-ui/framework";
</script>

<Container>
    <Text>
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Proin et consectetur orci.
        Curabitur a egestas turpis, vitae convallis
        sapien. Sed pellentesque rutrum tellus, in
        iaculis dolor tincidunt non. Orci varius
        natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus.
    </Text>
</Container>

Imports

<script>
    import {Container} from "@kahi-ui/framework";
</script>

Elements

NOTE: Introduced feature <Container is="article"> in v0.6.0.

You can change the HTML tag rendered to DOM via the is property.

<script>
    import {
        Container,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container spacing="medium">
    <Container is="article">
        <Text is="strong">ARTICLE</Text>

        <Text>
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien. Sed pellentesque rutrum tellus, in
            iaculis dolor tincidunt non. Orci varius
            natoque penatibus et magnis dis parturient
            montes, nascetur ridiculus mus.
        </Text>
    </Container>

    <Container is="div">
        <Text is="strong">DIV</Text>

        <Text>
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien. Sed pellentesque rutrum tellus, in
            iaculis dolor tincidunt non. Orci varius
            natoque penatibus et magnis dis parturient
            montes, nascetur ridiculus mus.
        </Text>
    </Container>

    <Container is="main">
        <Text is="strong">MAIN</Text>

        <Text>
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien. Sed pellentesque rutrum tellus, in
            iaculis dolor tincidunt non. Orci varius
            natoque penatibus et magnis dis parturient
            montes, nascetur ridiculus mus.
        </Text>
    </Container>
</Stack.Container>

Properties

Container

Name Description Types
is Alters the HTML tag rendered to the DOM.
article div (DEFAULT) main

Slots

Container

Name Description Types
default Default unnamed slot.
{}