Get boba!
boba Version 1.7.2
  • Introduction
  • Installation
  • Customize
  • Compatibility
  • Changelog
  • Breakpoints
  • Colors
  • Typography
  • Containers
  • Grid
  • Navbar
  • Sections
  • Sidebar
  • Banners
  • Breadcrumbs
  • Cards
  • Collapsible
  • Messages
  • Notifications
  • Pagination
  • Tabs
  • Tables
  • Blockquotes
  • Buttons
  • Code
  • Counters
  • Descriptions
  • Dividers
  • Labels
  • Lists
  • Progress
  • Checkboxes
  • Inputs
  • Radios
  • Selects
  • Switches
  • Textareas
  • Animations
  • Background
  • Borders
  • Display
  • Flex
  • Images
  • Shadows
  • Shapes
  • Sizing
  • Spacing
  • Text

Elements

Learn how to build your website with boba!

Counters

Counters display numbers with a description.
123,456,789
Downloads
<div class="counter">
    <div class="value">
        123,456,789
    </div>
    <div class="description">
        Downloads
    </div>
</div>
Downloads
123,456,789
<div class="counter">
    <div class="description">
        Downloads
    </div>
    <div class="value">
        123,456,789
    </div>
</div>

Sizes

Counters can be resized.
123,456,789
Large
<div class="counter large">
    <div class="value">
        123,456,789
    </div>
    <div class="description">
        Large
    </div>
</div>
123,456,789
Medium
<div class="counter medium">
    <div class="value">
        123,456,789
    </div>
    <div class="description">
        Medium
    </div>
</div>
123,456,789
Default
<div class="counter">
    <div class="value">
        123,456,789
    </div>
    <div class="description">
        Default
    </div>
</div>
123,456,789
Small
<div class="counter small">
    <div class="value">
        123,456,789
    </div>
    <div class="description">
        Small
    </div>
</div>