# Container

WIP

- HTML
- View
- Context
- Assets
- Info
- Notes

`

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

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/02-layouts/component-layouts/container/container.html

No notes defined.