Europa Component Library

Display

Documentation • Demo

Display utility

Forked from Bootstrap 4 Beta and adapted to our needs.

Common display values

The display property accepts a handful of values and we support many of them with utility classes. We purposefully don’t provide every value as a utility, so here’s what we support:

  • .ecl-u-d-none
  • .ecl-u-d-inline
  • .ecl-u-d-inline-block
  • .ecl-u-d-block
  • .ecl-u-d-table
  • .ecl-u-d-table-cell
  • .ecl-u-d-flex
  • .ecl-u-d-inline-flex

Put them to use by applying any of the classes to an element of your choice. For example, here’s how you could use the inline, block, or inline-block utilities (the same applies to the other classes).

Responsive variations also exist for every single utility mentioned above.

  • .ecl-u-d-[ sm|md|lg|xl ]-none
  • .ecl-u-d-[ sm|md|lg|xl ]-inline
  • .ecl-u-d-[ sm|md|lg|xl ]-inline-block
  • .ecl-u-d-[ sm|md|lg|xl ]-block
  • .ecl-u-d-[ sm|md|lg|xl ]-table
  • .ecl-u-d-[ sm|md|lg|xl ]-table-cell
  • .ecl-u-d-[ sm|md|lg|xl ]-flex
  • .ecl-u-d-[ sm|md|lg|xl ]-inline-flex
 
/* No context defined for this component. */
 

        
    



    
    




    


        

            
            
        


        
        

            
    
                
  • 
                    Content:
                    
                        
    
                            
                            
                                
    /*
 * Utilities for common `display` values
 */

@each $breakpoint in map-keys($ecl-grid-breakpoints) {
  @include ecl-media-breakpoint-up($breakpoint) {
    $infix: ecl-breakpoint-infix($breakpoint, $ecl-grid-breakpoints);

    .ecl-u-d#{$infix}-none {
      display: none !important;
    }

    .ecl-u-d#{$infix}-inline {
      display: inline !important;
    }

    .ecl-u-d#{$infix}-inline-block {
      display: inline-block !important;
    }

    .ecl-u-d#{$infix}-block {
      display: block !important;
    }

    .ecl-u-d#{$infix}-table {
      display: table !important;
    }

    .ecl-u-d#{$infix}-table-cell {
      display: table-cell !important;
    }

    .ecl-u-d#{$infix}-flex {
      display: flex !important;
    }

    .ecl-u-d#{$infix}-inline-flex {
      display: inline-flex !important;
    }
  }
}

    
                                
                            
                        
    
                        
                
    • 
                
  • 
                    URL:
                    /components/raw/ecl-u-display/ecl-u-display.scss
                
    • 
                
  • 
                    Filesystem Path:
                    framework/utilities/ecl-u-display/ecl-u-display.scss
                
    • 
                
  • 
                    Size:
                    824 Bytes
                
    • 
            

        

        
    






    
    

    
    
        
  • 
            Handle:
            @ec-europa/ecl-u-display
        
    • 
        
        
        
        
        
        
  • 
            Preview:
            
                
            
        
    • 
        
  • 
            Filesystem Path:
            framework/utilities/ecl-u-display/ecl-u-display.twig
        
    •