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!

Code Block

Make code snippets more manageable.

Clarification

Syntax highlighting is powered by Prism using gulp-prism. Boba does not include code syntax highlighting.

console.log("Boba is great!");
<div class="code-block">
    <pre class="code">
        <code class="language-javascript">
            console.log("Boba is great!");
        </code>
    </pre>
</div>

Inline Code

Draw attention to inline code snippets using the .inline class with the code tag.
This is an .example-class.
This is an <code class="inline">.example-class</code>.

Variables

Use the var tag to make mathematical variables and expressions more distinct.
y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Keyboard Input

Highlight short user inputs and keyboard shortcuts using the kbd tag.
Save your work by pressing Cmd/Ctrl + s.
Save your work by pressing <kbd>Cmd/Ctrl + s</kbd>.

Sample Output

Use the samp tag to distinguish sample output from a program.
This is a sample output from running a program.
<samp>This is a sample output from running a program.</samp>