aConic Admin Documentation - v1.0

Version - 1.0.0 Help

Steps

A component that displays content as a process with defined by user milestones.

Horizontal example

You can utilize .step{-sm|-md|-lg|-xl} classes to change when they are horizontally aligned.

This example is horizontally aligned above -md resolution and vertically below. Resize the window to see it in action.

  • 1

    First step

    Achieve virtually any design and layout from within the one template.

  • 2

    Second step

    We strive to figure out ways to help your business grow through all platforms.

  • 3

    Third step

    Find what you need in one template and combine features at will.

                                          
    <ul class="step step-md">
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
            <div class="step-content">
              <h4 class="step-title">First step</h4>
              <p class="step-text">Achieve virtually any design and layout from within the one template.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
            <div class="step-content">
              <h4 class="step-title">Second step</h4>
              <p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
            <div class="step-content">
              <h4 class="step-title">Third step</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
    </ul> 
                                      

By default .step is vertically aligned.

  • 1

    First step

    Achieve virtually any design and layout from within the one template.

  • 2

    Second step

    We strive to figure out ways to help your business grow through all platforms.

  • 3

    Third step

    Find what you need in one template and combine features at will.

                                            
    <ul class="step">
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
            <div class="step-content">
              <h4 class="step-title">First step</h4>
              <p class="step-text">Achieve virtually any design and layout from within the one template.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
            <div class="step-content">
              <h4 class="step-title">Second step</h4>
              <p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
            <div class="step-content">
              <h4 class="step-title">Third step</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
    </ul> 
                                        

With icons

  • First step

    Achieve virtually any design and layout from within the one template.

  • Second step

    We strive to figure out ways to help your business grow through all platforms.

  • Third step

    Find what you need in one template and combine features at will.

                                        
    <ul class="step">
        <li class="step-item">
        <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary"><i class="bi bi-check"></i></span>
            <div class="step-content">
            <h4 class="step-title">First step</h4>
            <p class="step-text">Achieve virtually any design and layout from within the one template.</p>
            </div>
        </div>
        </li>
    
        <li class="step-item">
        <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary"><i class="bi bi-check"></i></span>
            <div class="step-content">
            <h4 class="step-title">Second step</h4>
            <p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
            </div>
        </div>
        </li>
    
        <li class="step-item">
        <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary"><i class="bi bi-check"></i></span>
            <div class="step-content">
            <h4 class="step-title">Third step</h4>
            <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
        </div>
        </li>
    </ul> 
                                    

Color variations

Add any of the below mentioned modifier classes to change the appearance of a step.

  • 1

    Primary

    Achieve virtually any design and layout from within the one template.

  • 2

    Secondary

    We strive to figure out ways to help your business grow through all platforms.

  • 3

    Success

    Find what you need in one template and combine features at will.

  • 4

    Danger

    Find what you need in one template and combine features at will.

  • 5

    Warning

    Find what you need in one template and combine features at will.

  • 6

    Info

    Find what you need in one template and combine features at will.

  • 7

    Dark

    Find what you need in one template and combine features at will.

  • 8

    Light

    Find what you need in one template and combine features at will.

                                          
  <ul class="step">
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon bg-primary rounded-circle text-white">1</span>
        <div class="step-content">
          <h4 class="step-title">Primary</h4>
          <p class="step-text">Achieve virtually any design and layout from within the one template.</p>
        </div>
      </div>
    </li>
  
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon bg-secondary rounded-circle text-white">2</span>
        <div class="step-content">
          <h4 class="step-title">Secondary</h4>
          <p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
        </div>
      </div>
    </li>
  
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon bg-success rounded-circle text-white">3</span>
        <div class="step-content">
          <h4 class="step-title">Success</h4>
          <p class="step-text">Find what you need in one template and combine features at will.</p>
        </div>
      </div>
    </li>
  
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon bg-danger rounded-circle text-white">4</span>
        <div class="step-content">
          <h4 class="step-title">Danger</h4>
          <p class="step-text">Find what you need in one template and combine features at will.</p>
        </div>
      </div>
    </li>
  
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon bg-warning rounded-circle text-dark">5</span>
        <div class="step-content">
          <h4 class="step-title">Warning</h4>
          <p class="step-text">Find what you need in one template and combine features at will.</p>
        </div>
      </div>
    </li>
  
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon bg-info rounded-circle text-white">6</span>
        <div class="step-content">
          <h4 class="step-title">Info</h4>
          <p class="step-text">Find what you need in one template and combine features at will.</p>
        </div>
      </div>
    </li>
  
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon bg-dark rounded-circle text-white">7</span>
        <div class="step-content">
          <h4 class="step-title">Dark</h4>
          <p class="step-text">Find what you need in one template and combine features at will.</p>
        </div>
      </div>
    </li>
  
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon bg-light rounded-circle text-dark">8</span>
        <div class="step-content">
          <h4 class="step-title">Light</h4>
          <p class="step-text">Find what you need in one template and combine features at will.</p>
        </div>
      </div>
    </li>
  </ul> 
                                      

Including bg-opacity-*

  • 1

    Primary

    Achieve virtually any design and layout from within the one template.

  • 2

    Secondary

    We strive to figure out ways to help your business grow through all platforms.

  • 3

    Success

    Find what you need in one template and combine features at will.

  • 4

    Danger

    Find what you need in one template and combine features at will.

  • 5

    Warning

    Find what you need in one template and combine features at will.

  • 6

    Info

    Find what you need in one template and combine features at will.

  • 7

    Dark

    Find what you need in one template and combine features at will.

  • 8

    Light

    Find what you need in one template and combine features at will.

                                            
    <ul class="step">
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
            <div class="step-content">
              <h4 class="step-title">Primary</h4>
              <p class="step-text">Achieve virtually any design and layout from within the one template.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-secondary bg-opacity-10 rounded-circle text-secondary">2</span>
            <div class="step-content">
              <h4 class="step-title">Secondary</h4>
              <p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-success bg-opacity-10 rounded-circle text-success">3</span>
            <div class="step-content">
              <h4 class="step-title">Success</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-danger bg-opacity-10 rounded-circle text-danger">4</span>
            <div class="step-content">
              <h4 class="step-title">Danger</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-warning bg-opacity-10 rounded-circle text-warning">5</span>
            <div class="step-content">
              <h4 class="step-title">Warning</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-info bg-opacity-10 rounded-circle text-info">6</span>
            <div class="step-content">
              <h4 class="step-title">Info</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-dark bg-opacity-10 rounded-circle text-dark">7</span>
            <div class="step-content">
              <h4 class="step-title">Dark</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-light bg-opacity-10 rounded-circle text-dark">8</span>
            <div class="step-content">
              <h4 class="step-title">Light</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
    </ul> 
                                        

Last item borderless

Use .step-border-last-0 to remove the border from the last item.

  • 1

    First step

    Achieve virtually any design and layout from within the one template.

  • 2

    Second step

    We strive to figure out ways to help your business grow through all platforms.

  • 3

    Third step

    Find what you need in one template and combine features at will.

                                            
    <ul class="step step-md step-border-last-0">
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
            <div class="step-content">
              <h4 class="step-title">First step</h4>
              <p class="step-text">Achieve virtually any design and layout from within the one template.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
            <div class="step-content">
              <h4 class="step-title">Second step</h4>
              <p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
            <div class="step-content">
              <h4 class="step-title">Third step</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
    </ul> 
                                        
  • 1

    First step

    Achieve virtually any design and layout from within the one template.

  • 2

    Second step

    We strive to figure out ways to help your business grow through all platforms.

  • 3

    Third step

    Find what you need in one template and combine features at will.

                                            
    <ul class="step step-border-last-0">
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
            <div class="step-content">
              <h4 class="step-title">First step</h4>
              <p class="step-text">Achieve virtually any design and layout from within the one template.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
            <div class="step-content">
              <h4 class="step-title">Second step</h4>
              <p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
            </div>
          </div>
        </li>
      
        <li class="step-item">
          <div class="step-content-wrapper">
            <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
            <div class="step-content">
              <h4 class="step-title">Third step</h4>
              <p class="step-text">Find what you need in one template and combine features at will.</p>
            </div>
          </div>
        </li>
    </ul> 
                                        

Dashed style

Use .step-dashed for a dashed style border.

  • 1

    First step

    Achieve virtually any design and layout from within the one template.

  • 2

    Second step

    We strive to figure out ways to help your business grow through all platforms.

  • 3

    Third step

    Find what you need in one template and combine features at will.

                                        
  <ul class="step step-md step-dashed">
      <li class="step-item">
        <div class="step-content-wrapper">
          <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
          <div class="step-content">
            <h4 class="step-title">First step</h4>
            <p class="step-text">Achieve virtually any design and layout from within the one template.</p>
          </div>
        </div>
      </li>
    
      <li class="step-item">
        <div class="step-content-wrapper">
          <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
          <div class="step-content">
            <h4 class="step-title">Second step</h4>
            <p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
          </div>
        </div>
      </li>
    
      <li class="step-item">
        <div class="step-content-wrapper">
          <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
          <div class="step-content">
            <h4 class="step-title">Third step</h4>
            <p class="step-text">Find what you need in one template and combine features at will.</p>
          </div>
        </div>
      </li>
  </ul> 
                                    

Horizontally center aligned

Use .step-centered to center align.

  • 1

    First step

    Achieve virtually any design and layout from within the one template.

  • 2

    Second step

    We strive to figure out ways to help your business grow through all platforms.

  • 3

    Third step

    Find what you need in one template and combine features at will.

                                            
      <ul class="step step-md step-centered">
          <li class="step-item">
            <div class="step-content-wrapper">
              <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
              <div class="step-content">
                <h4 class="step-title">First step</h4>
                <p class="step-text">Achieve virtually any design and layout from within the one template.</p>
              </div>
            </div>
          </li>
        
          <li class="step-item">
            <div class="step-content-wrapper">
              <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
              <div class="step-content">
                <h4 class="step-title">Second step</h4>
                <p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
              </div>
            </div>
          </li>
        
          <li class="step-item">
            <div class="step-content-wrapper">
              <span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
              <div class="step-content">
                <h4 class="step-title">Third step</h4>
                <p class="step-text">Find what you need in one template and combine features at will.</p>
              </div>
            </div>
          </li>
      </ul>