BB Block

CSS utility classes for applying vertical spacing using bottom margins with responsive breakpoint support

Usage

Use BB Block classes to add consistent vertical spacing between elements using bottom margins.


                                                        
                                                        
                                                            <!-- Basic spacing classes -->
                                                        <div class="bb-block--xs">Content with extra small bottom margin</div>
                                                        <div class="bb-block--sm">Content with small bottom margin</div>
                                                        <div class="bb-block--md">Content with medium bottom margin</div>
                                                        <div class="bb-block--lg">Content with large bottom margin</div>
                                                        <div class="bb-block--xl">Content with extra large bottom margin</div>
                                                        
                                                        <!-- Special modifiers -->
                                                        <div class="bb-block--no-margin">Content with no bottom margin</div>
                                                        <div class="bb-block--full-width">Content with full width</div>

Responsive classes

BB Block supports responsive spacing that applies only to specific breakpoints using the format bb-block--{size}-{breakpoint}-{up|down}.


                                                        
                                                        
                                                            <!-- Responsive spacing examples -->
                                                        <div class="bb-block--md-lg-down">Medium margin on large screens and smaller</div>
                                                        <div class="bb-block--sm-xl-up">Small margin on extra large screens and larger</div>
                                                        <div class="bb-block--lg-md-up">Large margin on medium screens and larger</div>
                                                        <div class="bb-block--xs-sm-down">Extra small margin on small screens and smaller</div>

Available classes

Size classes

bb-block--xs: Extra small bottom margin using $spacer-xs

bb-block--sm: Small bottom margin using $spacer-sm

bb-block--md: Medium bottom margin using $spacer-md

bb-block--lg: Large bottom margin using $spacer-lg

bb-block--xl: Extra large bottom margin using $spacer-xl


                                                        
                                                        
                                                            <!-- Basic spacing -->
                                                        <div class="bb-block--md">
                                                            <h2>Section Title</h2>
                                                            <p>This section has medium spacing below it.</p>
                                                        </div>
                                                        <div class="bb-block--sm">
                                                            <p>This paragraph has small spacing below it.</p>
                                                        </div>

Modifier classes

bb-block--no-margin: Removes bottom margin (sets to 0)

bb-block--full-width: Sets width to 100%

bb-block--bottom-space: Adds specific bottom padding with max-height constraint


                                                        
                                                        
                                                            <!-- Full width content block -->
                                                        <div class="bb-block--full-width bb-block--lg">
                                                            <div class="alert alert-info">Full width alert with large bottom margin</div>
                                                        </div>
                                                        <!-- Content with special bottom spacing -->
                                                        <div class="bb-block--bottom-space">
                                                            <div class="form-group">Form element with constrained height and bottom padding</div>
                                                        </div>

Responsive classes

All size classes can be combined with breakpoint modifiers:

bb-block--{size}-xs-{up|down}: Apply on xs breakpoint and up/down

bb-block--{size}-sm-{up|down}: Apply on sm breakpoint and up/down

bb-block--{size}-md-{up|down}: Apply on md breakpoint and up/down

bb-block--{size}-lg-{up|down}: Apply on lg breakpoint and up/down

bb-block--{size}-xl-{up|down}: Apply on xl breakpoint and up/down


                                                        
                                                        
                                                            <!-- Large spacing on desktop, small spacing on mobile -->
                                                        <div class="bb-block--sm bb-block--lg-lg-up">
                                                            <div class="card">Responsive card spacing</div>
                                                        </div>
                                                        <!-- No margin on mobile, medium margin on tablet and up -->
                                                        <div class="bb-block--no-margin bb-block--md-md-up">
                                                            <div class="content">Responsive content block</div>
                                                        </div>

Deprecated classes

bb-block--lg-down: deprecated in ui-ang@14, will be removed in ui-ang@16. Use bb-block--md-lg-down instead