UI elements & components

Colors

Brand tokens live in assets/scss/_variables.scss. Change them once, recompile, done.

Primary
#4338ff

Accent
#ff6b3d

Ink
#0f1222

Paper
#f7f6f2

Success
#16a36a

Info
#0ea5e9

Warning
#f5a524

Danger
#e5484d

Brand gradient — var(--mr-grad)

Typography

Plus Jakarta Sans (variable, self-hosted, latin + latin-ext).

Display hero

Heading 1

Heading 2

Heading 3

Heading 4

Lead paragraph for introductions and summaries.

Body text with a link, bold, italic, highlight and inline code. Šumniki: č, š, ž, ć, đ.

Eyebrow label

Text with gradient

Buttons

Pill buttons with icons, sizes and states.

Badges & alerts

Status labels and contextual messages.

New Sale Bestseller Neutral Delivered Pending

An informative message with a link.

Your changes were saved.

Something went wrong. Please try again.

Icons

Bootstrap Icons 1.13 (2,000+ icons, self-hosted font). Click an icon to copy its markup.

Full set: <i class="bi bi-NAME" aria-hidden="true"></i> — see icons.getbootstrap.com

Cards

Feature, product, post, testimonial and pricing cards.

Feature card

Short description of a benefit or service.

Learn more

Bestseller

Tech

Bloom Speaker

€129.00

4.9(318)

DesignSep 30, 20265 min read

Typography that scales from mobile to 4K screens

Practical lessons from real projects, written for teams who ship.

Section blocks

Stats, steps, timeline, logo cloud and call-to-action band.

340+

Projects

98%

Retention

4.9

Rating

Discover

Goals and research.

Design

System and screens.

Develop

Code and CMS.

2024
Milestone title
Short description.
2026
Another milestone
Short description.

Call to action band

Supporting sentence for the action.

Primary action

Accordion

Collapsible FAQ-style panels.

Most websites launch in 4–8 weeks. Stores and custom apps take 8–14 weeks depending on integrations and content readiness.

Yes. Every section is built as a reusable block that maps to CMS fields, repeaters or page-builder blocks, so your team can update everything without code.

Absolutely. Layouts handle longer translations, and we set up hreflang, translated menus, URLs and SEO metadata for each language.

Tabs & pills

Accessible tab interface with Bootstrap’s tab plugin.

Overview content goes here.

Specifications content.

Reviews content.

Tables

Responsive tables with captions and proper headers.

Quarterly results
Product	Category	Status	Revenue
Orbit Lamp	Lighting	Active	€12,400
Halo Vase	Decor	Low stock	€8,950
Bloom Speaker	Tech	Active	€21,300

Forms

Labels, help text, validation states, floating labels, input groups and controls.

Lists

Check lists and list groups.

Fast and lightweight
Accessible by default
CMS-ready blocks

Active item Messages 14 Another item

Images, gallery & video

Responsive images, a lightweight lightbox gallery (native <dialog>) and a privacy-friendly video embed.

Carousels

Bootstrap carousel for hero sliders and a zero-JS scroll-snap carousel for cards.

Slide 1

Slide 2

Slide 3

★★★★★

Scroll-snap card 1. Swipe on mobile, no library required.

★★★★★

Scroll-snap card 2. Swipe on mobile, no library required.

★★★★★

Scroll-snap card 3. Swipe on mobile, no library required.

★★★★★

Scroll-snap card 4. Swipe on mobile, no library required.

★★★★★

Scroll-snap card 5. Swipe on mobile, no library required.

★★★★★

Scroll-snap card 6. Swipe on mobile, no library required.

Modals, offcanvas, tooltips & toasts

Overlay components — all keyboard accessible.

Use for filters, menus or side panels.

Progress, spinners, pagination & breadcrumbs

Navigation and feedback helpers.

65%

UI elements library

Colors

Typography