1.22.2
Back to components
Components

Confirmation details card

Displays a scope label and a title in a compact card, used to summarise a single confirmation detail with optional alignment and custom styling.

Component

ScopeTitle

Props

Props Default Type
scopeScopestring
titleTitlestring
separatorIcon'mdi:chevron-right'string
alignementAlign.LEFTAlign
scopeClass — string
iconClass — string
titleClass — string

Usage

scope

Sets the scope label displayed at the start of the card.

 <template>
    <ConfirmationDetailsCard 
        scope="Category"
    />
</template>
  • Type: string
  • Default: 'Scope'

title

Sets the title displayed at the end of the card, rendered in bold.

 <template>
    <ConfirmationDetailsCard 
        title="My Title"
    />
</template>
  • Type: string
  • Default: 'Title'

separatorIcon

Overrides the icon shown between scope and title. Accepts any icon name supported by the Icon component.

 <template>
    <ConfirmationDetailsCard 
        separatorIcon="mdi:arrow-right"
    />
</template>
  • Type: string
  • Default: 'mdi:chevron-right'

alignement

Controls the horizontal alignment of the card content. Uses the Align enum.

 <template>
    <ConfirmationDetailsCard 
        :alignement="Align.CENTER"
    />
</template>
  • Type: Align
  • Default: Align.LEFT

Options

Value Description
LEFT

Aligns content to the left.

CENTER

Aligns content to the center.

RIGHT

Aligns content to the right.

scopeClass

Applies additional CSS classes to the scope label span.

 <template>
    <ConfirmationDetailsCard 
        scopeClass="text-text-neutral-subtle"
    />
</template>
  • Type: string

iconClass

Applies additional CSS classes to the chevron icon.

 <template>
    <ConfirmationDetailsCard 
        iconClass="text-text-neutral-subtle"
    />
</template>
  • Type: string

titleClass

Applies additional CSS classes to the title span.

 <template>
    <ConfirmationDetailsCard 
        titleClass="text-text-primary-brand-default"
    />
</template>
  • Type: string