Skip to main content
Olivia Carter

Theme Documentation

Theme documentation

Bloomod Theme System

A living catalog of the reusable Blade components, states, interaction patterns and responsive composition rules available to every Bloomod page.

View campaign page

Foundation first

Pages extend layouts.app and compose components. The style and script stacks remain exceptional escape hatches, not the default workflow.

Composition contract

Start with the shell, page header, content sections and responsive grids. Reuse existing cards, controls, tables and feedback states before extending the library.

Accessibility is built in

Focus rings, semantic controls, labeled dialogs, focus trapping, Escape closing and reduced-motion handling are theme-level responsibilities.

Layout primitives

Page header, page title, description, breadcrumbs, actions, content section and responsive grid are demonstrated by this page structure.

Shared glass card

Consistent across every page

The default card, glass card and metric card share one tokenized glass surface so new pages inherit the same border, blur, radius and elevation.

Glass card alias

For elevated contextual content

Use the glass-card component when its name communicates intent; its visual foundation remains identical to the default card.

Subtle surface

Low-emphasis grouping

The subtle variant keeps the same glass border, blur and elevation with a quieter translucent fill.

Record metadata

Compact record context aligned beside a page title

Priority High
Date May 28, 2025
Status Scheduled
Olivia Carter Owner Olivia Carter

Navigation

The global shell uses the sidebar item, collapsible sidebar group and mobile drawer components. Tabs, dropdowns and pagination are shown below.

Buttons, badges and identity

Buttons support primary, secondary, dark, ghost and danger variants at three sizes. Icon buttons use the same interaction states.

Neutral Primary Success Warning Danger Information
Active Pending Failed
Olivia Carter Aarav Kapoor Mira Shah

Metrics, progress and loading states

Delivery rate

96%

↑ 4% vs last campaign

Pending

32

↓ 3 since yesterday

Delivery progress

Delivered 82%
82 of 100
Opened 54%
54 of 100
Bounced 18%
18 of 100
Sentiment
  • Positive
  • Neutral
  • Negative

Skeleton loader

One to eight lines

Feedback and overlays

Alerts are dismissible. Modal and confirmation patterns restore focus, trap keyboard focus and close with Escape.

Campaign saved

Your changes are ready for review.

Review required

Two contacts are missing a time zone.

Form controls

All controls support labels, hints, errors, disabled states and visible keyboard focus. Password visibility is progressively enhanced.

Use the eye control to reveal the value.

Tables and data presentation

Tables are always placed in responsive overflow containers and pair with reusable toolbars, filters, empty states and pagination.

Example campaign table
Campaign Status Audience Date
Spring Product Webinar Scheduled 156 May 28, 2025
Customer Onboarding Draft 84 Jun 4, 2025
Partner Roundtable Completed 42 May 12, 2025

Definition list

Campaign ID
CMP-1028
Owner
Olivia Carter
Status
Scheduled

Statistics grid

Delivered

150

96%

Opened

116

74%

Pending

32

21%

Declined

18

12%

Activity list

  1. Campaign scheduled

    Olivia scheduled the Spring Product Webinar.

  2. Audience updated

    The Prospects segment was refreshed.

  3. Template approved

    The invite passed the final review.

Table empty state

No matching campaigns

Change the current filters or create a new campaign.

Specialized reusable compositions

These components are shared by campaign, template and analytics experiences.

Identity, chips and tasks (3)

Olivia Carter

Owner

Olivia Carter

Marketing Lead

Segments (2)

Prospects (126) Customers (74)
  • Review the reminder copy
  • Confirm the meeting link

Sparkline

Responsive SVG with semantic label

May 21 May 23 May 25 May 27
Start
May 28 · 10:00 AM
End
May 28 · 11:00 AM
Time zone
UTC +5:30

Invitation preview

Desktop and mobile variants use the same component and local artwork.

Bloomod

Product Update

A preview component example

Fri, June 6, 2025 · 2:00–3:00 PM
Google Meet

Use the invitation preview in campaign and template workflows without duplicating presentation markup.

Bloomod

Product Update

Preview component

Fri, June 6 · 2:00 PM
Google Meet

Empty state

No templates yet

Create the first reusable template when the template workflow is connected.