Onboarding template

You can use this template to build an onboarding flow to showcase your app features and provide context for users.

Open on CodeSandbox

html

<div class="grid">
	<div class="cs3 ce11">
		<img class="message-graphic" src="https://mirotone.xyz/onboarding.svg" width="224" />
	</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>

🏓 Interactive playground

css

.message-graphic {
	margin-top: var(--space-medium)
}
.message-buttons {
	display: flex;
	justify-content: center;
}
.message-text {
	text-align: center;
}

🏓 Interactive playground