Application hero

The application hero introduces a page with a clear title and optional subtitle. It is the recommended starting point of any Application content area and supports four positional slots — start, before, after and end — for adding contextual elements like back buttons, badges, breadcrumbs, or actions.

Welcome back

Here's an overview of what's happening in your workspace today.

Props

title: string
The main title shown in the hero.

subtitle?: string
An optional supporting line shown below the title.

Slots

start
Content rendered before the title block, such as a back button.

before
Content rendered above the title within the title block.

after
Content rendered below the subtitle within the title block.

end
Content rendered after the title block, such as action buttons.

Examples

With actions

Render action buttons next to the title using the `end` slot.

Preview

Projects

All projects you're a member of.

Code

<template>
    <Preview>
        <FluxApplicationHero
            title="Projects"
            subtitle="All projects you're a member of.">
            <template #end>
                <FluxPrimaryButton
                    icon-leading="plus"
                    label="New project"/>
            </template>
        </FluxApplicationHero>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxApplicationHero } from '@flux-ui/application';
    import { FluxPrimaryButton } from '@flux-ui/components';
</script>