Flux

Appearance

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

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.

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.

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

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.

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