<div class="container-demo container-xl">
    <h2>Container-XL</h2>
    <p>Your content goes here! The container has a max-width of 90.25rem. If the screen is taller than that,
        there is a margin on both sides of the container.</p>
</div>
<div class="container-demo container-xl">
    <h2>Container-XL</h2>
    <p>Your content goes here! The container has a max-width of 90.25rem. If the screen is taller than that,
    there is a margin on both sides of the container.</p>
</div>
/* No context defined. */
  • Content:
    // Centered Containers with a max width
    
    .container-xl,
    %container-xl,
    .container-md,
    %container-md {
      display: flex;
      flex-direction: column;
      align-items: center;
    
      width: 100%;
      margin: 0 auto;
      padding: 0 $spacer-xs;
    
      > * + * {
        margin-top: $spacer-base;
      }
    }
    
    .container-xl,
    %container-xl {
      max-width: $default-page-layout-content-width-xl;
    }
    
    .container-md,
    %container-md {
      max-width: $default-page-layout-content-width-md;
    }
    
    // Vertical Spacing
    .container-vertical-spacing-xxl,
    %container-vertical-spacing-xxl {
      padding-top: $spacer-xl;
      padding-bottom: $spacer-xl;
    }
    
    .container-vertical-spacing-xl,
    %container-vertical-spacing-xl {
      padding-top: $spacer-lg;
      padding-bottom: $spacer-lg;
    }
    
    .container-vertical-spacing-lg,
    %container-vertical-spacing-lg {
      padding-top: $spacer-base;
      padding-bottom: $spacer-base;
    }
    
    //Breakpoints
    
    @media screen and (min-width: $grid-breakpoint-lg) {
      .container-xl {
        padding: 0 $spacer-base;
      }
    
      .container-vertical-spacing-xxl {
        padding-top: $spacer-xxl;
        padding-bottom: $spacer-xxl;
      }
    
      .container-vertical-spacing-xl {
        padding-top: $spacer-xl;
        padding-bottom: $spacer-xl;
      }
    
      .container-vertical-spacing-lg {
        padding-top: $spacer-lg;
        padding-bottom: $spacer-lg;
      }
    }
    
  • URL: /components/raw/container/_container.scss
  • Filesystem Path: components/02-layouts/component-layouts/container/_container.scss
  • Size: 1.3 KB
  • Handle: @container
  • Preview:
  • Filesystem Path: components/02-layouts/component-layouts/container/container.html

No notes defined.