Flux

Appearance

Item content ​

The item content area holds the main textual or inline content of an item, such as a title, description, or metadata.

Bas MiliusEngineer

TIP

This component is best used within an Item.

Props

is-center?: boolean
Vertically centers the content within the item.

Slots

default
The textual or inline content of the item.

Snippet ​

vue
<template>
    <Preview>
        <FluxPane style="width: min(100%, 420px)">
            <FluxItem>
                <FluxItemMedia
                    is-center
                    :size="40">
                    <FluxAvatar
                        alt="Bas Milius"
                        :size="40"
                        src="https://avatars.githubusercontent.com/u/978257?v=4"/>
                </FluxItemMedia>

                <FluxItemContent is-center>
                    <strong>Bas Milius</strong>
                    <span style="font-size: .875rem; opacity: .6">Engineer</span>
                </FluxItemContent>
            </FluxItem>
        </FluxPane>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxAvatar, FluxItem, FluxItemContent, FluxItemMedia, FluxPane } from '@flux-ui/components';
</script>