# Slots
# Header
The slot header
is a container just above the notification i.e. inside device's border.
# Example
# Source Code
<template>
<iphone-preview>
<template slot="header">
<div class="time-container">
<p>12:15</p>
</div>
</template>
</iphone-preview>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
<style lang="scss" scoped>
.time-container {
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
p {
font-size: 40px;
color: #ffffff;
}
}
</style>