Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Overview
Accordion
Badge
Breadcrumb
Button
Gradient Button
FAB
Icon Button
Card
Checkbox
Chips
Date Picker
Dialogs
Divider
List
Loading
Menu
Options
Pagination
Radio
Scrollbar
Search
Selector
Skeleton
Slider
Swiper
Switch
Tabs
Text Field
TextArea
Toast
Tooltip

SWIPER

PreviousSlider
SwitchNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

When to Use

  • Showcasing hero banners, product imagery, or promotional content with immersive transitions
  • Creating depth-of-field effects where background and foreground move at different speeds
  • Building touch-friendly carousels that work seamlessly on both mobile and desktop
  • When simple image galleries or static banners feel too flat and need visual engagement

Usage Guidelines

DO

Use parallax for key hero sections where visual impact matters — the depth effect draws attention naturally

Don’t

Don't apply parallax to every carousel on the page — overuse diminishes its impact and can cause motion discomfort

DO

Keep the speed balanced (400–800ms) so the differential motion is noticeable but not jarring

Don’t

Don't set extreme speed differences between layers — it can feel disorienting rather than elegant