info icon

With two pages comprised mostly of Carbon components, let’s revisit the landing page and complete the principles section using Carbon pictograms and tokens.

Fork, clone and branch
Review design
The info section
The info card
Add styling
Check accessibility
Push to GitHub

Preview

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.

Other tutorials at this point build a component using Carbon, as we are staying valilla here, and we don’t want to turn this into a Web Component tutorial, we will use a HTML template and BEM class names to prevent our CSS affecting others.

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

Fork, clone and branch

This tutorial has an accompanying GitHub repository called carbon-tutorial-web-components 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](previous step.

Branch

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

git fetch upstream
git checkout -b step-4 upstream/step-4
Copy to clipboard

Note: This builds on top of step 3, but be sure to check out the upstream step 4 branch because it includes the static assets required to get through this step.

Build and start app

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

pnpm i
Copy to clipboard

Then, start the app:

pnpm dev
Copy to clipboard

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

Review design

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 reusable component. As for naming, we’ll call it an

InfoSection

with three

InfoCard

s as children.

Info section layout

The info section

Inside

page-landing__r3

index.html

we will make a couple of small changes. Add the class

info-section

to the

cds--subgrid

<div class="info-section cds--subgrid cds--subgrid--full-wide"></div>
Copy to clipboard

and replace

The principles

and surrounding column with which changes the column settings and provides a class for us to style the section heading.

<div
  class="info-section__column cds--sm:col-span-4 cds--md:col-span-8 cds--lg:col-span-16 cds--xlg:col-span-4 cds--css-grid-column">
  <h3 class="info-section__heading">The Principles</h3>
</div>
Copy to clipboard

Style the

info-section__heading

with:

.info-section__heading {
  @include type-style('heading-01');

  padding-block-end: $spacing-08;
}
Copy to clipboard

The info card

At the bottom of

index.html

between the closing body and html tags add the info card template.

The template

<template id="template--info-card">
  <div
    class="info-card cds--sm:col-span-4 cds--md:col-span-8 cds--lg:col-span-5 cds--xlg:col-span-4 cds--css-grid-column">
    <div class="info-card__uppder">
      <h4 class="info-card__heading">
        Carbon is
        <strong class="info-card__heading--strong">thing goes here</strong>
      </h4>
      <p class="info-card__body">Body goes here</p>
Copy to clipboard

Before we make use of the template we need to remove the column settings from the remaining three elements

page-landing__title

and replace with `info-card to leave:

<div class="info-card">Carbon is open</div>
<div class="info-card">Carbon is modular</div>
<div class="info-card">Carbon is consistent</div>
Copy to clipboard

The script

As the script in this file only affects our landing page, first lets create

landing.js

. Kicking things off by moving the breadcrumb and tabs import from

main.js

import '@carbon/web-components/es/components/breadcrumb/index';
import '@carbon/web-components/es/components/tabs/index';
Copy to clipboard

Then add a script tag to

index.html

to import

landing.js

<script type="module" src="/landing.js"></script>
Copy to clipboard

After making sure everything add, to

landing.js

, the script to create the info card elements. First adding the data we will use to construct the info cards from.

const infoCardDetails = [
  {
    strongMsg: 'Open',
    bodyMsg: `It's a distributed effort, guided by the principles of the open-source movement. Carbon's users are also it's makers, and everyone is encouraged to contribute.`,
    pictogramName: 'advocate',
  },
  {
    strongMsg: 'Modular',
    bodyMsg: `Carbon's modularity ensures maximum flexibility in execution. It's components are designed to work seamlessly with each other, in whichever combination suits the needs of the user.`,
Copy to clipboard

Then create the utility function

updateInfoCard

const updateInfoCard = (here, { strongMsg, bodyMsg, pictogramName }) => {
  const infoCardTemplate = document.querySelector(
    'template#template--info-card'
  );

  if (here && infoCardTemplate) {
    const newInfoCard = infoCardTemplate.content.cloneNode(true);

    const strongEl = newInfoCard.querySelector('.info-card__heading--strong');
Copy to clipboard

Followed by a query to find the info card elements and a loop to add our data.

const infoCards = document.querySelectorAll('.info-card');
[...infoCards].forEach((infoCard, index) => {
  updateInfoCard(infoCard, infoCardDetails[index]);
});
Copy to clipboard

The styles

Looking at the landing page you should see the updated information where previously only the title was rendred. In order to complete our info card we need to add some styling.

First up let’s make the picograms visible with the following.

.info-card__pictogram {
  width: $spacing-10;
  height: $spacing-10;
  background-color: $text-primary;
}

.info-card__pictogram--accelerating-transformation {
  mask: url('/accelerating-transformation.svg') no-repeat center;
}
Copy to clipboard

The remaining styling is to make the info cards pleasing on the eye. Use of Carbon breakpoints, which also control the number of grid columns, keeps our page looking great even on the narrowest of devices.

.info-card {
  display: flex;
  height: 300px;
  flex-direction: column;
  justify-content: space-between;
  padding-inline: $spacing-05;
  border-left: 1px solid $border-subtle;

  @include breakpoint-down(xlg) {
Copy to clipboard

Check accessibility

We’ve added new markup and styles, so it’s a good practice to check Equal Access Checker 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 Accessibility Assessment.

Push to GitHub

That is it you are done. Just one more push to save your completion of step 4.

Git commit and push

First, stage and commit all of your changes:

git add --all && git commit -m "feat(tutorial): complete step 4"
Copy to clipboard

Then, push to your repository:

git push -u origin step-4
Copy to clipboard

Note: If your Git remote protocol is HTTPS instead of SSH, you may be prompted to authenticate with GitHub when you push changes. If your GitHub account has two-factor authentication enabled, we recommend that you follow these instructions to create a personal access token for the command line. That lets you use your token instead of password when performing Git operations over HTTPS.

Edit this page on GitHub

Web components tutorial: Step 3

Web components tutorial: Step 5

4. Laanding the principles