Page Content

<sl-page-content> | SlPageContent

Since 2.34.0

stable

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

Main content

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.

Contextual information

<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

default

I’m visible when enough screen size

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

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

Import

Bundler

React

To import this component from the CDN using a script tag:

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

To import this component from the CDN using a JavaScript import:

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

To import this component using a bundler:

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

To import this component as a React component:

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

Slots

Name	Description
(default)	The default content of the page.
`context`	The optional right-side context of the page.

Learn more about using slots.

Properties

Name	Description	Type	Default
`hideContextOnSmallScreens`	Hide the context area on small screens.	`false`	-
`contextButtonText`	The text label for the context button.	`string \| undefined`	-
`_isContextColumnOpen`	Whether the context column is open.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`main`	The component’s main content wrapper.
`context`	The component’s context content wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

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