Page Content

Use this for layouting a content section and an optional context section on the right.

<sl-page-content contextButtonText="Toogle me">
  <sl-h2>Main content</sl-h2>
  <sl-p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</sl-p>
  <div slot="context">
    <sl-h4>Contextual information</sl-h4>
    <sl-p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</sl-p>
  </div>
</sl-page-content>

Examples

Don’t show context on small screens

<sl-page-content hideContextOnSmallScreens>
  <div>default</div>
  <div slot="context">I'm visible when enough screen size</div>
</sl-page-content>

Inline context on small screens

Use inline-context-on-small-screens when the main and context content should share one document flow on screens narrower than 1440px. The internal main and context wrappers are flattened, so their slotted children can participate in the same flex layout and use a single scrollbar. Drawer transitions and controls are disabled while the content is inline.

At 1440px and wider, the regular two-column main and context layout is restored. This behavior is opt-in; page content without the attribute remains unchanged.

Tip: Because the internal wrappers use display: contents in inline mode, direct slotted children can be reordered with the CSS order property. This makes it possible to place contextual content between main-content elements on small screens without changing the markup. Reset the order in the desktop breakpoint if the same elements need a different position in the two-column layout.

<sl-page-content inline-context-on-small-screens>
  <div class="introduction">Main content</div>
  <div class="details">More main content</div>
  <div slot="context" class="context">Context content in the same flow on small screens</div>
</sl-page-content>

<style>
  @media (max-width: 1439px) {
    .introduction {
      order: 1;
    }

    .context {
      order: 2;
    }

    .details {
      order: 3;
    }
  }
</style>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://v3-10-14.yoummday-theme.pages.dev/components/page-content/page-content.js"></script>

import 'https://v3-10-14.yoummday-theme.pages.dev/components/page-content/page-content.js';

import '@yoummday/ymmd-shoelace/dist/components/page-content/page-content.js';

import SlPageContent from '@yoummday/ymmd-shoelace/dist/react/page-content';

Slots

Learn more about using slots.

Properties

Learn more about attributes and properties.

Parts

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

• <sl-button>
• <sl-icon>
• <sl-spinner>