Steps

Use Leaf's custom steps elements to show a list of features or any other information..

Round shape

For each .step you can change the content inside the .step-number and the icon for .icon-white. The class .rounded-circle is the style modifier for these shapes.

You can use Bootstrap's text utility classes to position the text to your liking.

1
Goal identification

Where I work with the client to determine what goals the site needs to fulfill. I.e., what its purpose is.

2
Content creation

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

3
Testing

We've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works. 

                                                        
<div class="row mt-4">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-left">
            <div class="step-shape shape-light rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">1</span>
                <span class="icon-white"><i class="fas fa-bullseye"></i></span>
            </div>
            <h5 class="step-title">Goal identification</h5>
            <p>Where I work with the client to determine what goals the site needs to fulfill. I.e., what its purpose is.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">2</span>
                <span class="icon-white"><i class="fas fa-code-branch"></i></span>
            </div>
            <h5 class="step-title">Content creation</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-right">
            <div class="step-shape shape-light rounded-circle text-white mb-4">
                <span class="step-number rounded-circle border-lighter">3</span>
                <span class="icon-white"><i class="fas fa-award"></i></span>
            </div>
            <h5 class="step-title">Testing</h5>
            <p>We've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>
Organic shape

Use the .organic-shape class to style the steps as shown below.

1
Goal identification

Where I work with the client to determine what goals the site needs to fulfill. I.e., what its purpose is.

2
Content creation

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

3
Testing

We've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works. 

                                                        
<div class="row mt-4">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-left">
            <div class="step-shape shape-light organic-radius text-white mb-4">
                <span class="step-number border-lighter">1</span>
                <span class="icon-white"><i class="fas fa-bullseye"></i></span>
            </div>
            <h5 class="step-title">Goal identification</h5>
            <p>Where I work with the client to determine what goals the site needs to fulfill. I.e., what its purpose is.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light organic-radius text-white mb-4">
                <span class="step-number border-lighter">2</span>
                <span class="icon-white"><i class="fas fa-code-branch"></i></span>
            </div>
            <h5 class="step-title">Content creation</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-right">
            <div class="step-shape shape-light organic-radius text-white mb-4">
                <span class="step-number border-lighter">3</span>
                <span class="icon-white"><i class="fas fa-award"></i></span>
            </div>
            <h5 class="step-title">Testing</h5>
            <p>We've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>
Square shape
1
Goal identification

Where I work with the client to determine what goals the site needs to fulfill. I.e., what its purpose is.

2
Content creation

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

3
Testing

We've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works. 

                                                        
<div class="row mt-4">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-left">
            <div class="step-shape shape-light text-white mb-4">
                <span class="step-number border-lighter">1</span>
                <span class="icon-white"><i class="fas fa-bullseye"></i></span>
            </div>
            <h5 class="step-title">Goal identification</h5>
            <p>Where I work with the client to determine what goals the site needs to fulfill. I.e., what its purpose is.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-light text-white mb-4">
                <span class="step-number border-lighter">2</span>
                <span class="icon-white"><i class="fas fa-code-branch"></i></span>
            </div>
            <h5 class="step-title">Content creation</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-right">
            <div class="step-shape shape-light text-white mb-4">
                <span class="step-number border-lighter">3</span>
                <span class="icon-white"><i class="fas fa-award"></i></span>
            </div>
            <h5 class="step-title">Testing</h5>
            <p>We've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>
Colored shapes

You can use classes such as .shape-primary or .code-secondary to modify the colors of the shapes. They work with any form of shapes as seen in the previous examples.

1
Primary color

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

2
Secondary color

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

3
Tertiary color

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

4
Info color

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

5
Success color

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

6
Danger color

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

7
Warning color

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

8
Dark color

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

9
Gray color

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

                                                        
<div class="row mt-4">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-left">
            <div class="step-shape shape-primary organic-radius text-white mb-4">
                <span class="step-number border-lighter">1</span>
                <span class="icon-white"><i class="fas fa-assistive-listening-systems"></i></span>
            </div>
            <h5 class="step-title">Primary color</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-secondary organic-radius text-white mb-4">
                <span class="step-number border-lighter">2</span>
                <span class="icon-white"><i class="fas fa-highlighter"></i></span>
            </div>
            <h5 class="step-title">Secondary color</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-right">
            <div class="step-shape shape-tertiary organic-radius text-white mb-4">
                <span class="step-number border-lighter">3</span>
                <span class="icon-white"><i class="fas fa-fire"></i></span>
            </div>
            <h5 class="step-title">Tertiary color</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-left">
            <div class="step-shape shape-info organic-radius text-white mb-4">
                <span class="step-number border-lighter">4</span>
                <span class="icon-white"><i class="fas fa-assistive-listening-systems"></i></span>
            </div>
            <h5 class="step-title">Info color</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-success organic-radius text-white mb-4">
                <span class="step-number border-lighter">5</span>
                <span class="icon-white"><i class="fas fa-highlighter"></i></span>
            </div>
            <h5 class="step-title">Success color</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-right">
            <div class="step-shape shape-danger organic-radius text-white mb-4">
                <span class="step-number border-lighter">6</span>
                <span class="icon-white"><i class="fas fa-fire"></i></span>
            </div>
            <h5 class="step-title">Danger color</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-left">
            <div class="step-shape shape-warning organic-radius text-white mb-4">
                <span class="step-number border-lighter">7</span>
                <span class="icon-white"><i class="fas fa-assistive-listening-systems"></i></span>
            </div>
            <h5 class="step-title">Warning color</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center">
            <div class="step-shape shape-dark organic-radius text-white mb-4">
                <span class="step-number border-lighter">8</span>
                <span class="icon-white"><i class="fas fa-highlighter"></i></span>
            </div>
            <h5 class="step-title">Dark color</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-right">
            <div class="step-shape shape-gray organic-radius text-white mb-4">
                <span class="step-number border-lighter">9</span>
                <span class="icon-white"><i class="fas fa-fire"></i></span>
            </div>
            <h5 class="step-title">Gray color</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>
Bordered steps

Use classes such as .border-primary or .border-secondary to create an outline for the shapes.

1
Discussion

Where I work with the client to determine what goals the site needs to fulfill. I.e., what its purpose is.

3
Production

Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.

2
Prototyping

We've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works. 

                                                        
<div class="row">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step text-center text-md-left">
            <div class="step-shape bordered border-primary rounded-circle mb-4">
                <span class="step-number rounded-circle text-primary border-primary">1</span>
                <span class="icon-primary"><i class="fas fa-assistive-listening-systems"></i></span>
            </div>
            <h5 class="step-title">Discussion</h5>
            <p>Where I work with the client to determine what goals the site needs to fulfill. I.e., what its purpose is.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4 text-center">
        <!-- Step -->
        <div class="step">
            <div class="step-shape bordered border-tertiary organic-radius mb-4">
                <span class="step-number text-tertiary border-tertiary">3</span>
                <span class="icon-tertiary"><i class="fas fa-fire"></i></span>
            </div>
            <h5 class="step-title">Production</h5>
            <p>Now that we have a bigger picture of the site in mind, we can start creating content for the individual pages.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4 text-center text-md-right">
        <!-- Step -->
        <div class="step">
            <div class="step-shape bordered border-secondary mb-4">
                <span class="step-number text-secondary border-secondary">2</span>
                <span class="icon-secondary"><i class="fas fa-highlighter"></i></span>
            </div>
            <h5 class="step-title">Prototyping</h5>
            <p>We've got all your pages and defined how they display to the site visitor, so it's time to make sure it all works.</p>
        </div>
        <!-- End of Step -->
    </div>
</div>
Letter or number in the background

Update the content inside .back-layer to change the number in the background.

1
Visual Design

Once the blueprint for the site has been defined through the creation of the sitemap and wireframes, the next step is to create a visual style.

2
Site Development

With designs approved, it’s time to flesh out the design of the pages, develop new content and refine old content, create videos, slideshows, etc.

3
Site Testing

After site development, it will be placed on a production server where only internal audiences and anyone who you share the link with can view it. 

                                                        
<div class="row">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step">
            <span class="back-layer layer-primary lh-100">1</span>
            <h5 class="step-title">Visual Design</h5>
            <p>Once the blueprint for the site has been defined through the creation of the sitemap and wireframes, the next step is to create a visual style. </p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step">
            <span class="back-layer layer-secondary lh-100">2</span>
            <h5 class="step-title">Site Development</h5>
            <p>With designs approved, it’s time to flesh out the design of the pages, develop new content and refine old content, create videos, slideshows, etc.</p>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step">
            <span class="back-layer layer-tertiary lh-100">3</span>
            <h5 class="step-title">Site Testing</h5>
            <p>After site development, it will be placed on a production server where only internal audiences and anyone who you share the link with can view it. </p>
        </div>
        <!-- End of Step -->
    </div>
</div>
Icon in the background

Update the icon used inside the .back-layer. Furthermore, you can use classes such as .layer-primary or .layer-secondary to change the color.

Visual Design

Once the blueprint for the site has been defined through the creation of the sitemap and wireframes, the next step is to create a visual style.

Read more
Site Development

With designs approved, it’s time to flesh out the design of the pages, develop new content and refine old content, create videos, slideshows, etc.

Read more
Site Testing

After site development, it will be placed on a production server where only internal audiences and anyone who you share the link with can view it.

Read more 
                                                        
<div class="row">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step">
            <span class="back-layer layer-primary"><i class="fas fa-paint-brush"></i></span>
            <h5 class="step-title">Visual Design</h5>
            <p>Once the blueprint for the site has been defined through the creation of the sitemap and wireframes, the next step is to create a visual style. </p>
            <a href="#" class="btn btn-link text-dark">Read more</a>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step">
            <span class="back-layer layer-secondary"><i class="fas fa-code-branch"></i></span>
            <h5 class="step-title">Site Development</h5>
            <p>With designs approved, it’s time to flesh out the design of the pages, develop new content and refine old content, create videos, slideshows, etc.</p>
            <a href="#" class="btn btn-link text-dark">Read more</a>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step">
            <span class="back-layer layer-tertiary"><i class="fas fa-puzzle-piece"></i></span>
            <h5 class="step-title">Site Testing</h5>
            <p>After site development, it will be placed on a production server where only internal audiences and anyone who you share the link with can view it. </p>
            <a href="#" class="btn btn-link text-dark">Read more</a>
        </div>
        <!-- End of Step -->
    </div>
</div>
Background and icon

The following example shows how you can combine the classes and layouts as shown in the previous examples.

1
Visual Design

Once the blueprint for the site has been defined through the creation of the sitemap and wireframes, the next step is to create a visual style.

See More
2
Site Development

With designs approved, it’s time to flesh out the design of the pages, develop new content and refine old content, create videos, slideshows, etc.

See More
3
Site Testing

After site development, it will be placed on a production server where only internal audiences and anyone who you share the link with can view it.

See More 
                                                        
<div class="row">
    <div class="col-md-4">
        <!-- Step -->
        <div class="step">
            <span class="icon-lg icon-primary"><i class="fas fa-palette"></i></span>
            <span class="back-layer layer-gray">1</span>
            <h5 class="step-title">Visual Design</h5>
            <p>Once the blueprint for the site has been defined through the creation of the sitemap and wireframes, the next step is to create a visual style. </p>
            <a href="#" class="btn btn-link text-primary btn-icon">
                <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                <span class="btn-inner-text">See More</span>
            </a>
        </div>
        <!-- Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step">
            <span class="icon-lg icon-secondary"><i class="fas fa-code-branch"></i></span>
            <span class="back-layer layer-gray">2</span>
            <h5 class="step-title">Site Development</h5>
            <p>With designs approved, it’s time to flesh out the design of the pages, develop new content and refine old content, create videos, slideshows, etc.</p>
            <a href="#" class="btn btn-link text-secondary btn-icon">
                <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                <span class="btn-inner-text">See More</span>
            </a>
        </div>
        <!-- End of Step -->
    </div>
    <div class="col-md-4">
        <!-- Step -->
        <div class="step">
            <span class="icon-lg icon-tertiary"><i class="fas fa-puzzle-piece"></i></span>
            <span class="back-layer layer-gray">3</span>
            <h5 class="step-title">Site Testing</h5>
            <p>After site development, it will be placed on a production server where only internal audiences and anyone who you share the link with can view it. </p>
            <a href="#" class="btn btn-link text-tertiary btn-icon">
                <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                <span class="btn-inner-text">See More</span>
            </a>
        </div>
        <!-- End of Step -->
    </div>
</div>