<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:
    .container-xl,
    %container-xl {
      width: 100%;
      max-width: $default-page-layout-content-width-xl;
      padding: 0 $spacer-xs;
      margin: 0 auto;
    
      > * + * {
        margin-top: $spacer-base;
      }
    }
    
    .container-xl-vertical-whitespace,
    %container-xl-vertical-whitespace {
      padding: $spacer-xl $spacer-xs;
    }
    
    @media screen and (min-width: $grid-breakpoint-lg) {
      .container-xl {
        padding: 0 $spacer-base;
      }
    
      .container-xl-vertical-whitespace {
        padding: $spacer-xxl $spacer-base;
      }
    }
    
  • URL: /components/raw/container/_container.scss
  • Filesystem Path: components/02-layouts/component-layouts/container/_container.scss
  • Size: 487 Bytes
  • Handle: @container
  • Preview:
  • Filesystem Path: components/02-layouts/component-layouts/container/container.html

No notes defined.