Container 

<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.