Default Card
Combine with layout utilities like `p-md` or `gap-sm` for content spacing.
Buttons
Each block shows the default, simulated hover, focus, and disabled states.
Primary (.btn)
Default
Hover (simulated)
Focus (simulated)
Disabled
Ghost (.btn-ghost)
Default
Hover (simulated)
Focus (simulated)
Disabled
Badges
Use `data-variant` for semantic colorways.
Default
Info
Critical
Neutral
Cards
Cards inherit focus-ring behaviour and support semantic states.
Hover (simulated)
Applies the hover shadow and lift.
Focus (simulated)
Rings appear on `focus-visible`.
Disabled
Opacity drops and the shadow is removed.
Form Inputs
`.input` works for both `<input>` and `<textarea>` elements.
Focus Ring Helper
Add `.focus-ring` to custom interactives when you opt out of `.btn` or other primitives.
Modal Surface
`.bv-modal` anchors the overlay, `.bv-modal-backdrop` dims the page, and `.bv-modal__panel` styles content.
Upload Video
Use `.input` and `.btn` primitives inside panels for consistency.
Grid Stack
Use `data-variant="cards"` for responsive columns or `data-orientation="vertical"` for flex stacks.
Card Grid
Card A
Card B
Card C
Vertical Stack
Row 1
Row 2
Row 3 (disabled)