The sidebar comes with default styling designed to look great out of the box, while giving you full flexibility to match your store's look and feel via custom CSS.
All classes follow BEM naming conventions with the mage-sidebar-* prefix.
CSS Variables (Theming)
The sidebar uses 12 CSS custom properties for consistent theming. Override these to restyle the entire widget without touching individual classes.
Variable | Default | Controls |
|
| Headings, body text, icons, active states |
|
| Muted text, dates, descriptions, labels |
|
| Active tab border, focus rings |
|
| Sidebar background |
|
| Icon containers, points cards, code boxes, input backgrounds, referral card surfaces |
|
| Card surface borders (referral cards, modal containers, form inputs, reward item borders) |
|
| Structural row dividers between list items, section separators, input borders |
|
| Primary button fill, balance bar background |
|
| Primary button text, balance bar text |
|
| Font family for all headings and body text |
|
| Sidebar width on desktop (mobile is always 100%) |
|
| Stacking order of the sidebar |
Override variables in :root for simplicity, or use #mage-sidebar-root for higher specificity.
CSS Classes
Here is a reference guide to all CSS classes.
Shell & Layout
Class | Description |
| Full-screen overlay behind the sidebar |
| Main sidebar container (fixed, full-height) |
| Floating variant with rounded corners and margin |
| Positioned on left side |
| Positioned on right side |
| Slide-in entrance animation |
| Slide-out exit animation |
| Fade-in entrance animation |
| Fade-out exit animation |
| Top bar with logo and close button |
| Logo wrapper |
| Logo image (max 120px wide, 32px tall) |
| Close button |
| Close button icon |
| Sub-page content wrapper |
| Scrollable content area |
| Main tab content with top/bottom padding |
Tabs
Class | Description |
| Bottom tab bar (fixed) |
| Tab bar positioned left |
| Tab bar positioned right |
| Tab bar for floating sidebar |
| Tab bar for docked sidebar |
| Flex container for tab buttons |
| Individual tab button |
| Active tab (primary color, top border accent) |
| Inactive tab (secondary color, hover:primary) |
Shared / Global Elements
These classes apply across all sub-pages.
Class | Description |
| Sub-page header (flex, back button + title) |
| Back button |
| Back caret icon |
| Page title (18px, semibold) |
| Section heading (16px, semibold, uppercase, tracked) |
| Horizontal divider (75% width, 1px, centered) |
| Pill badge (12px, rounded-full) |
| Pending badge (amber-50 bg, amber-600 text) |
| Empty state text (12px, secondary) |
| Text input (full-width, padded, rounded-lg, border) |
| Select dropdown (full-width, padded, rounded-lg) |
| Form label (12px, secondary, block) |
| Checkbox input (16px, rounded, accent-colored) |
| Medium button size |
| Primary button style |
| Secondary button style (border only) |
| Loading spinner (20px, primary border, animate-spin) |
| Small spinner (16px, white border) |
| Accent-colored spinner |
| Loading state container (centered, padding-32) |
Sign In
Class | Description |
| Sign-in page container (p-24) |
| Title (20px, semibold, tight tracking) |
| Input field wrapper (relative) |
| Email/phone input (full-width, rounded-lg) |
| Button base (full-width, rounded-lg, medium text) |
| Primary CTA (btn-primary bg, btn-primary-text color) |
| Shop Pay button (Shop Pay purple bg, white text, flex, centered) |
| Standalone email button (primary style) |
| Secondary email button (bordered) |
| Windoid waiting state container (flex column, centered) |
| Terms text (12px, secondary, mt-16) |
Verify Code
Class | Description |
| Verify page container |
| Title (20px, semibold, centered) |
| Code digit input (44px wide, 48px tall, centered text) |
Welcome Back
Class | Description |
| Welcome section container |
| Greeting text (20px, semibold) |
| Customer name (bold) |
| Points card wrapper (rounded-2xl, clickable) |
| Card inner padding |
| Card header (flex, space-between) |
| "YOUR POINTS" label (12px, uppercase, tracked) |
| Arrow icon |
| Points number (36px, bold, tight tracking) |
| Tier badge container |
| Tier pill badge (inline-flex, rounded-full, bordered) |
| Tier icon image (14px, rounded-full) |
| "View rewards" link (14px, medium, underlined) |
Balance Bar
Class | Description |
| Compact points bar (btn-primary bg, rounded-xl) |
| Points value container |
| Points number (24px, bold) |
| Points label (14px) |
| "Redeem" action area |
| Action label text |
| Chevron icon |
CTA Button Block
Class | Description |
| CTA button wrapper |
| CTA button (block, centered) |
Birthday Form
Class | Description |
| Birthday form container |
| Submit button (semibold, centered) |
| Saved confirmation state |
Product Card (Shared)
Used by Recently Viewed, Popular Today, Saved Cart, and Product Recommendations.
Class | Description |
| Product card link (block) |
| Product image (aspect-square, rounded-lg, card-border bg) |
| Product name (14px, medium, line-clamp-2) |
| Price container |
Recently Viewed
Class | Description |
| Section container |
| Section title |
| Product card (144px wide) |
| Loading skeleton |
| Empty state (rounded-xl, card-bg, dashed border) |
| Empty state text (14px, secondary) |
Popular Today
Class | Description |
| Section container |
| Section title |
| Product card (144px wide) |
| Loading skeleton |
Saved Cart
Class | Description |
| Section container |
| Section title |
| Product card (144px wide) |
Product Recommendations
Class | Description |
| Section container |
| Loading skeleton |
| Skeleton placeholder (144x192px, rounded-xl) |
| Product card (144px wide) |
Advertisement Block
Class | Description |
| Block container |
| Card wrapper (rounded-lg, bordered) |
| Image area (3:2 aspect ratio) |
| Image element (object-cover) |
| Text area (p-16, white bg) |
| Title (16px, semibold) |
| Description (14px, secondary) |
| Link wrapper (block, hover:opacity-90) |
Refer a Friend (Block)
Class | Description |
| Block container |
| Section title |
| Title link |
| Arrow icon |
| Loading skeleton |
| Skeleton block |
| Preview mode badge (amber) |
| Referral card (p-16, rounded-xl, card-bg) |
| Card header (centered) |
| Description (14px, secondary) |
| Reward cards row |
| Individual reward card |
| "YOU GET" / "THEY GET" label (12px, uppercase, tracked) |
| Reward value (14px, bold, primary) |
| Link section |
| "YOUR LINK" label (12px, uppercase, tracked) |
| Link input row |
| Referral URL input (truncated, rounded-lg, bordered) |
| Copy button |
| Copied state (green-600) |
| Social sharing section |
| "OR" divider |
| Share buttons row |
| Share button (36px, rounded-lg, white bg, bordered) |
| |
| |
| Twitter/X |
| |
| SMS |
| Active state (primary bg, white text) |
| Email panel |
| Panel header |
| Panel title (14px, semibold) |
| Close button |
| Error banner (red-50 bg) |
| Success banner (green-50 bg) |
| Form field |
| Field label (12px, uppercase, tracked) |
| Email input |
| Message textarea |
| Button row |
| Send button (primary bg, white text) |
| Cancel button (bordered, white bg) |
Loyalty Program
Main Page
Class | Description |
| Page container |
| Page-specific header override target |
| Points stats section (border-bottom) |
| "YOUR POINTS" label (12px, uppercase, tracked, secondary) |
| Points number (48px, bold, primary) |
| Meta row — value + tier |
| Dollar value text (13px, secondary) |
| Vertical divider between meta items |
| Colored tier indicator dot (7px, rounded-full) |
| Tier name (13px, medium, primary) |
| Chevron after tier name |
| Section header (flex, space-between) |
| Section name (16px, semibold) |
| "View all" link (12px, medium, secondary) |
| Rewards section wrapper |
| Rewards list |
| Reward row (flex, py-12, border-bottom) |
| Reward name + desc column |
| Reward name (14px, medium, primary) |
| Reward description (12px, secondary) |
| Code pill container (flex, bordered, rounded-lg) |
| Discount code (12px, mono, tracked, secondary) |
| Used code (line-through, opacity-50) |
| Earnings section wrapper |
| Earnings list |
| Earning row (flex, py-12, border-bottom) |
| Earning name + date column |
| Earning name (14px, medium, primary) |
| Earning date (12px, secondary) |
| Points earned (14px, semibold, primary) |
| Quick action buttons container |
| Action button (flex-col, centered, rounded-xl, bordered) |
| Action icon (primary color) |
| Action title (13px, semibold) |
| Action subtitle (12px, secondary) |
| Empty state (py-24, centered) |
Earning Item (Shared Component)
Used in loyalty program earnings list and Your Earnings page.
Class | Description |
| Row container (py-12, flex, border-bottom) |
| Name/date column |
| Icon container |
| Positive earning icon |
| Negative/deduction icon |
| Earning name (14px, medium, primary) |
| Date text (12px, secondary) |
| Right-side container |
| Points amount (14px, semibold) |
| Positive points (primary color) |
| Negative points (secondary color) |
| Pending badge (amber-50 bg, amber-600 text) |
Reward Item (Shared Component)
Used in the loyalty program active rewards section.
Class | Description |
| Card container (py-12, px-14, rounded-xl, card-bg, bordered) |
| Row layout (flex, gap-12) |
| Icon box (36px, rounded-lg, white bg, bordered) |
| Reward name (14px, medium, primary) |
| Code + copy button row |
| Discount code (12px, mono, tracked, bordered pill) |
| Copy button |
| Copied state (green-600) |
| Default state (secondary) |
Ways to Earn
Class | Description |
| Page container |
| Page-specific header override target |
| Earning rules list |
| Rule row (py-14, flex, border-bottom) |
| Icon container (36px, rounded-10, card-bg fill) |
| Rule name (14px, medium, primary) |
| Points value (12px, secondary) |
| Multiplier badge (amber border, amber-50 bg, amber-600 text) |
| Bonus campaign banner (rounded-lg, amber border, amber-50/60 bg) |
| Banner text (14px, secondary) |
Ways to Redeem
Class | Description |
| Page container |
| Page-specific header override target |
| Rewards list |
| Reward row (py-14, flex, border-bottom, cursor-pointer) |
| Icon/image container (36px, rounded-10, card-bg fill) |
| Icon within visual container |
| Reward name (14px, medium, primary) |
| Reward description (12px, secondary) |
| Points cost (12px, secondary) |
| Minimum spend note (70% opacity secondary) |
View Earning Rule
Class | Description |
| Page container (pb-32) |
| Page-specific header override target |
| Title in header (truncated) |
| Content area (px-20, pt-8, flex-col) |
| Icon + name row (flex, gap-14, mb-8) |
| Icon box (48px, rounded-14, card-bg) |
| Icon (24px, primary color) |
| Rule name (22px, bold, tight tracking) |
| Description (14px, secondary, mb-24) |
| Points display card (p-20, rounded-14, card-bg, mb-20) |
| Points number (36px, bold, primary, tight tracking) |
| "points" label (14px, medium, secondary) |
| Multiplier text (12px, medium, amber-600) |
| Action button container |
| Action button (semibold, centered) |
| Claimed state (flex, centered, gap) |
| Loading state (opacity-60, flex, centered) |
| Tiered review points card (leave_review only, mb-20) |
| Row separator (1px, card-border, inset 20px) |
| Flex row in the card (space-between, px-20, py-16) |
| Left side of base row (flex, items-baseline, gap-8) |
| Written review points (36px, bold, primary) |
| "points" unit on base row (14px, secondary) |
| Descriptor: "Written review", "With a photo/video" |
| Right side of photo/video rows (flex, items-baseline) |
| Photo/video points number (16px, bold, primary) |
| "points" unit on photo/video rows (14px, secondary) |
View Reward
Class | Description |
| Page container |
| Page-specific header override target |
| Title in header (truncated) |
| Content area |
| Icon + name row |
| Icon box (48px, rounded-14, card-bg) |
| Icon (24px, primary color) |
| Full-width image (rounded-14, h-176, card-bg) |
| Image element (object-contain) |
| Reward name (22px, bold, tight tracking) |
| Description (14px, secondary) |
| Last description paragraph |
| Minimum spend note (12px, medium, secondary) |
| Points display card (p-20, rounded-14, card-bg) |
| Points number (36px, bold, primary) |
| "points" label (14px, medium, secondary) |
| Action button container |
| Redeem button base |
| Active state (primary bg, white text) |
| Redeemed state |
| Disabled state (gray-200 bg, gray-400 text) |
| Requirements list |
| Requirement text (12px, secondary) |
| Flexible amount section |
| Info row (flex, space-between, 12px, secondary) |
| Input wrapper |
| Input label (12px, medium, primary) |
| Number input (rounded-lg, card-border border) |
| Error state (red-200 border) |
| Error text (12px, red-500) |
| Preview text (14px, medium, centered) |
| Footer note (12px, secondary) |
| Footer link (12px, medium, primary, underlined) |
View Tier Reward
Class | Description |
| Page container |
| Page-specific header override target |
| Title in header (truncated) |
| Content area |
| Icon + name row |
| Icon box (48px, rounded-14, card-bg) |
| Icon (24px, primary color) |
| Tier badge pill (inline-flex, rounded-full, 12px) |
| Colored dot in tier badge |
| Reward name (22px, bold, tight tracking) |
| Description (14px, secondary) |
| Points display card (p-20, rounded-14, card-bg) |
| Points number (36px, bold, primary) |
| Entry-level points (24px) |
| "points" label (14px, medium, secondary) |
| Warning banner (amber-50 bg, amber-600 text) |
| Action button container |
| Redeem button base |
| Active state (primary bg, white text) |
| Redeemed state |
| Disabled state (gray-200 bg, gray-400 text) |
| Footer note (12px, secondary) |
| Footer link (12px, medium, primary, underlined) |
VIP Tiers
Class | Description |
| Page container |
| Page-specific header override target |
| Horizontal tier tab bar |
| Tier tab button (flex-col, centered, py-12) |
| Active tier tab (primary border-bottom) |
| "Current" label badge (12px, gray-100 bg) |
| Tier icon/badge |
| Tier name + status row |
| Status badge (12px, semibold, gray-100 bg, rounded-full) |
| Progress section (border-bottom) |
| Progress header (flex, space-between) |
| "PROGRESS" label (12px, uppercase, tracked) |
| Percentage text (12px, secondary) |
| Progress number (48px, bold, primary) |
| Unit label (14px, secondary) |
| Progress bar wrapper |
| Track background (5px, rounded-full, gray-200) |
| Fill bar (primary bg, rounded-full, transition) |
| Remaining text (12px, secondary) |
| Complete text (12px, secondary) |
| Benefits list section |
| Reward row (py-14, flex, border-bottom) |
| Icon container (36px, rounded-10, card-bg) |
| Reward name (14px, medium, truncated) |
| Cost text (12px, secondary) |
| Empty benefits state (py-16, centered) |
Your Rewards
Class | Description |
| Page container |
| Page-specific header override target |
| Summary section (border-bottom) |
| "ACTIVE REWARDS" label (12px, uppercase, tracked) |
| Count number (40px, bold, primary) |
| Rewards list |
| Reward row (py-16, border-bottom) |
| Reward name (14px, medium, primary) |
| Description (12px, secondary) |
| Used status badge (gray-100 bg, gray-500 text) |
| Expired status badge (red-50 bg, red-600 text) |
| Code display area (flex, card-bg, rounded-lg) |
| Discount code (13px, mono, tracked) |
| Used code (secondary, line-through) |
| Copy button (12px, secondary, hover:primary) |
| Meta row (flex, space-between, 12px, secondary) |
| Empty state (py-40, centered) |
Your Earnings
Class | Description |
| Page container |
| Page-specific header override target |
| Summary section (border-bottom) |
| "LIFETIME EARNINGS" label (12px, uppercase, tracked) |
| Total number (40px, bold, primary) |
| Earnings list |
| Empty state (py-40, centered) |
Orders
Order List
Class | Description |
| Orders page container |
| "Orders" heading (20px, semibold) |
| Content wrapper |
| Order list |
| Order row (flex, py-16, cursor-pointer, border-bottom) |
| Product thumbnail (56px, rounded-10, card-bg) |
| Placeholder when no image |
| Order details column |
| Order name (14px, semibold) |
| Order date (12px, secondary) |
| Order total (14px, semibold) |
| Status badges container |
| Status badge (12px, uppercase, tracked, gray-100 bg, rounded-full) |
| Fulfilled modifier |
| Unfulfilled modifier |
| In progress modifier |
| Partial modifier |
| On hold modifier |
| Scheduled modifier |
| Unknown modifier |
| Order row inner layout |
| Order info area |
| Order meta text |
| Return badge (amber-50 bg, amber-600 text, rounded-full) |
| Empty state (py-32, centered) |
| Empty text (secondary) |
| Error state (py-32, red-500 text) |
| Loading state (py-32, centered, spinner) |
| "Start shopping" button (btn-primary bg) |
| Footer container |
Order Detail
Class | Description |
| Page container |
| Header section |
| Back link (13px, secondary, hover:primary) |
| Title + badge row |
| Order name (22px, bold, tight tracking) |
| Order date (13px, secondary) |
| Status badge (12px, uppercase, gray-100 bg, rounded-full) |
| Cancelled text (12px, red-500) |
| Tracking info card (rounded-10, card-bg) |
| Tracking row (flex, space-between) |
| Tracking text (13px, primary) |
| Track link (13px, medium, primary) |
| Line items container |
| Line item row (flex, py-16, border-bottom) |
| Product image (56px, rounded-10, card-bg) |
| Order summary (py-12, border-bottom) |
| Total row (flex, space-between, pt-10, border-top) |
| "Total" label (14px, semibold) |
| Total value (16px, bold, primary) |
| Section label (12px, uppercase, tracked, secondary) |
| Contact section (border-bottom) |
| Shipping section (border-bottom) |
| Billing section (border-bottom) |
| Payment section (border-bottom) |
| Shipping method section (border-bottom) |
| Order note section (border-bottom) |
| Badges row (flex, space-between) |
| Badges inner container |
| "View in Shopify" link (13px, secondary, centered) |
| Footer container |
Order Detail — Returns
Class | Description |
| Return section (border-bottom) |
| Return header (flex, space-between) |
| Left side (flex, gap) |
| Return icon (secondary color) |
| "Return" title (14px, semibold, primary) |
| Return status badge (amber-50 bg, amber-600 text) |
| Decline notice container (card-bg, card-border border) |
| Decline reason (14px, medium, primary) |
| Decline note (12px, secondary) |
| Return items list |
| Return item (flex, p-10, rounded-10, card-bg) |
| Item image (40px, rounded-lg) |
| Item info |
| Item name (14px, medium, truncated) |
| Variant text (12px, secondary) |
| Return reason (12px, secondary, italic) |
| Tracking info (flex, card-bg, p-10, rounded-lg) |
| Tracking number (12px, secondary) |
| Tracking link (12px, medium, primary) |
| Create return link (14px, medium, primary, centered) |
Profile
Profile Navigation
Class | Description |
| Profile heading (18px, semibold) |
| Navigation list |
| Nav item (py-16, flex, space-between, border-bottom) |
| Nav item name (15px, semibold, primary) |
| Nav item detail/subtitle (13px, secondary) |
| Logout section |
My Preferences
Class | Description |
| Page container |
| Page-specific header override target |
| Form container |
| Form field wrapper |
| Field label |
| Text input |
| Notifications section |
| Checkbox input |
| Error banner (red-50 bg, red-600 text) |
| Success banner (green-50 bg, green-600 text) |
Shipping Addresses
Class | Description |
| Page container |
| Page-specific header override target |
| Address list |
| Address row (py-16, border-bottom) |
| Recipient name (14px, medium, primary) |
| Address text (13px, secondary) |
| Edit/delete buttons |
| Edit button (12px, medium, hover:accent) |
| Delete button (12px, red-500) |
| Confirmation container |
| Confirm delete (12px, red-500) |
| Cancel delete (12px, secondary) |
| Default badge (12px, uppercase, gray-100 bg) |
| Empty state (py-32, centered) |
| Error banner (red-50 bg) |
| Add button wrapper |
Add / Edit Address
Class | Description |
| Add address page |
| Page-specific header override target |
| Page title |
| Edit address page |
| Page-specific header override target |
| Page title |
| Delete section |
| Error banner (red-50 bg, red-600 text) |
Gift Reminders
Class | Description |
| Page container |
| Page-specific header override target |
| Reminder entry card (rounded-xl, card-bg, card-border border) |
| Entry action button (p-6, rounded-lg, hover:card-border) |
Wishlist
Wishlist Block (For You Tab)
Class | Description |
| Block container |
| Header (section title + view all) |
| "View all" link |
| Empty state |
| Empty icon |
| Empty text |
| Product card |
| Heart/favorite button |
Wishlist Page
Class | Description |
| Page container |
| Header |
| Back button |
| "Shared by" notice |
| "Save all" button |
| Collections section |
| Collections horizontal scroll grid |
| Collection card |
| Collection thumbnail |
| Collection name |
| Item count |
| "All wishlists" back link |
| Edit collection button |
| Empty state |
| Empty icon |
| Empty text |
| Product grid |
| Load more container |
| Load more button |
| Item count display |
| Sign-in prompt |
| Sign-in title |
| Sign-in subtitle |
| Sign-in icon |
Wishlist Product Card
Class | Description |
| Card container |
| Read-only mode modifier |
| Image link wrapper |
| Product image |
| Heart/remove button |
| More actions button (ellipsis) |
| Product info section |
| Card header |
| Title + price group |
| Product title |
| Price container |
| Current price |
| Compare/sale price (line-through) |
| Variant selector dropdown |
| Add to cart button |
| Added state (green bg) |
| Card action buttons |
Action Sheet
Class | Description |
| Full-screen overlay |
| Bottom sheet container |
| Sheet header |
| Product name in header |
| Close button |
| Action list |
| Individual action row |
| Danger action (red text) |
Collection Picker
Class | Description |
| Collections list |
| Collection item |
| Active/selected state |
| Create new option |
| Collection name |
| Item count |
| New collection form |
| Name input |
| Submit button |
| Cancel button |
| Form action buttons |
Collection Edit Drawer
Class | Description |
| Drawer body |
| Field label |
| Name input |
| Save button |
| Share button |
| Footer section |
| Delete button |
Share Drawer
Class | Description |
| Drawer body |
| Share description |
| Link display row |
| Share URL input |
| Copy button |
Toast
Class | Description |
| Toast container (absolute, bottom-80) |
| Toast pill (dark bg #18181B, white text, rounded-14) |
| Success modifier (green icon) |
| Error modifier (red icon) |
| Status icon |
| Wishlist-specific toast |
| Visible state |
Confirmation Modal
Class | Description |
| Modal wrapper (absolute, inset-0, z-200, centered) |
| Backdrop (blur, rgba(0,0,0,0.4)) |
| Modal card (max-w-sm, rounded-2xl, white bg) |
| Header (centered) |
| Cost breakdown section |
| Button area |
| Cancel button (bordered, rounded-xl) |
| Confirm button base (rounded-xl, semibold) |
| Enabled state (primary bg, white text) |
| Disabled state (gray-200 bg) |
| Receipt card (rounded-xl, card-bg, card-border border) |
CSS Snippets Reference
The Custom CSS editor includes built-in snippets to help you quickly customize your sidebar.
Start typing a snippet name and press Tab to insert it.
This will insert all the CSS classes with base styling per component & element to help you get started.
Theme
Snippet | Description |
| Dark theme variable overrides |
| CSS variable overrides template |
| Complete theme template |
Shared Components
Snippet | Description |
| Sidebar header styling |
| Primary & secondary button styling |
| Tab navigation customization |
| Section title styling |
| Product card styling (shared by carousel blocks) |
Structural Elements
Snippet | Description |
| Welcome back card styling |
| Balance bar card styling |
| Sign in form styling |
| Birthday form styling |
Content Blocks
Snippet | Description |
| Recently viewed block styling |
| Popular today block styling |
| Saved cart block styling |
| Product recommendations block styling |
| Advertisement block styling |
| Links block styling |
| CTA button block styling |
| Refer a friend block styling |
| Referral email share panel styling |
Wishlist
Snippet | Description |
| Wishlist block styling |
| Wishlist heart color override |
Loyalty Program
Snippet | Description |
| Stats cards |
| Action buttons |
| Section header "View all" button |
| Earning item row |
| Reward item row |
| Ways to earn list items |
| Ways to redeem list items |
| Reward detail page |
| Earning rule detail page |
| Tier reward detail page |
| Your earnings summary card |
| Your rewards card layout |
| VIP tier cards and rewards |
| VIP tier progress bar |
| Bonus campaign multiplier banner |
| Reward redemption confirmation modal |
Orders
Snippet | Description |
| Order list row styling |
| Order status and return badges |
| Empty state and shop button |
| Order detail header and status badge |
| Line items and price summary |
| Tracking card |
| Info cards (contact, shipping, payment) |
| Return section and items |
Profile
Snippet | Description |
| Profile navigation list items |
| Preferences form feedback states |
| Notification checkbox styling |
| Address list items and actions |
| Shared form inputs (label, input, select, checkbox) |
Layout & Utility
Snippet | Description |
| Floating sidebar customization |
| Mobile-specific media query |
| Hide an element |
| Toast notification styling |