Flux

Appearance

Info ​

The info component is used to display short, informative messages that provide additional context or guidance to the user.

Accessible for people with the age of 16 or higher. We don't provide refunds when you're not allowed to enter.

Props

icon: FluxIconName
The icon to display.

Slots

default
The content to display.

Examples ​

Basic

A basic info display.

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>
            <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>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Multiple

Multiple info's to display.

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 ​