48 lines
852 B
Vue
48 lines
852 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
slogan?: string
|
|
}
|
|
|
|
defineProps<Props>()
|
|
</script>
|
|
|
|
<template>
|
|
<header class="page-head">
|
|
<div class="container">
|
|
<h1 class="page-head__title">
|
|
{{ title }}
|
|
</h1>
|
|
<p v-if="slogan" class="page-head__slogan">
|
|
{{ slogan }}
|
|
</p>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.page-head {
|
|
background: @white;
|
|
padding: @spacing-lg 0;
|
|
border-bottom: 1px solid @border-color;
|
|
|
|
&__title {
|
|
padding-top: 0;
|
|
font-size: @font-size-title;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
color: @heading-color;
|
|
}
|
|
|
|
&__slogan {
|
|
text-align: left;
|
|
padding-bottom: 0;
|
|
margin-top: @spacing-sm;
|
|
font-size: @font-size-base;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: @text-color-secondary;
|
|
}
|
|
}
|
|
</style>
|