ghostguild-org/app/components/PageHeader.vue

33 lines
624 B
Vue

<template>
<div class="page-header">
<h1>{{ title }}</h1>
<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
<slot />
</div>
</template>
<script setup>
defineProps({
title: { type: String, required: true },
subtitle: { type: String, default: '' },
})
</script>
<style scoped>
.page-header {
padding: 24px 28px 16px;
border-bottom: 1px dashed var(--border);
}
.page-header h1 {
font-family: 'Brygada 1918', serif;
font-size: 28px;
font-weight: 600;
color: var(--text-bright);
line-height: 1.2;
}
.subtitle {
font-size: 12px;
color: var(--text-faint);
margin-top: 4px;
}
</style>