Contentstack Styleguide

Source: 4_Components/components.less, line 1
Example
Markup
<div class="cs-pagination clearfix">
    <div class="result">
        <label class="font-semi-bold">1-10</label><label>of 250 Entries</label>
    </div>
    <div class="dropdown">
        <div class="selected dropdown-toggle selected" data-toggle="dropdown">
            <span>1</span>
            <i class="icon-chevron-down"></i>
        </div>
        <ul class="dropdown-menu">
            <li class="selected-option">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div class="pagination-prev disable">
        <i class="icon-chevron-left" title="Previous"></i>
    </div>
    <div class="pagination-next">
        <i class="icon-chevron-right" title="Next"></i>
    </div>
</div>
Source: 4_Components/components.less, line 40
Example

Table

Table header

  • Time
    Username
    Action
  • 5.00AM
    Bill Gate
    Delete
  • 6.00PM
    Sundar Pichhai
    Add
Markup
<h1>Table </h1>
<h3>Table header</h3>
<div class="cs-table clearfix">
<div class="cs-table-top-header">
 </div>
    <ul class="cs-table-head">
        <li class="table-row">
            <div class="table-cell w-30">Time</div>
            <div class="table-cell w-30">Username</div>
            <div class="table-cell w-30">Action</div>
        </li>
    </ul>
    <ul class="cs-table-body">
        <li class="table-row">
            <div class="table-cell w-30">5.00AM</div>
            <div class="table-cell w-30">Bill Gate</div>
            <div class="table-cell w-30">Delete</div>
        </li>
        <li class="table-row">
            <div class="table-cell w-30">6.00PM</div>
            <div class="table-cell w-30">Sundar Pichhai</div>
            <div class="table-cell w-30">Add</div>
        </li>
    </ul>
    <div class="cs-table-bottom-bar">
    </div>
</div>
Source: 4_Components/components.less, line 7
Example
Title : Ronaldo Messi
Action : Delete
Email : anupsingh24@gmail.com
Markup
<div class="cs-tags">
        <span class="title">Title :</span>
        <span class="value">Ronaldo Messi</span>
        <i class="icon icon-close"></i>
</div>
<div class="cs-tags">
        <span class="title">Action :</span>
        <span class="value">Delete</span>
        <i class="icon icon-close"></i>
</div>
<div class="cs-tags">
        <span class="title">Email :</span>
        <span class="value">anupsingh24@gmail.com</span>
        <i class="icon icon-close"></i>
</div>
<div class="clear"></div>
Source: 4_Components/components.less, line 68