Chatwoot/app/javascript/widget/components/ChatHeaderExpanded.vue
Pranav Raj S 16fe912fbd
[Feature] Website live chat (#187)
Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
2019-10-29 12:50:54 +05:30

51 lines
904 B
Vue
Executable file

<template>
<header class="header-expanded">
<div>
<h2 class="title">
{{ introHeading }}
</h2>
<p class="body">
{{ introBody }}
</p>
</div>
</header>
</template>
<script>
export default {
name: 'ChatHeaderExpanded',
props: {
introHeading: {
type: String,
default: 'Hi there ! 🙌🏼',
},
introBody: {
type: String,
default:
'We make it simple to connect with us. Ask us anything, or share your feedback.',
},
},
};
</script>
<style scoped lang="scss">
@import '~widget/assets/scss/variables.scss';
.header-expanded {
background: $color-woot;
padding: $space-large;
width: 100%;
box-sizing: border-box;
color: $color-white;
.title {
font-size: $font-size-mega;
margin-bottom: $space-two;
}
.body {
font-size: $font-size-medium;
line-height: 1.5;
}
}
</style>