The DCardHeader component provides a standardized header for cards with title, subtitle, optional navigation button, and an actions slot for buttons or other interactive elements.
The main title text displayed in the header
The subtitle text displayed below the title
variant
'main' | 'secondary'
default:"main"
The visual variant of the header. ‘main’ uses h2, ‘secondary’ uses h3 and has different styling.
leftButtonIcon
string
default:"heroicons:arrow-left-16-solid"
The icon to use for the optional left navigation button
The navigation target for the left button. If provided, clicking navigates to this route.
Whether to show the left navigation button
Additional CSS classes for the title element
on-click-left-button-icon
Emitted when the left navigation button is clicked
Slot for action buttons or interactive elements displayed on the right side of the header
Default slot (not currently used in the component)
<template>
<BCard>
<template #header>
<DCardHeader title="Project Details" />
</template>
<p>Card content...</p>
</BCard>
</template>
With Subtitle
<template>
<DCardHeader
title="User Profile"
subtitle="Manage your account settings"
/>
</template>
With Back Button
<template>
<DCardHeader
title="Edit Project"
subtitle="Update project information"
has-left-button-icon
left-button-icon-to="/projects"
@on-click-left-button-icon="handleBack"
/>
</template>
<script setup>
function handleBack() {
console.log('Navigating back')
}
</script>
With Action Buttons
<template>
<DCardHeader title="Team Members">
<template #actions>
<UButton
icon="i-lucide-plus"
color="primary"
@click="handleAddMember"
>
Add Member
</UButton>
</template>
</DCardHeader>
</template>
Secondary Variant
<template>
<DCardHeader
title="Section Title"
subtitle="Section description"
variant="secondary"
/>
</template>
Multiple Actions
<template>
<DCardHeader title="Documents">
<template #actions>
<div class="flex gap-2">
<UButton variant="outline" icon="i-lucide-download">
Export
</UButton>
<UButton color="primary" icon="i-lucide-upload">
Upload
</UButton>
</div>
</template>
</DCardHeader>
</template>
Custom Title Styling
<template>
<DCardHeader
title="Dashboard"
subtitle="Welcome back!"
class-title="text-primary-600"
/>
</template>
Complete Card Example
<template>
<BCard>
<template #header>
<DCardHeader
title="Project Settings"
subtitle="Configure your project preferences"
has-left-button-icon
left-button-icon-to="/dashboard"
>
<template #actions>
<DActionButtons
primary-button-text="Save"
secondary-button-text="Cancel"
@on-click-primary-button="handleSave"
@on-click-secondary-button="handleCancel"
/>
</template>
</DCardHeader>
</template>
<form>
<!-- Form fields here -->
</form>
</BCard>
</template>
With Custom Back Icon
<template>
<DCardHeader
title="Create New Post"
has-left-button-icon
left-button-icon="i-lucide-x"
left-button-icon-to="/posts"
/>
</template>
Responsive Action Layout
<template>
<DCardHeader title="Analytics">
<template #actions>
<div class="flex flex-col sm:flex-row gap-2">
<UButton variant="outline" size="sm">
Last 7 Days
</UButton>
<UButton variant="outline" size="sm">
Last 30 Days
</UButton>
<UButton color="primary" size="sm">
Custom Range
</UButton>
</div>
</template>
</DCardHeader>
</template>
Styling
Main Variant (default)
- Heading:
<h2> with text-xl and font-bold
- Background: Transparent
- Border: None
Secondary Variant
- Heading:
<h3> with text-lg and font-bold
- Background: Muted background color
- Border: Top and bottom borders
- Subtitle: Dimmed text color
- Container: Uses
ACardInner component
- Flexbox: Title and actions are in a flex container with
justify-between
- Spacing: Vertical gap between title and subtitle
Implementation Details
The component dynamically determines the heading tag based on variant:
const headingTag = computed(() => {
const tags = {
main: 'h2',
secondary: 'h3',
}
return tags[props.variant] ?? tags.main
})
/home/daytona/workspace/source/app/components/d/card/d-card-header.vue:76