Files
evening_detective_frontend/src/components/SectionHeading.vue
T
2026-10-14 23:39:17 +07:00

33 lines
563 B
Vue

<script setup lang="ts">
defineProps<{ id?: string; eyebrow?: string; title: string }>()
</script>
<template>
<div class="section-heading">
<p v-if="eyebrow" class="eyebrow">{{ eyebrow }}</p>
<h2 :id="id">
<slot>{{ title }}</slot>
</h2>
</div>
</template>
<style scoped>
.section-heading {
display: grid;
gap: 12px;
}
.eyebrow {
color: var(--brand-accent);
font-size: 14px;
letter-spacing: 0.1em;
margin: 0;
text-transform: uppercase;
}
h2 {
font-size: 28px;
font-weight: 600;
line-height: 1.3;
margin: 0;
}
</style>