Timelines Pro
Use Impact Front’s timeline element to indicate a cronological type of information
Timeline example
You can use the following timeline example:
1. Create an account
Once you're approved, you can then explore our platform functionalities and make your first test payment.
2. Get Advice
To start processing payments you’ll need to speak to our team for tailored advice and get an assessment of your business.
3. Apply
You can now send your request to start processing payments with us. We’ll review the information, just to make sure we can help your business in the best way.
4. Use
Find out more about Redbooth’s APIs and discover the infinite opportunities of this Platform.
We recommend you to start using the interactive console of the Developer Portal and getting familiar with the different endpoints of the API with the documentation. Here’s an interesting read to start consuming the API using curl: 9 uses for cURL worth knowing.
<div class="timeline timeline-six px-3 px-lg-0">
<!-- Timeline Item 1 -->
<div class="row no-gutters">
<div class="col-lg">
<!--spacer-->
</div>
<!-- timeline item 1 center image & middle line -->
<div class="col-lg-1 text-center flex-column d-none d-lg-flex">
<div class="row h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- timeline profile card -->
<div class="col-lg py-2">
<div class="card timeline-card bg-soft shadow-soft border-light p-3">
<div class="card-body p-4">
<h5 class="mb-3"><span class="d-lg-none">1.</span> Create an account</h5>
<p class="my-2 font-small">Once you're approved, you can then explore our platform functionalities and make your first test payment.</p>
</div>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="row no-gutters">
<!-- timeline profile card -->
<div class="col-lg py-2">
<div class="card left-timeline-card bg-soft shadow-soft border-light p-3">
<div class="card-body p-4">
<h5 class="mb-3"><span class="d-lg-none">2.</span> Get Advice</h5>
<p class="my-2 font-small">To start processing payments you’ll need to speak to our team for tailored advice and get an assessment of your business.</p>
</div>
</div>
</div>
<!-- timeline item 2 center image & middle line -->
<div class="col-lg-1 text-center flex-column d-none d-lg-flex">
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<div class="col-lg">
<!--spacer-->
</div>
</div>
<!-- Timeline Item 3 -->
<div class="row no-gutters">
<div class="col-lg">
<!--spacer-->
</div>
<!-- timeline item 3 center image & middle line -->
<div class="col-lg-1 text-center flex-column d-none d-lg-flex">
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- timeline profile card -->
<div class="col-lg py-2">
<div class="card timeline-card bg-soft shadow-soft border-light p-3">
<div class="card-body p-4">
<h5 class="mb-3"><span class="d-lg-none">3.</span> Apply</h5>
<p class="my-2 font-small">You can now send your request to start processing payments with us. We’ll review the information, just to make sure we can help your business in the best way.</p>
</div>
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="row no-gutters">
<!-- timeline profile card -->
<div class="col-lg py-2">
<div class="card left-timeline-card bg-soft shadow-soft border-light p-3">
<div class="card-body p-4">
<h5 class="mb-3"><span class="d-lg-none">4.</span> Use</h5>
<p class="my-2">Find out more about Redbooth’s APIs and discover the infinite opportunities of this Platform.</p>
<p class="font-small">We recommend you to start using the interactive console of the Developer Portal and getting familiar with the different endpoints of the API with the documentation. Here’s an interesting read to start consuming the API using curl: 9 uses for cURL worth knowing.</p>
</div>
</div>
</div>
<!-- timeline item 4 center image & middle line -->
<div class="col-lg-1 text-center flex-column d-none d-lg-flex">
<div class="row h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<div class="row h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
</div>
<div class="col-lg">
<!--spacer-->
</div>
</div>
</div>