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.

Examples

Variants

The media area can hold an avatar, a boxed icon or a raw image.

Preview

AvatarProfile photo with fallback

Boxed iconIcon in a colored container

ImageRaw image thumbnail

Code

<template>
    <FluxPane style="width: min(100%, 420px)">
        <FluxItemStack>
            <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>Avatar</strong>
                    <span style="font-size: .875rem; opacity: .6">Profile photo with fallback</span>
                </FluxItemContent>
            </FluxItem>

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

                <FluxItemContent is-center>
                    <strong>Boxed icon</strong>
                    <span style="font-size: .875rem; opacity: .6">Icon in a colored container</span>
                </FluxItemContent>
            </FluxItem>

            <FluxItem>
                <FluxItemMedia
                    is-center
                    :size="40">
                    <img
                        alt="Thumbnail"
                        src="https://picsum.photos/seed/flux/80"
                        style="border-radius: var(--radius)">
                </FluxItemMedia>

                <FluxItemContent is-center>
                    <strong>Image</strong>
                    <span style="font-size: .875rem; opacity: .6">Raw image thumbnail</span>
                </FluxItemContent>
            </FluxItem>
        </FluxItemStack>
    </FluxPane>
</template>

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

Sizes

Control the size of the media area with the size prop.

Preview

Small 32px

Medium 48px

Large 64px

Code

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

                <FluxItemContent is-center>
                    <strong>Small</strong>
                    <FluxText
                        size="small"
                        color="muted">
                        32px
                    </FluxText>
                </FluxItemContent>
            </FluxItem>

            <FluxItem>
                <FluxItemMedia
                    is-center
                    :size="48">
                    <FluxAvatar
                        alt="Bas Milius"
                        :size="48"
                        src="https://avatars.githubusercontent.com/u/978257?v=4"/>
                </FluxItemMedia>

                <FluxItemContent is-center>
                    <strong>Medium</strong>
                    <FluxText
                        size="small"
                        color="muted">
                        48px
                    </FluxText>
                </FluxItemContent>
            </FluxItem>

            <FluxItem>
                <FluxItemMedia
                    is-center
                    :size="64">
                    <FluxAvatar
                        alt="Bas Milius"
                        :size="64"
                        src="https://avatars.githubusercontent.com/u/978257?v=4"/>
                </FluxItemMedia>

                <FluxItemContent is-center>
                    <strong>Large</strong>
                    <FluxText
                        size="small"
                        color="muted">
                        64px
                    </FluxText>
                </FluxItemContent>
            </FluxItem>
        </FluxItemStack>
    </FluxPane>
</template>

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

Alignment

Use is-center to vertically center the media next to multi-line content.

Preview

Centered media With is-center the media stays vertically centered next to multiple lines of content.

Top-aligned media Without is-center the media aligns to the top of the content.

Code

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

                <FluxItemContent>
                    <strong>Centered media</strong>
                    <FluxText
                        size="small"
                        color="muted">
                        With <code>is-center</code> the media stays vertically centered next to multiple lines of content.
                    </FluxText>
                </FluxItemContent>
            </FluxItem>

            <FluxItem>
                <FluxItemMedia :size="40">
                    <FluxBoxedIcon
                        color="primary"
                        name="folder"
                        :size="40"/>
                </FluxItemMedia>

                <FluxItemContent>
                    <strong>Top-aligned media</strong>
                    <FluxText
                        size="small"
                        color="muted">
                        Without <code>is-center</code> the media aligns to the top of the content.
                    </FluxText>
                </FluxItemContent>
            </FluxItem>
        </FluxItemStack>
    </FluxPane>
</template>

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

Snippet

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