← BBC Design System · Reference
UI Components

Reference · UI / UX

Web components,
banners, breakaways
& everything in between.

Drop-in UI patterns for the BBC system. Headers, footers, banners, breakaway sections, alerts, modals, loaders, sticky CTAs, hover states, form elements, tooltips, tabs, pagination, empty states. Each component shown in its working context with a numbered code for reference (UI-01-A, UI-04-C, etc.).

UI-01 · HEADERS & NAVIGATION

Headers / Nav

Eight navigation patterns covering marketing pages, app shells, hero overlays, and content pages. Pair with a banner (UI-02) for announcements.

UI-01-A · Minimal Dark
ServicesWorkAboutContact
Book a Call
UI-01-B · Glass Overlay (over hero)
BrandMarketScaleRepeat

Glass nav floats over hero

UI-01-C · Cream / Light
ServicesCase StudiesInsights
Get in touch
UI-01-D · Announcement Bar + Nav
From chaos to system · Now booking Q3 engagements
What we doWho we areHow we work
Get in touch
UI-01-E · Mega Menu Style (with dropdowns)
Services Industries Resources Pricing
Book Demo
UI-01-F · Split with Social Icons
BrandMarketScale
IG LI YT
UI-01-G · Mobile / Burger
UI-01-H · Sub-Tabs (under main nav)
ServicesWorkAbout
Book Call
Overview Capabilities Pricing FAQ
UI-02 · WEB BANNERS

Banners

Inline banners for announcements, alerts, promos, cookie notices. Use sparingly — one per page max.

UI-02-A · Warm Top Bar
UI-02-B · Warm-Rev Banner with CTA
UI-02-C · Night Banner with Gold Border
UI-02-D · Cream Promo Banner
UI-02-E · Stacked Hero Banner (centered)
UI-02-F · Cookie Notice (bottom)
UI-03 · BREAKAWAY SECTIONS

Breakaways & Pacing Slides

Full-bleed slides that interrupt the rhythm. Drop between dense sections to give the reader breathing space and emphasize a single idea.

UI-03-A · Big Statement (warm-rev)

We don't do random
acts of marketing.
We build systems.

A full-stack brand and digital marketing agency for businesses ready to compound their growth.

UI-03-B · Editorial Quote
"
BBC didn't just rebrand us. They handed us a system that made our growth inevitable.

— Founder · EEPL Realty

UI-03-C · Chapter Marker
03

Chapter Three

Where you are,
where you're going.

The next pages map the gap between your current state and the system that compounds your growth.

UI-03-D · Bee Divider (between sections)
🐝
UI-03-E · Full-Bleed Number (stat headline)
100+

Brands. One stubborn idea.

UI-03-F · Single Big Word

Compound.

Every channel, every customer, every campaign — designed to multiply.

UI-04 · FOOTERS

Footers

Five footer patterns: full multi-column, mini, cream, CTA-led, and signature block (for documents/emailers).

UI-04-A · Full Site Footer · 4-Column
UI-04-B · Mini Footer (single line)
© 2026 Bumblebee · Brand · Market · Scale · Repeat thebumblebee.in
UI-04-C · Cream Footer (light pages)
UI-04-D · CTA-Led Closing Footer

Choose to bee ahead.

From chaos to system. From guesswork to growth.

Web  thebumblebee.in Email  ahead@thebumblebee.in Phone  +91 96772 22567
UI-04-E · Signature Block (documents/emailers)
UI-05 · ALERTS & NOTICES

Alerts

Inline notification components for forms, dashboards, and confirmations. Four severity levels + light variant.

UI-05-A through E · All variants
i
Info — UI-05-A

Heads up. This engagement runs across 14 weeks with bi-weekly check-ins.

✓
Success — UI-05-B

Your discovery brief was received. We'll respond within 1 business day.

!
Warning — UI-05-C

Q3 booking closes Friday. Two slots remain.

×
Error — UI-05-D

The form couldn't be submitted. Please check your work email and try again.

UI-05-E · Light variant (cream pages)
i
Notice

This proposal is confidential to the named recipient and Bumblebee Branding Co.

UI-06 · MODALS & DIALOGS

Modals

Centered dialog overlays. Use sparingly — for confirmations, gated content, or critical decisions.

UI-06-A · Dark Modal

Confirm action

Send the brief?

Once submitted, our team will review your engagement scope and respond within 24 hours. You can edit answers before submitting.

UI-06-B · Cream Modal

Limited offer

Claim your discovery call.

Drop your work email and we'll send a 60-min discovery slot calendar within 24 hours. No sales pitch.

UI-07 · LOADERS & PROGRESS

Loaders

Progress indicators for loading states, async operations, and skeleton screens.

UI-07-A through F · All loaders
UI-07-A · Spinner
UI-07-B · Bouncing Dots
UI-07-C · Progress Bar (65%)
UI-07-D · Indeterminate Bar
UI-07-E · Skeleton
BBC
UI-07-F · Branded Pulse
UI-08 · STICKY CTAs & FAB

Sticky / Floating CTAs

Persistent calls-to-action that follow the scroll. Use for high-intent conversion on landing pages.

UI-08-A · Bottom Bar

Page content here…

Ready to start?
UI-08-B · Round FAB

Page content here…

UI-08-C · Extended FAB

Page content here…

UI-09 · FORM ELEMENTS

Forms

Input fields, textareas, selects, toggles, checkboxes, radios — dark + cream variants.

UI-09-A · Dark + Cream Form Side-by-Side

Dark Form

Min 50 characters
Please enter a valid phone
Subscribe to BBC briefings
✓I agree to the privacy policy
Foundation Growth Scale

Cream Form

Yes, send me the deck
✓I'm a decision-maker
UI-10 · TOOLTIPS & POPOVERS

Tooltips / Popovers

Hover-triggered helpers and context-rich popovers for forms, dashboards, and pricing tables.

UI-10-A · Tooltip · UI-10-B · Popover
Hover for tooltip UI-10-A · Tooltip text Click for popover
UI-10-B · Popover

Multi-line context with structure. Use for pricing tier explanations, form-field guidance, or definition tooltips.
UI-11 · TABS & SEGMENTED CONTROLS

Tabs / Segments

Three patterns — pill tabs, line tabs, and segmented cards. Pill for compact filters, line for content sections, cards for tier/option choices.

UI-11-A · Pill Tabs
Build Market Scale
UI-11-B · Line Tabs
Overview Capabilities Pricing FAQ
UI-11-C · Segmented Cards (tier picker)
Foundation
₹2.5L / quarter
Growth
₹6L / quarter
Scale
Custom
UI-12 · HOVER & INTERACTION STATES

Hover Effects

Standard hover treatments that bring the brand to life — card lift, link underline, image overlay reveal.

UI-12-A · Lifting Cards (hover me)
Build the Brand
Discovery, identity, positioning, voice.
Market the Brand
Performance, social, content, campaigns.
Scale the Brand
Sales enablement, automation, GTM.
UI-12-B · Animated Underline (hover)
Read the case study
UI-12-C · Image Reveal Overlay (hover)

EEPL Realty

3x pipeline in 90 days. Full GTM rebuild.

MGIS School

40% reduction in CAC. Brand + admissions funnel.

Vruksha

Zero to 20 demos/month. Foundation build + lead gen.

UI-13 · BREADCRUMBS & PAGINATION

Navigation Helpers

Wayfinding for deep content — case-study indices, blog archives, multi-page proposals.

UI-13-A · Breadcrumbs
Home/ Case Studies/ Real Estate/ EEPL Realty
UI-13-B · Pagination
UI-14 · EMPTY STATES

Empty States

Friendly empty-state screens for searches with no results, blank dashboards, or pre-data views.

UI-14-A · Empty (with CTA)
🐝

No case studies yet

Once we work together, your case study will appear here. Want to be the first?