Tutorial for Panels

Panels

Good work, we now have an ns-landmark and a ns-lockup!

The next thing we'll look into is where components live.

What you will be learning

  • How to achieve our basic website layout (central body of content)
  • Adding decorations to ns-panel

Exercise

Every component has a natural place to live in. These are parent components.

Most components will all be happy to live inside a component called ns-panel.

The ns-panel is the base of our website layout. It sets a central container, that will give our pages a body of content.

If you look at the editor, we've had an empty ns-panel since the beginning. Let's move the lockup inside the panel.

Place the lockup inside the <ns-panel>

👀 Hint

Try this piece of code:

<ns-panel>
  <ns-lockup>
    <h2 slot="heading"><span class="h2">Hello again</span></h2>
    <p slot="paragraph">This is a paragraph with some text in it.</p>
    <ns-cta slot="cta">Click me</ns-cta>
    <ns-image slot="image" src="https://www.britishgas.co.uk/aem6/content/dam/britishgas/images/home-services/New-Soap-Face-Home-Servicesv2.jpg" ratio="16x9"></ns-image>
  </ns-lockup>
</ns-panel>

See what happened there? The panel places the lockup in a central body of content, the lockup is no longer trying to take the entire width of the page (you might need to see the preview on a big screen)

Decorations

Panels can have a decoration, a way to break the monotony of the white background of the page. Let's look at the documentation and see what options are available.

Add the decoration attribute to the ns-panel and set it to blue

👀 Hint

Try this piece of code:

<ns-panel decoration="blue">
  <ns-lockup>
    <h2 slot="heading"><span class="h2">Hello again</span></h2>
    <p slot="paragraph">This is a paragraph with some text in it.</p>
    <ns-cta slot="cta">Click me</ns-cta>
    <ns-image slot="image" src="https://www.britishgas.co.uk/aem6/content/dam/britishgas/images/home-services/New-Soap-Face-Home-Servicesv2.jpg" ratio="16x9"></ns-image>
  </ns-lockup>
</ns-panel>

In the next lesson, we'll see how we can go beyond a central body of content.