36 lines
741 B
Vue
36 lines
741 B
Vue
|
<script setup>
|
||
|
|
defineProps({
|
||
|
|
eyebrow: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
description: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<section class="hero-panel hero-layout panel">
|
||
|
|
<div class="hero-copy">
|
||
|
|
<p class="eyebrow">{{ eyebrow }}</p>
|
||
|
|
<h3>{{ title }}</h3>
|
||
|
|
<p class="muted hero-description">{{ description }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="$slots.aside || $slots.actions" class="hero-side">
|
||
|
|
<div v-if="$slots.aside" class="hero-aside">
|
||
|
|
<slot name="aside" />
|
||
|
|
</div>
|
||
|
|
<div v-if="$slots.actions" class="hero-actions">
|
||
|
|
<slot name="actions" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|