blob: ddf204d355eae2339e38f5e9a6b7db8a8e472524 [file] [log] [blame]
Yoshie Muranaka8d129102019-12-19 09:51:55 -08001<template>
Yoshie Muranakac11d3892020-02-19 08:07:40 -08002 <div class="page-section">
3 <h2 v-if="sectionTitle">{{ sectionTitle }}</h2>
Yoshie Muranaka8d129102019-12-19 09:51:55 -08004 <slot />
Yoshie Muranakac11d3892020-02-19 08:07:40 -08005 </div>
Yoshie Muranaka8d129102019-12-19 09:51:55 -08006</template>
7
8<script>
9export default {
10 name: 'PageSection',
Derick Montague09e45cd2020-01-23 15:45:57 -060011 props: {
12 sectionTitle: {
13 type: String,
Yoshie Muranakac11d3892020-02-19 08:07:40 -080014 default: ''
Derick Montague09e45cd2020-01-23 15:45:57 -060015 }
16 }
Yoshie Muranaka8d129102019-12-19 09:51:55 -080017};
18</script>
19
20<style lang="scss" scoped>
21.page-section {
22 margin-bottom: $spacer * 2;
23}
Yoshie Muranakac11d3892020-02-19 08:07:40 -080024
Yoshie Muranaka8d129102019-12-19 09:51:55 -080025h2 {
Dixsie Wolmersbe88c612020-07-20 13:29:54 -050026 @include font-size($h3-font-size);
Yoshie Muranaka8d129102019-12-19 09:51:55 -080027 margin-bottom: $spacer;
28 &::after {
29 content: '';
30 display: block;
31 width: 100px;
Yoshie Muranaka01da8182020-07-08 15:46:43 -070032 border: 1px solid gray('300');
Yoshie Muranaka8d129102019-12-19 09:51:55 -080033 margin-top: 10px;
34 }
35}
36</style>