Autonumber is a component that automatically adds a counter to elements

Title

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Title

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Title

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Sass Configuration:

Name Type Default Description
$autonumber-pre-num String "" Set a character before the number
$autonumber-post-num String "" Set a character after the number
$autonumber-numberstyle String "decimal" Set the counter style
$autonumber-number-bg Color #eee Set the number section background
$autonumber-content-bg Color #ddd Set the content section background

Example Code:

<div class="row">
    <div class="small-6 columns">

        <div class="sk-numbered-div ">
            <div class="content">
                <!-- Content -->
            </div>
        </div>

        <div class="sk-numbered-div ">
            <div class="content">
                <!-- Content -->
            </div>
        </div>

        <div class="sk-numbered-div ">
            <div class="content">
                <!-- Content -->
            </div>
        </div>
      
    </div>
</div>