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.

Examples

Rich content

Combine a title, description and inline metadata within the content area.

Preview

Quarterly reportFinancial overview for Q1 2026, including revenue and forecasts.

PDF

Shared

Code

<template>
    <FluxPane style="width: min(100%, 480px)">
        <FluxItem>
            <FluxItemMedia
                is-center
                :size="40">
                <FluxBoxedIcon
                    color="primary"
                    name="folder"
                    :size="40"/>
            </FluxItemMedia>

            <FluxItemContent>
                <strong>Quarterly report</strong>
                <span style="font-size: .875rem; opacity: .6">Financial overview for Q1 2026, including revenue and forecasts.</span>

                <div style="display: flex; gap: 6px; margin-top: 6px">
                    <FluxBadge label="PDF"/>
                    <FluxBadge
                        color="info"
                        label="Shared"/>
                </div>
            </FluxItemContent>
        </FluxItem>
    </FluxPane>
</template>

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

Title variations

Content can be just a title, or a title with a supporting description.

Preview

Title only

Title with description A supporting line of text below the title.

Code

<template>
    <FluxPane style="width: min(100%, 420px)">
        <FluxItemStack>
            <FluxItem>
                <FluxItemMedia
                    is-center
                    :size="40">
                    <FluxBoxedIcon
                        color="primary"
                        name="file-lines"
                        :size="40"/>
                </FluxItemMedia>

                <FluxItemContent is-center>
                    <strong>Title only</strong>
                </FluxItemContent>
            </FluxItem>

            <FluxItem>
                <FluxItemMedia
                    is-center
                    :size="40">
                    <FluxBoxedIcon
                        color="primary"
                        name="file-lines"
                        :size="40"/>
                </FluxItemMedia>

                <FluxItemContent>
                    <strong>Title with description</strong>
                    <FluxText
                        size="small"
                        color="muted">
                        A supporting line of text below the title.
                    </FluxText>
                </FluxItemContent>
            </FluxItem>
        </FluxItemStack>
    </FluxPane>
</template>

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

Centered

Use is-center to vertically center the content next to a taller media element.

Preview

Project Aurora Vertically centered next to a taller media element.

Code

<template>
    <FluxPane style="width: min(100%, 420px)">
        <FluxItem>
            <FluxItemMedia :size="64">
                <FluxBoxedIcon
                    color="primary"
                    name="rocket"
                    :size="64"/>
            </FluxItemMedia>

            <FluxItemContent is-center>
                <strong>Project Aurora</strong>
                <FluxText
                    size="small"
                    color="muted">
                    Vertically centered next to a taller media element.
                </FluxText>
            </FluxItemContent>
        </FluxItem>
    </FluxPane>
</template>

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

Snippet

FluxItemContent.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>