Flux

Appearance

Info stack ​

The info stack displays multiple info components in a vertical stack. It provides a clear, readable way to present informational messages in sequence without overwhelming the layout.

Het Blik 60
7141 TK Groenlo
Nederland
Accessible for people with the age of 16 or higher. We don't provide refunds when you're not allowed to enter.

Slots

default
The info items that should be stacked.

Examples ​

Basic

A basic info stack.

Het Blik 60
7141 TK Groenlo
Nederland
Accessible for people with the age of 16 or higher. We don't provide refunds when you're not allowed to enter. 

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxInfoStack>
                <FluxInfo
                    icon="map-location">
                    Het Blik 60
                    <br>
                    7141 TK Groenlo
                    <br>
                    Nederland
                </FluxInfo>

                <FluxInfo
                    icon="circle-info">
                    Accessible for people with the age of 16 or higher. We don't provide refunds when you're not allowed to enter.
                </FluxInfo>
            </FluxInfoStack>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxInfo, FluxInfoStack, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Used components ​