Steps

Use the steps components as a numerotated set of components to show features

Example

Use the following basic example of an step element:

1

Goal identification

Where I work with the client to determine what goals the site needs.

<div class="step text-center">
    <div class="step-shape shape-gray-300 rounded-circle mb-4">
        <span class="step-number text-primary rounded-circle border-white">1</span>
        <span class="step-icon icon-primary"><span class="fas fa-bullseye"></span></span>
    </div>
    <h2 class="h5 step-title">Goal identification</h2>
    <p>Where I work with the client to determine what goals the site needs.</p>
</div>

Square shape

The following example is a square shaped step component:

1

Goal identification

Where I work with the client to determine what goals the site needs.

<div class="step text-center">
    <div class="step-shape shape-gray-300 rounded text-primary mb-4">
        <span class="step-number border-white">1</span>
        <span class="step-icon icon-primary"><span class="fas fa-bullseye"></span></span>
    </div>
    <h2 class="h5 step-title">Goal identification</h2>
    <p>Where I work with the client to determine what goals the site needs.</p>
</div>

Organic shape

The following example is a organic shaped step component:

1

Goal identification

Where I work with the client to determine what goals the site needs.

<div class="step text-center">
    <div class="step-shape shape-gray-300 organic-radius mb-4">
        <span class="step-number text-primary border-white">1</span>
        <span class="step-icon icon-primary"><span class="fas fa-bullseye"></span></span>
    </div>
    <h2 class="h5 step-title">Goal identification</h2>
    <p>Where I work with the client to determine what goals the site needs.</p>
</div>

Colors

Use the shape-primary, shape-secondary, and shape-tertiary modifier classes to update the color of the shape components:

1

Primary color

Now that we have a bigger picture of the site in mind, we can start.

2

Secondary color

Now that we have a bigger picture of the site in mind, we can start.

3

Tertiary color

Now that we have a bigger picture of the site in mind, we can start.

 <div class="step text-center">
    <div class="step-shape shape-primary rounded-circle text-white mb-4">
        <span class="step-number rounded-circle border-gray-300er">1</span>
        <span class="step-icon icon-white"><span class="fas fa-assistive-listening-systems"></span></span>
    </div>
    <h2 class="h5 step-title">Primary color</h2>
    <p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<div class="step text-center">
    <div class="step-shape shape-secondary rounded-circle text-white mb-4">
        <span class="step-number rounded-circle border-gray-300er">2</span>
        <span class="step-icon icon-white"><span class="fas fa-highlighter"></span></span>
    </div>
    <h2 class="h5 step-title">Secondary color</h2>
    <p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<div class="step text-center">
    <div class="step-shape shape-tertiary rounded-circle text-white mb-4">
        <span class="step-number rounded-circle border-gray-300er">3</span>
        <span class="step-icon icon-white"><span class="fas fa-fire"></span></span>
    </div>
    <h2 class="h5 step-title">Tertiary color</h2>
    <p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>

Outline

Use the bordered modifier class to make the background transparent:

1

Discussion

Where I work with the client to determine what goals the site needs.

3

Production

Now that we have a bigger picture of the site in mind, we can start.

2

Prototyping

We've got all your pages and defined how they display to the site visitor.

<div class="step text-center">
    <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="step-icon icon-primary"><span class="fas fa-assistive-listening-systems"></span></span>
    </div>
    <h2 class="h5 step-title">Discussion</h2>
    <p>Where I work with the client to determine what goals the site needs.</p>
</div>
<div class="step text-center">
    <div class="step-shape bordered border-tertiary organic-radius mb-4">
        <span class="step-number text-tertiary border-tertiary">3</span>
        <span class="step-icon icon-tertiary"><span class="fas fa-fire"></span></span>
    </div>
    <h2 class="h5 step-title">Production</h2>
    <p>Now that we have a bigger picture of the site in mind, we can start.</p>
</div>
<div class="step text-center">
    <div class="step-shape bordered border-secondary rounded mb-4">
        <span class="step-number text-secondary border-secondary">2</span>
        <span class="step-icon icon-secondary"><span class="fas fa-highlighter"></span></span>
    </div>
    <h2 class="h5 step-title">Prototyping</h2>
    <p>We've got all your pages and defined how they display to the site visitor.</p>
</div>