advanced features
Litehouse Create Milestones
Milestones are graphic markers used to organize information into hierarchies and synthesize content into main subjects.
You can add milestones to your story to create vertical timelines, track progress, or highlight key moments.
Milestones create points of interest in the story and are a great way to insert CTAs (calls-to-action) in your story.
1. Add a new code block
2. Open your Code Block and insert the following code snippet to add the milestone functionality
<div class="milestone-wrapper">
<div class="icon-wrapper">
<i class="fa fa-building"></i>
</div>
<div class="text-wrapper">
<div class="title">
<h4 style="text-align: left;">Enterprise Solutions</h4>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="https://www.lipsum.com/">LEARN MORE</a>
</div>
</div>
<style>
div.milestone-wrapper {display: flex;}
div.icon-wrapper {
font-size: 28px;
text-align: center;
border: 2px solid #D7D9DE;
color: #A5A7AD;
width: 64px;
height: 64px;
min-width: 64px;
display: flex;
align-items: center;
justify-content: center;
}
div.icon-wrapper i:hover {color: #D7D9DE;}
div.text-wrapper {font-size: 16px;padding-left: 20px;}
</style>
3. This is how the loaders will look like in View mode (in the published story)
Enterprise Solutions
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
LEARN MORE