Figure

NOTE: Introduced feature in v0.2.1.

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

Figure is a multimedia container Component, providing modifications for things such as images and videos.

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

<Figure max_width="33">
    <img src={IMAGE_BACKGROUND} />
</Figure>

Imports

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

Fit

NOTE: By passing an array, you can set responsive values. e.g. fit={["contain", "tablet:cover", "mobile:cover"]}

You can change how the child content is stretched across the Figure container via the fit property.

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

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>
        <Figure size="small">
            <img
                src={IMAGE_BACKGROUND}
                data-width="tiny"
                data-height="medium"
            />
        </Figure>
    </div>

    <div>
        <Text is="strong">CONTAIN</Text>
        <Figure fit="contain">
            <img
                src={IMAGE_BACKGROUND}
                data-width="tiny"
                data-height="medium"
            />
        </Figure>
    </div>

    <div>
        <Text is="strong">COVER</Text>
        <Figure fit="cover">
            <img
                src={IMAGE_BACKGROUND}
                data-width="tiny"
                data-height="medium"
            />
        </Figure>
    </div>

    <div>
        <Text is="strong">FILL</Text>
        <Figure fit="fill">
            <img
                src={IMAGE_BACKGROUND}
                data-width="tiny"
                data-height="medium"
            />
        </Figure>
    </div>

    <div>
        <Text is="strong">NONE</Text>
        <Figure fit="none">
            <img
                src={IMAGE_BACKGROUND}
                data-width="tiny"
                data-height="medium"
            />
        </Figure>
    </div>

    <div>
        <Text is="strong">SCALE-DOWN</Text>
        <Figure fit="scale-down">
            <img
                src={IMAGE_BACKGROUND}
                data-width="tiny"
                data-height="medium"
            />
        </Figure>
    </div>
</Stack.Container>

Radius

NOTE: Introduced feature in v0.6.0.

NOTE: By passing an array, you can set responsive values. e.g. radius={["tiny", "tablet:medium", "mobile:medium"]}

You can modify the border radius of the child content via the radius property.

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

<Mosaic.Container spacing="medium" sizing="tiny">
    <div>
        <Text is="strong">DEFAULT</Text>
        <Figure>
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">NONE</Text>
        <Figure radius="none">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">NANO</Text>
        <Figure radius="nano">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">TINY</Text>
        <Figure radius="tiny">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">SMALL</Text>
        <Figure radius="small">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>
        <Figure radius="medium">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">LARGE</Text>
        <Figure radius="large">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">HUGE</Text>
        <Figure radius="huge">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">MASSIVE</Text>
        <Figure radius="massive">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>
</Mosaic.Container>

Shape

NOTE: Introduced feature in v0.6.0.

NOTE: By passing an array, you can set responsive values. e.g. shape={["circle", "tablet:pill", "mobile:pill"]}

You can modify the shape of the child content via the shape property.

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

<Mosaic.Container spacing="medium" sizing="tiny">
    <div>
        <Text is="strong">DEFAULT</Text>
        <Figure>
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">CIRCLE</Text>
        <Figure shape="circle">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>

    <div>
        <Text is="strong">PILL</Text>
        <Figure shape="pill">
            <img src={IMAGE_BACKGROUND} />
        </Figure>
    </div>
</Mosaic.Container>