Contentstack Styleguide

Source: 4_Components/components.less, line 1
Example
Markup
  1. <div class="cs-pagination clearfix">
  2. <div class="result">
  3. <label class="font-semi-bold">1-10</label><label>of 250 Entries</label>
  4. </div>
  5. <div class="dropdown">
  6. <div class="selected dropdown-toggle selected" data-toggle="dropdown">
  7. <span>1</span>
  8. <i class="icon-chevron-down"></i>
  9. </div>
  10. <ul class="dropdown-menu">
  11. <li class="selected-option">1</li>
  12. <li>2</li>
  13. <li>3</li>
  14. </ul>
  15. </div>
  16. <div class="pagination-prev disable">
  17. <i class="icon-chevron-left" title="Previous"></i>
  18. </div>
  19. <div class="pagination-next">
  20. <i class="icon-chevron-right" title="Next"></i>
  21. </div>
  22. </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
  1. <h1>Table </h1>
  2. <h3>Table header</h3>
  3. <div class="cs-table clearfix">
  4. <div class="cs-table-top-header">
  5. </div>
  6. <ul class="cs-table-head">
  7. <li class="table-row">
  8. <div class="table-cell w-30">Time</div>
  9. <div class="table-cell w-30">Username</div>
  10. <div class="table-cell w-30">Action</div>
  11. </li>
  12. </ul>
  13. <ul class="cs-table-body">
  14. <li class="table-row">
  15. <div class="table-cell w-30">5.00AM</div>
  16. <div class="table-cell w-30">Bill Gate</div>
  17. <div class="table-cell w-30">Delete</div>
  18. </li>
  19. <li class="table-row">
  20. <div class="table-cell w-30">6.00PM</div>
  21. <div class="table-cell w-30">Sundar Pichhai</div>
  22. <div class="table-cell w-30">Add</div>
  23. </li>
  24. </ul>
  25. <div class="cs-table-bottom-bar">
  26. </div>
  27. </div>
Source: 4_Components/components.less, line 7
Example
Title : Ronaldo Messi
Action : Delete
Email : anupsingh24@gmail.com
Markup
  1. <div class="cs-tags">
  2. <span class="title">Title :</span>
  3. <span class="value">Ronaldo Messi</span>
  4. <i class="icon icon-close"></i>
  5. </div>
  6. <div class="cs-tags">
  7. <span class="title">Action :</span>
  8. <span class="value">Delete</span>
  9. <i class="icon icon-close"></i>
  10. </div>
  11. <div class="cs-tags">
  12. <span class="title">Email :</span>
  13. <span class="value">anupsingh24@gmail.com</span>
  14. <i class="icon icon-close"></i>
  15. </div>
  16. <div class="clear"></div>
Source: 4_Components/components.less, line 68