# Article Layout Simple

WIP

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

`

`
`

`
`

    /* No context defined. */

`
File:

- Content:
  `

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

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

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

          align-self: center;
          max-width: 45rem;
        }

        //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 7rem 50rem 7rem 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,
            .centered-content-75,
            .zigzag {
              grid-column: 3 / 4;
            }
            // Centered elements that are a bit wider than the textwurst
            figure,
            .two-column-image-divider-asymmetric,
            .case-list-teaser,
            .topic-teaser {
              grid-column: 2 / 5;
            }
          }
        }
      }

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

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

No notes defined.