Page Content

With the help of the .page-content class, predefined layouts can be used for your content in a structured manner.

The following list describe all existing block/element/modifier classes of the component and all data attributes.

• .page-content - required The block class is the starter of this layout and should be attached to the <main> tag.
• .page-content__container - required The container contains a list of items in the main slide and could have aside slides. It should be appended to the <section> or <article> tag. By default, items in a container are displayed across the full width. Any unspecified element in the container is displayed in the main slide.
  • .page-content__container--2-cols With the help of this modifier you can add an aside to the container, which is displayed to the right of the content.
  • .page-content__container--3-cols With the help of this modifier you can add two asides to a container, which is displayed to the left and right of the content. You must specify which of the asides to display in the left column.
• .page-content__leading - This class is particularly necessary for multi-column layouts so that the content of the main area is displayed correctly next to the aside areas.
• .page-content__item - required The actual content will be written in the items. What is in there is completely arbitrary. The items can have a special design depending on the theme. For example, you could give them a card look. Unlike the container, the item class has no special layout task. Accordingly, they can also be reused within other HTML elements, see example Use with Grid
• .page-content__side - All items in this class are displayed in the left (or right) slide.
  • .page-content__side--left
• .page-content--to-border - With this modifier, an element that is a direct child of the container or item can be moved to the edge.
• .page-content--stretch - A direct child element of the container can be drawn over the entire width with this modifier, even if it is a two or three col page content.
• .page-content--to-border.page-content--stretch - You can also combine the two containers.
• .page-content__item--space - Add a gap between every element in the page content item.
• .page-content__item--header - If this modifier is set to the item, the top space of the item can include a .page-content__header
• .page-content__header - a space on top of the .page-content__item, that can contains different content

INFO We recommend that the HTML is structured according to semantic HTML, see semantic HTML elements.

You can use the following HTML example as a guide to show, how your website is structured semantically correctly:

<main class="page-content">
  <h1>Tesla</h1>

  <section class="page-content__container page-content__container--2-cols">
    <h2 class="page-content--stretch">Tesla News</h2>

    <div class="page-content__leading">
      <article class="page-content__item">
        <h3>Latest News</h3>
        <p>Stuff</p>
      </article>
      <article class="page-content__item">
        <h3>News from this month</h3>
        <p>Stuff</p>
      </article>
    </div>

    <aside class="page-content__side">
      <article class="page-content__item">
        <h4>Related News</h4>
        <p>Stuff</p>
      </article>
    </aside>
  </section>

  <section class="page-content__container page-content__container--2-cols">
    <h2 class="page-content--stretch">Tesla Share</h2>

    <div class="page-content__leading">
      <article class="page-content__item">
        <h3>Current Share Values</h3>
        <p>Stuff</p>
      </article>
      <article class="page-content__item">
        <h3>Historic Share Values</h3>
        <p>Stuff</p>
      </article>
    </div>

    <aside class="page-content__side">
      <article class="page-content__item">
        <h4>Related Shares</h4>
        <p>Stuff</p>
      </article>
      <article class="page-content__item">
        <h4>Tesla Profile</h4>
        <p>Stuff</p>
      </article>
    </aside>
  </section>
</main>

One Column

The basic structure for a layout with one column looks like:

<main class="page-content">
  <h1>Tesla</h1>

  <section class="page-content__container">
    <div class="page-content__leading">
      <h2>Tesla News</h2>
      <article class="page-content__item">
        <h3>Latest News</h3>
        <p>Stuff</p>
      </article>
      <article class="page-content__item">..</article>
      <article class="page-content__item">..</article>
    </div>
  </section>

  <section class="page-content__container">..</section>
  <section class="page-content__container">..</section>
</main>

Simple One Col Example

This basic example shows how to implement a very simple, semantically correct structure of the .page-content. There is only one column in the layout. All elements within the .page-content__container class are displayed in the main slide. This looks the same on mobile and desktop devices.

Complex One Col Example

In this example there is an <aside>, but since no multi-column modifier was given to the .page-content class, the <aside> is displayed in the main slide on all screens.

Markup: page-content-one-col-2.hbs

No Leading

The .page-content__leading class is not absolutely necessary, you can omit it, especially with the one col layout.

Two Columns

The two-column layout changes its behavior depending on whether it is viewed on a mobile or desktop device. On mobile devices, the layout behaves like a one-column layout. The aside is always displayed below.

The aside always has the same width on both the LG and XL breakpoints.

This basic structure for a layout with two columns looks like:

<main class="page-content">
  <h1>Tesla</h1>

  <section class="page-content__container page-content__container--2-cols">
    <h2>Tesla News</h2>
    <article class="page-content__item">
      <h3>Latest News</h3>
      <p>Stuff</p>
    </article>

    <aside class="page-content__side">
      <article class="page-content__item">
        <h4>Related News</h4>
        <p>Stuff</p>
      </article>

      <article class="page-content__item">..</article>
      <article class="page-content__item">..</article>
    </aside>
    <article class="page-content__item">..</article>
    <article class="page-content__item">..</article>
    <article class="page-content__item">..</article>
  </section>
</main>

Simple Two Col Example

In this example we show a simple use of a two column layout. In particular, it should be noted that the element that was placed in the HTML after the <aside> (the advertisement) is displayed in the layout below the aside.

Markup: page-content-two-col-1.hbs

Complex Two Col Example

In this example we show how you can combine several asides of different lengths and several main articles with each other.

Three Cols

Unlike in a two-column layout, where the aside has a fixed width, in a three-column layout, the slides all have the same width. This only applies to XL screens.

On LG screens and smaller, this layout behaves like a two-columns layout.

This basic structure for a layout with three columns looks like:

<main class="page-content">
  <h1>Tesla</h1>

  <section class="page-content__container page-content__container--3-cols">
    <h2>Tesla News</h2>

    <aside class="page-content__side page-content__side--left">
      <article class="page-content__item">
        <h4>Related News</h4>
        <p>Stuff</p>
      </article>

      <article class="page-content__item">..</article>
      <article class="page-content__item">..</article>
    </aside>

    <article class="page-content__item">
      <h3>Latest News</h3>
      <p>Stuff</p>
    </article>

    <aside class="page-content__side">
      <article class="page-content__item">
        <h4>Related News</h4>
        <p>Stuff</p>
      </article>

      <article class="page-content__item">..</article>
      <article class="page-content__item">..</article>
    </aside>

    <article class="page-content__item">..</article>
    <article class="page-content__item">..</article>
    <article class="page-content__item">..</article>
  </section>
</main>

Complex Three Col Example

In this example we show a simple version of the three-column layout.

Modifier & Particularities

There are several modifiers that change the behavior of the whole component or specific elements of the component.

Use with Grid

Sometimes a three-column layout should be used, but the aside should continue to have a fixed width. This can be achieved by using the Grid System in the main slide.

Stretch & To Border

In the following we show a few examples of how to use the modifiers .page-content--stretch and .page-content--to-border. We also show an example of how these two modifiers can be combined.

Item Header with f.net PRO design

This example shows a view examples how to design different f.net PRO page content items.

Theme Examples

In the following we will present theme-specific examples for using the .page-content class.

finanzen.net

The finnet example should show how to use the .page-content class with existing components. It is recommended to set the theme accordingly.

finanzen.net Item Gradient

For the finanzen.net theme, we can add a gradient border color to the .page-content__item by adding the .page-content__item--gradient modifier. You can also change the size and colors of the gradient border by setting the custom properties directly to the item:

• --page-content-gradient-size size of the border, default 4px
• --page-content-gradient-from top color, default brand-zero-magenta
• --page-content-gradient-to bottom color, default brand-zero-blue

Here is a example how to change the default values:

<div
  class="page-content__item page-content__item--gradient"
  style="--page-content-gradient-size: 10px; --page-content-gradient-from: yellow; --page-content-gradient-from: pink;"
>
  Your Item
</div>

See the default example: