# Article Layout

WIP

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

`

`
`

`
`

    /* No context defined. */

`
File:

- Content:
  `

      %article-layout {
        display: flex;
        flex-direction: column;
        padding: 0 $spacer-sm $spacer-base $spacer-sm;

        > * + * {
          margin-top: $spacer-base;
        }

        super-quote,
        long-quote,
        pull-quote {
          @extend %container-vertical-spacing-lg;

          align-self: center;
        }

        //Wrapper for contant that should not stretch
        .centered-content {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .centered-content-75 {
          display: flex;
          align-self: center;
          justify-self: center;
          width: 75%;
        }

        // Breakpoints
        @media screen and (min-width: $grid-breakpoint-md) {
          padding-right: $spacer-xxl;
          padding-left: $spacer-xxl;
        }

        @supports (display: grid) {
          @media screen and (min-width: $grid-breakpoint-lg-xl) {
            display: grid;
            grid-template-columns: 1fr 11rem 5rem 2rem 50rem 2rem 5rem 11rem 1fr; //magic numbers
            grid-template-rows: auto;

            padding-right: $spacer-sm;
            padding-left: $spacer-sm;

            // Centered textwurst items
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p,
            ul,
            ol,
            check-list,
            bold-list,
            table,
            blockquote,
            super-quote,
            long-quote,
            pull-quote,
            info-box,
            pre,
            code,
            wall-of-consent,
            hr,
            .author-bio,
            .author-section,
            .footnote-section,
            .footnotes,
            .centered-content,
            .zigzag,
            .centered-content-75,
            figure,
            .two-column-image-divider-asymmetric,
            .case-list-teaser {
              grid-column: 5 / 6;
            }

            // Left aligned elements
            .toc {
              grid-column: 2 / 4;
              grid-row: 2 / 100;
              align-self: start;
            }

            // Right aligned elements
            .info-note {
              grid-column: 7 / 9;
              grid-row: 2/ 100;
              align-self: start;
            }
          }
        }
      }

  `
- URL: /components/raw/article-layout/_article-layout.scss
- Filesystem Path: components/02-layouts/page-layouts/article-layout/_article-layout.scss
- Size: 1.9 KB

- Handle: @article-layout
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/02-layouts/page-layouts/article-layout/article-layout.html

No notes defined.