BB Inline Stack

Usage

Use BB Inline Stack classes to group elements vertically with consistent spacing, alignment, and responsive behavior inside inline container element. By default, elements are not wrapped to the next line and center-aligned.

                                                        
                                                        
                                                            <span class="bb-inline-stack">
                                                          <i class="bb-inline-stack__item bb-icon bb-icon-cancel"></i>
                                                          <span class="bb-inline-stack__item">Closed</span>
                                                        </span>
                                                        
                                                            

Available classes

Container classes

• bb-inline-stack: Main inline flexbox container for horizontal layout

Item classes

• bb-inline-stack__item: Standard stack item with right margin

                                                        
                                                        
                                                            <span class="bb-inline-stack">
                                                          <span class="bb-inline-stack__item">
                                                            Tab
                                                          </span>
                                                          <span class="bb-inline-stack__item">
                                                            Tab
                                                          </span>
                                                        </span>
                                                        
                                                            

Item modifier classes

• bb-stack__item--spacing-none: Remove margin from item

                                                        
                                                        
                                                            <span class="bb-inline-stack">
                                                          <span class="bb-inline-stack__item bb-inline-stack__item--spacing-none">
                                                            Tab
                                                          </span>
                                                          <span class="bb-inline-stack__item bb-inline-stack__item--spacing-none">
                                                            Tab
                                                          </span>
                                                        </span>
                                                        
                                                            

Density classes

• bb-stack--density-none: Remove all spacing between items
• bb-stack--density-xs: Extra small spacing between items
• bb-stack--density-sm: Small spacing between items
• bb-stack--density-md: Medium spacing between items (default)
• bb-stack--density-lg: Large spacing between items
• bb-stack--density-xl: Extra large spacing between items

                                                        
                                                        
                                                            <span class="bb-inline-stack bb-inline-stack--density-md">
                                                          <span class="bb-inline-stack__item">Tab 1</span>
                                                          <span class="bb-inline-stack__item">Tab 2</span>
                                                        </span>
                                                        
                                                            

Spacing modifier classes

• bb-stack__item--spacing-xs: Extra small margin after item
• bb-stack__item--spacing-sm: Small margin after item
• bb-stack__item--spacing-md: Medium margin after item
• bb-stack__item--spacing-lg: Large margin after item
• bb-stack__item--spacing-xl: Extra large margin after item

                                                        
                                                        
                                                            <!-- Controlling spacing between elements -->
                                                        <span class="bb-inline-stack">
                                                          <span class="bb-inline-stack__item bb-inline-stack__item--spacing-md">
                                                            Tab
                                                          </span>
                                                          <span class="bb-inline-stack__item bb-inline-stack__item--spacing-md">
                                                            Tab
                                                          </span>
                                                        </span>
                                                        
                                                            

Implementation notes

• Spacing is controlled through the $spacer-xs variable and the spacing map $spacing-map).
• Responsive breakpoint variants are available for many modifiers (generated via SCSS loops).