4. Creating components

Carbon provides a solid foundation for building web applications through its color palette, layout, spacing, type, as well as common building blocks in the form of components. So far, we’ve only used Carbon components to build out two pages.

Next, we’re going to use Carbon assets to build application-specific components. We’ll do so by including accessibility and responsive considerations all throughout.

A preview of what you’ll build (see bottom of page):

This tutorial has an accompanying GitHub repository called carbon-tutorial that we’ll use as a starting point for each step. If you haven’t forked and cloned that repository yet, and haven’t added the upstream remote, go ahead and do so by following the step 1 instructions.

With your repository all set up, let’s check out the branch for this tutorial step’s starting point.

Install the app’s dependencies (in case you’re starting fresh in your current directory and not continuing from the previous step):

Then, start the app:

You should see something similar to where the previous step left off.

Here’s what we’re building – an informational section that has a heading and three subheadings. Each subheading has accompanying copy and a pictogram. We’ll assume that this informational section is used elsewhere on the site, meaning it’s a great opportunity to build it as a resusable component. As for naming, we’ll call it an InfoSection with three InfoCards as children.

First we need files for the components, so create an InfoSection folder in src/components. Even though we’re building multiple components, their names all start with Info, so it makes sense to have them share one folder in components. Create these files:

Like our other components, index.js will serve as an entrypoint.

Let’s create the parent component that includes the “The Principles” heading. That markup currently looks like this in LandingPage.vue:

We want to do a few things when abstracting it to a component. First, we only want Carbon (bx--) and this component’s class names; we don’t want to include landing-page__r3 as that’s specific to the landing page. That will be passed in as a property to the component.

We’ll also:

Using props we can render any heading and any number of children components (InfoCard that we’ll build soon.)

Then name our component and add a property to the script section.

At this point let’s add styling for the new class names that we just added.

Next up we’re going to build a component for columns 2 - 4, which currently looks like <div class="bx--col-md-4 bx--col-lg-4">Carbon is Open</div>. Create a new file InfoCard.vue, add:

Give it a name and add props

In doing so, we:

Our styling is not complete yet, but with our components built let’s put them to use. In LandingPage.vue, import the components towards the top of the script section. If you haven’t added a script section, do so now.

While we’re here next to the component imports, let’s import the icons that we’ll need as well.

Don’t forget to add the icons to the list of components used in our template. Wait a minute, are they being used by our template? Well, yes and no. The components are going to be passed as an attribute rather than being used as a DOM element. Vue treats this use case differently and instead of adding to the components property, we need to assign the icons directly to the this object. We can achieve this in a number of different ways, for example as data or computed properties. The following is our preferred method when reactivity is not needed.

In the script section of the component add the lifecycle method created() to add the icons to the component.

With everything imported, replace the current template content:

With the new components:

Then slot the InfoCard content inside the InfoSection tag to give.

Here’s our design showing the spacing tokens that we need to add. We also need to set the type style and borders.

Starting with layout, add the style section to src/components/InfoSection/InfoCard.vue.

Once you save, go ahead and resize your browser to see the responsive layout at the different breakpoints. Make sure to review these color and spacing tokens. There are also a few breakpoint mixins that may be new to you. The @carbon/layout SassDoc is a great reference to see what all is available.

Our InfoCard headings look to be too small. We need to increase their font sizes according to the design spec with:

Also, the design has the last word in each subheading as bold. To accomplish that, add this computed property to InfoCard.vue.

Then, update InfoCard.vue to use splitHeading.

Replacing

with

Finally, add the following declaration block in the style section of InfoCard.vue to set body copy styles and to bottom-align the icons.

We’ve added new markup and styles, so it’s a good practice to check DAP and make sure our rendered markup is on the right track for accessibility.

With the browser extension installed, Chrome in this example, open Dev Tools and run DAP.

That first violation is for the off-screen “skip to content” link. This link isn’t shown and is used to assist screen reading, so the color contrast violation can be ignored.

But, those three other violations came from the <article> element used in new InfoCard. Since the <article> element requires a label, it seems like we may be using the wrong semantic element. A humble <div> will suffice.

In InfoCard.vue, replace the <article> opening and closing tags with <div> tags.

Also it’s time to fix it if you didn’t but I’m sure you can manage that by yourself.

We’re going to submit a pull request to verify completion of this tutorial step.

Run the CI check to make sure we’re all set to submit a pull request.

Before we can create a pull request, stage and commit all of your changes:

Then, push to your repository:

Finally, visit carbon-tutorial to “Compare & pull request”. In doing so, make sure that you are comparing to vue-step-4 into base: vue-step-4.