Application section

The application section groups related content under an optional <h2> header. Use it to break the content of a page into clearly labelled blocks. The header can also display a small piece of meta information through the info prop and an action through the end slot.

Recent projects

3 active

Project content goes here.

Props

title?: string
The title shown in the section header.

info?: string
A small piece of meta information shown next to the title (e.g. an item count).

Slots

default
The content of the section.

end
Content rendered at the end of the section header — typically a single action button.

Snippet

FluxApplicationSection.vue

<template>
    <Preview>
        <FluxApplicationSection
            title="Recent projects"
            info="3 active">
            <template #end>
                <FluxSecondaryButton
                    label="View all"/>
            </template>

            <FluxPane>
                <FluxPaneBody>
                    Project content goes here.
                </FluxPaneBody>
            </FluxPane>
        </FluxApplicationSection>
    </Preview>
</template>

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