Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<div class="add-card">
<a
class="no-link-style"
:href="newAppointmentUrl"
>
<div class="add-card-content">
<div class="add-card-header">
<h3>{{ title }}</h3>
</div>
<slot name="content" />
<div class="add-card-button">
<muc-button
class="add-card-muc-button"
icon="arrow-right"
variant="primary"
>{{ t("arrangeAppointment") }}</muc-button
>
</div>
</div>
</a>
</div>
</template>
<script setup lang="ts">
import { MucButton } from "@muenchen/muc-patternlab-vue";
defineProps<{
title: string;
newAppointmentUrl: string;
t: (key: string) => string;
}>();
defineSlots<{
/**
* Content beneath the heading shown as text.
*/
content(): any;
}>();
</script>
<style scoped>
.no-link-style {
text-decoration: none !important;
color: var(--color-neutrals-grey) !important;
}
.add-card {
cursor: pointer;
border: solid 1px var(--color-neutrals-blue);
border-bottom: solid 5px var(--color-brand-main-blue);
transition: background-color ease-in 150ms;
background-color: var(--color-neutrals-blue-xlight);
}
.add-card:hover {
background-color: #e5eef5;
}
.add-card:hover .add-card-muc-button {
background-color: #004376;
}
.add-card-content {
text-align: center;
padding: 32px 24px;
}
.add-card-header {
margin-bottom: 16px;
}
.add-card-button {
margin-top: 24px;
}
</style>
|