Tutorial for The Lockup

Shall we try another component?

What you will be learning

  • How to put a lockup together
  • Know which slots are available for a component and use them

Exercise

Let's look at the ns-lockup. A brand-rich component that helps put the spotlight on a piece of content that is the star of the page.

Let's look at the docs for the ns-lockup component and see what it looks like, and what it's made of.

The ns-lockup is made of:

  • a heading and sub-heading
  • a paragraph
  • a call to action
  • an image

We now have enough knowledge to start building the component from the ground up!

Try and add an ns-lockup after between the landmark and the panel. Make sure it has all the needed parts to it. Use the documentation for help.

👀 Hint

Try this piece of code:

  <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>

Remember

  • If something is not showing, chances are it's missing a slot attribute
  • Slots usually expect specific HTML tags or nucleus components, you will find them in the specification section of the documentation
  • The sub-heading is part of the <h2> tag but gets its visual style by being placed in a <span> container with an "h5" class
  • If you use the default value of an attribute, you do not need to declare it, that will make your markup cleaner

Useful resources