Onboarding template
You can use this template to build an onboarding flow to showcase your app features and provide context for users.
html
<div class="grid">
<div class="cs2 ce11">
<img class="message-graphic" src="/onboarding.svg" />
</div>
<div class="cs1 ce12 message-text">
<p class="p-large">With App Name you can easily sync all of your things with your Miro boards!</p>
</div>
<div class="cs1 ce12 message-buttons">
<button class="button-icon icon-arrow-left" disabled type="button"></button>
<button class="button-icon icon-arrow-right" type="button"></button>
</div>
<div class="cs1 ce12 centered">
<a href="#" class="link">Skip</a>
</div>
</div>
css
.message-graphic {
margin-block: var(--space-medium)
}
.message-buttons {
display: flex;
justify-content: center;
}
.message-text {
text-align: center;
}