Flux

Appearance

Item media ​

The item media area holds a visual element such as an avatar, icon, or image that accompanies the item content.

Project AuroraCreated last week

TIP

This component is best used within an Item.

Props

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

size?: number
The size of the media area in pixels.

Slots

default
The media content, such as an avatar or image.

Snippet ​

vue
<template>
    <Preview>
        <FluxPane style="width: min(100%, 420px)">
            <FluxItem>
                <FluxItemMedia
                    is-center
                    :size="48">
                    <FluxAvatar
                        alt="Project icon"
                        fallback-icon="rocket"
                        :size="48"/>
                </FluxItemMedia>

                <FluxItemContent is-center>
                    <strong>Project Aurora</strong>
                    <span style="font-size: .875rem; opacity: .6">Created last week</span>
                </FluxItemContent>
            </FluxItem>
        </FluxPane>
    </Preview>
</template>

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