Tutorial for The Landmark

How to introduce a page

Let’s look at a more complex component now. Let’s add a hero banner, that we call a landmark.

Exercise

What you will be learning

  • How to put a landmark together
  • What are component slots and how to use them

Instructions

Adding a Landmark

Let's start by adding a landmark at the top, before the panel

πŸ‘€ Hint

Try this piece of code:

<ns-landmark></ns-landmark>

<ns-panel>

</ns-panel>

<div>
<h1>Hello world!</h1>
  <h2 class="h4">Hello World</h2>
  <p>Add your name</p>
  <ns-cta type="direct" href="https://www.google.com">I'm a link that goes to Google</ns-cta>
</div>

Now we need to configure it.

Open docs for the landmark and check the options: go to the specification section.

Changing the type

We can choose a type: let's go for a "valley". (the default is a "summit") The Valley landmark has a heading, some text, a call to action and an image.

Add the type attribute and set it to "valley".

πŸ‘€ Hint

Try this piece of code:

<ns-landmark type="valley"></ns-landmark>

You can see that the landmark is there, and needs more configuration.

Adding an image

Let's add an image. Check the specification to see if there is an attribute for that. (for this example, we'll use this image, use its address in the next exercise)

Add the image attribute and set its value to display the example image example from the link above.

πŸ‘€ Hint

Try this piece of code:

<ns-landmark type="valley" image="https://www.britishgas.co.uk/aem6/content/dam/britishgas/images/home-services/New-Soap-Face-Home-Servicesv2.jpg"></ns-landmark>
Changing the image ratio

The image we are using is in a 16x9 format, which is not the default for the valley landmark. If we wanted to use a 16x9, we need to add the ratio attribute.

Add the ratio attribute and set it to the right value so we have a 16x9 image.

πŸ‘€ Hint

Try this piece of code:

<ns-landmark type="valley" image="https://www.britishgas.co.uk/aem6/content/dam/britishgas/images/home-services/New-Soap-Face-Home-Servicesv2.jpg" ratio="16x9"></ns-landmark>

Adding a heading

Now, we need a heading. We can re-use the one we already have put together. Let's move it into the landmark component.

Copy and paste the heading into the landmark.

πŸ‘€ Hint

Try this piece of code:

<ns-landmark type="valley" image="https://www.britishgas.co.uk/aem6/content/dam/britishgas/images/home-services/New-Soap-Face-Home-Servicesv2.jpg" ratio="16x9">
    <h1>Hello world!</h1>
</ns-landmark>

Nothing happened... but that is expected.

What are slots?

Some Nucleus components like the landmark, expect elements inside them like a heading, a paragraph, and a call to action... To make sure that these elements are in the correct place within the component, we have something called "slots”. A slot is an attribute you can add to the element.

Let's look at the docs to see what slots a landmark has. You will find the available slots for a component in the specification section of the documentation, right below the attributes.

πŸ‘ Tip: documentation pages have a navigation on the right-hand side that gives you a shortcut to the different sections. It's an easy way to go straight to the specification section!

There is a heading slot! Let's add this to our heading in the landmark

Add slot="heading" attribute to the <h1> in the <landmark>

πŸ‘€ Hint

Try this piece of code:

<ns-landmark type="valley" image="https://www.britishgas.co.uk/aem6/content/dam/britishgas/images/home-services/New-Soap-Face-Home-Servicesv2.jpg" ratio="16x9">
    <h1 slot="heading">Hello world!</h1>
</ns-landmark>

And just like that, the heading is now visible.

Adding content

Now that we have added a heading, try and add the paragraph and the call to action into the <landmark>, and give them the right slots.

Try to move the paragraph and call to action into the landmark component with the right slot names for both, so they are visible and positioned where they are expected to be.

πŸ‘€ Hint

Try this piece of code:

<ns-landmark type="valley" image="https://www.britishgas.co.uk/aem6/content/dam/britishgas/images/home-services/New-Soap-Face-Home-Servicesv2.jpg" ratio="16x9">
    <h1 slot="heading">Hello world!</h1>
    <p slot="paragraph">Add your name</p>
    <ns-cta slot="cta" type="direct" href="https://www.google.com">I'm a link that goes to Google</ns-cta>
</ns-landmark>

What’s good about the slots is that it doesn’t matter in which order you add your elements, the component knows how it should look πŸ˜€. Try to switch places between the heading, the call to action and the paragraph, and notice that the structure of the component isn't affected.

Useful resources