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

Utilities

Learn how to build your website with boba!

Shadows

Easily add a sense of depth to your components using these classes.
Shadow Z-Depth
No Shadow For reference, this is an element with the default z-depth of 0.
.shadow-1 Add the .shadow-1 class to an element to give it a z-depth of 1.
.shadow-2 Add the .shadow-2 class to an element to give it a z-depth of 2.
.shadow-3 Add the .shadow-3 class to an element to give it a z-depth of 3.
.shadow-4 Add the .shadow-4 class to an element to give it a z-depth of 4.
.shadow-5 Add the .shadow-5 class to an element to give it a z-depth of 5.

Hover

Use the hover classes to change the perceived z-depth of an element only when someone hovers/focuses on it.
Shadow Z-Depth
No Shadow For reference, this is an element with the default z-depth of 0.
.shadow-hover-1 Add the .shadow-hover-1 class to an element to change its z-depth to 1 on hover/focus.
.shadow-hover-2 Add the .shadow-hover-2 class to an element to change its z-depth to 2 on hover/focus.
.shadow-hover-3 Add the .shadow-hover-3 class to an element to change its z-depth to 3 on hover/focus.
.shadow-hover-4 Add the .shadow-hover-4 class to an element to change its z-depth to 4 on hover/focus.
.shadow-hover-5 Add the .shadow-hover-5 class to an element to change its z-depth to 5 on hover/focus.

Soft Shadows

Make your content stand out against its background using soft shadows.
Shadow Diffusion
No Shadow For reference, this is an element with no shadow.
.soft-shadow-1 Add the .soft-shadow-1 class to an element to give it a soft shadow (diffusion amount: 1).
.soft-shadow-2 Add the .soft-shadow-2 class to an element to give it a soft shadow (diffusion amount: 2).
.soft-shadow-3 Add the .soft-shadow-3 class to an element to give it a soft shadow (diffusion amount: 3).

Soft Hover

Use the soft hover classes to add a soft shadow to an element only when someone hovers/focuses on it.
Shadow Diffusion
No Shadow For reference, this is an element with no shadow.
.soft-shadow-hover-1 Add the .soft-shadow-hover-1 class to an element to change its soft shadow diffusion amount to 1 on hover/focus.
.soft-shadow-hover-2 Add the .soft-shadow-hover-2 class to an element to change its soft shadow diffusion amount to 2 on hover/focus.
.soft-shadow-hover-3 Add the .soft-shadow-hover-3 class to an element to change its soft shadow diffusion amount to 3 on hover/focus.