Pane media

The pane media is used to display an image element within a pane. It ensures the media is sized and positioned appropriately, maintaining a clean visual hierarchy. Pane media is helpful for panes that include supporting images, thumbnails, or promotional graphics.

Starry stones

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores ducimus eligendi fuga, fugit impedit odit perferendis repellendus. Corporis distinctio doloremque earum enim fuga hic molestias perspiciatis quaerat quidem repellendus.

Props

aspect-ratio?: number
The aspect ratio of the media, e.g. 16 / 9.

image-alt?: string
The alt tag for the image.

image-focal-point?: [number, number]
The focal point of the image.

image-url?: string
The source of the image.

is-inset?: boolean
If the media should have some whitespace around it.

Examples

Full

A media pane with a full image.

Preview

Starry stones

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores ducimus eligendi fuga, fugit impedit odit perferendis repellendus. Corporis distinctio doloremque earum enim fuga hic molestias perspiciatis quaerat quidem repellendus.

Code

<template>
    <FluxPane style="max-width: 360px">
        <FluxPaneMedia
            image-url="/assets/demo/image-2.jpg"/>

        <FluxPaneHeader title="Starry stones"/>

        <FluxPaneBody>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores ducimus eligendi fuga, fugit impedit odit perferendis repellendus. Corporis distinctio doloremque earum enim fuga hic molestias perspiciatis quaerat quidem repellendus.</p>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Inset

A media pane with whitespace around the media.

Preview

Starry stones

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores ducimus eligendi fuga, fugit impedit odit perferendis repellendus. Corporis distinctio doloremque earum enim fuga hic molestias perspiciatis quaerat quidem repellendus.

Code

<template>
    <FluxPane style="max-width: 360px">
        <FluxPaneMedia
            image-url="/assets/demo/image-2.jpg"
            is-inset/>

        <FluxPaneHeader title="Starry stones"/>

        <FluxPaneBody>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolores ducimus eligendi fuga, fugit impedit odit perferendis repellendus. Corporis distinctio doloremque earum enim fuga hic molestias perspiciatis quaerat quidem repellendus.</p>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Aspect ratio

Use aspect-ratio to control the shape of the media area.

Preview

16 : 9

1 : 1

Code

<template>
    <FluxFlex :gap="9">
        <FluxPane style="width: 240px">
            <FluxPaneMedia
                image-url="/assets/demo/image-2.jpg"
                :aspect-ratio="16 / 9"/>

            <FluxPaneHeader title="16 : 9"/>
        </FluxPane>

        <FluxPane style="width: 240px">
            <FluxPaneMedia
                image-url="/assets/demo/image-3.jpg"
                :aspect-ratio="1"/>

            <FluxPaneHeader title="1 : 1"/>
        </FluxPane>
    </FluxFlex>
</template>

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

Focal point

Use image-focal-point to keep the subject in frame when the media is cropped.

Preview

Focal point

The focal point keeps the top of the image in frame on a wide, short crop.

Code

<template>
    <FluxPane style="max-width: 360px">
        <FluxPaneMedia
            image-url="/assets/demo/image-4.jpg"
            :aspect-ratio="21 / 9"
            :image-focal-point="[50, 20]"/>

        <FluxPaneHeader title="Focal point"/>

        <FluxPaneBody>
            <p>The focal point keeps the top of the image in frame on a wide, short crop.</p>
        </FluxPaneBody>
    </FluxPane>
</template>

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