Tutorial for Nucleus components

What you will be learning

  • How to add a Nucleus component and use an attribute to configure it

Nucleus components are HTML elements

A nucleus component is an HTML element, so they’re used in the same way. You know they are Nucleus components because they have the ns- prefix. You may have noticed there is a nucleus element in the example to our right.

ns-panel is a nucleus component. It opens with <ns-panel> and it closes with <ns-panel> (and we'll come back to it in a moment)

You can find all our components in the documentation, and you can easily get to them from the playground using the menu. Our docs hold the purpose and how to use them and our storybook shows how they work and how they can be modified with different attributes.

Let’s look at some of them!

The call to action: ns-cta

Let’s take the call to action as a first example, and let’s look at its documentation page.

Open docs to the CTA page, focus on the specification section to see what attributes are available.

The ns-cta component works in a very similar way than the <a>.

Exercise

Instructions

Replace the <a> tag with an ns-cta and make it click to a page of your choice using the href attribute.

👀 Hint

Try this piece of code:

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

Let's see if there are other ways we can modify ns-cta, check the specification in the docs for the CTA.

In the "Attribute" column, we can see that there is a type attribute. Let's give it a go.

Add the type attribute to the ns-cta and give it a value of "direct"

👀 Hint

Try this piece of code:

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

Nothing has changed. That is becaue direct is the default value for the attribute. So that if we do not define the attribute, the component knows it needs to show the direct CTA by default. Let's change it to the other type.

Change the type attribute value to "text"

👀 Hint

Try this piece of code:

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

See? By changing the attribute, we now have a different type of CTA.

Remember

If you are using the default version of an attribute, you save a few bytes by not declaring the attribute!

Useful resources