Recreate the Banner as a ComponentBeta

This article will explore the concept of breaking a website in to blocks, by the end you learn how to recreate them as components and test them locally.


1. Break the Design into Pieces.

(The Homepage Banner)

As we will recreate our homepage design as components, we will want to break the page into blocks. We can think of the parts of our website as easily reusable building blocks, with which we can create highly flexible pages.

So if we imagine that the banner at the top of our page is a block that lives on its own, we can begin to imagine what that block is made of. This is pretty straight forward. We will need the following fields:

Description

Rich Text field

"Learn More" Button

 Link field for the clickthrough URL + a Rich Text field for the button text

Background

Here's a video to further show this:

2. Generate a Component Template

Now that we know what fields are needed to build our banner, we will want to begin the development process. The first step in this process is to generate the template from which we'll build our component. To do this, we run the --create-slice command.

Copy
prismic sm --create-slice

💡 What Does This Command Do?

The --create-slice command will create the template files for a new component, content model (Slice), the mock data, and Storybook. It also adds a default @/slices path to your sm.json file. This will give you the power to develop your entire component library locally.

Here's an example of what running the command looks like. We select the @/slices local library (or create it if it doesn't exist), then we give it a name made of 2 PascalCased words. I'll call mine BannerSlice:

Running the prismic sm --create-slice command in the terminal

3. Create the Slice (Content Model) for Your Component

The next step will be to create the content model for our components on the previously listed fields. To do this we will need to open The Slice Builder!

Launch The Slice Builder

First you will need to add Storybook (this is necessary to create a preview of the component):

Copy
prismic sm --add-storybook

Then to open The Slice builder, open a new terminal window and run the following command:

Copy
prismic sm --develop

💡 What is The Slice Builder?

A visual builder with all the tools you need to generate data models and mock CMS content locally.

Add Your Fields to the Slice

Once you run the above command, The Slice Builder will be running on http://localhost:9999. When you visit the link, you will be greeted by a visual representation of the component we just created. Next, click through to the build screen for our newly created Slice (content model), so we can begin to add our fields. Which if you remember, are:

Description

Rich Text field

Learn More" Button

Link field for the clickthrough URL + a Rich Text field for the button text

Background

Use the visual builder to add and name the fields. The 'name' you give these fields are API IDs to reference the fields. You can click the gear icon ⚙️ if you want to edit any of these fields' settings. Thanks to the template we created previously, 2 of these fields, Title & Description, have already been added.

Then click 'Save to filesystem'. This will update the model.json file with the fields that will represent our content and the mock.json file containing the mock data that we will use to develop our component. You'll see more about that next.

💡 What's an API ID?

The fields' API ID is the ID corresponding to the data that will come from the content API (Prismic). But, this field will correspond to the mock data that we previously generated for developing our component locally when using The Slice Builder.

4. Update Component Code

Now we can add the corresponding code to our component file (index.vue) for the fields that we just added. You can see the recommended code snippets for your framework with API IDs included by clicking the 'Show code widgets' checkbox. Click the 'Copy code' button on the suggested code snippets in the slice builder, then in your code editor of choice navigate to, and open your component file, in my case ~/slices/BannerSlice/index.vue. Finally, paste this code into your index.vue file.

A couple of differences from the suggested code snippets will be the background image and the banner title. For the background image, we will take the API ID from that field and add it to the <section> block's inline style and add some styling for this background image here. For the title we'll use the asText method to make sure it's output the title as a <h1> and take control of the styling. Next, we'll continue in that vein and explore styling and preview our component locally as we do our CSS.

Below you can see the full code for the fields that we should add:

Copy
<template>
  <section class="section" :style="{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url(' + slice.primary.background.url + ')' }">
    <h1 class="banner-title">
        {{ $prismic.asText(slice.primary.title) }}
    </h1>
    <prismic-rich-text :field="slice.primary.description" />
    <prismic-link :field="slice.primary.link">{{ slice.primary.linkabel }}</prismic-link>
  </section>
</template>

5. Preview Locally & Style Component

To see what your component will look like with the mock data that we generate previously, simply visit http://localhost:3003 to use the Storybook application we added earlier. If it's not already running, then run the command below:

  • npm
  • Yarn
Copy
npm run storybook
Copy
yarn run storybook

Now you'll see what your component will look like with the mock data so you can begin styling and editing your component. As you've seen, the component is quite plain, and the image is probably not aligned and wrapped correctly, so we'll start there. First give your banner section a class name, like the one below:

Copy
class="banner-background"

Then in the style section of your component, you can add the CSS to improve your component looks. We want the styling here to be specific to this component and not bleed into other components, so we add the scoped attribute to restrict the CSS to this file. We can then add the styling for the banner background as below:

Copy
<style scoped>
.banner-background {
  margin: -70px 0 80px;
  padding: 10em 0 8em;
  background-position: center center;
  background-size: cover;
  color: #ffffff;
  line-height: 1.75;
  text-align: center;
}
</style>

Now save and preview your changes in Storybook, http://localhost:3003. Looks good? Great, let's add the rest of our styling. First thing to do is to add your class names and then your styles. Below is our full code for this component:

Copy
<template>
  <section class="banner-background" :style="{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url(' + slice.primary.background.url + ')' }">
    <div class="banner-content container">
      <h1 class="banner-title">
          {{ $prismic.asText(slice.primary.title) }}
      </h1>
      <prismic-rich-text :field="slice.primary.description"  class="banner-description"/>
      <prismic-link :field="slice.primary.link" class="banner-button">{{ slice.primary.linkLabel }}</prismic-link>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    slice: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
}
</script>

<style scoped>
.banner-background {
  margin: 0 0 80px 0;
  padding: 10em 0 8em;
  background-position: center center;
  background-size: cover;
  color: #ffffff;
  line-height: 1.75;
  text-align: center;
}

.banner-content {
  text-align: center;
}

.banner-title, .banner-description {
  width: 90%;
  max-width: 490px;
  margin-left: auto;
  margin-right: auto;
}

.banner-title {
  color: #ffffff;
  font-size: 70px;
  font-weight: 900;
  line-height: 70px;
}

.banner-button {
  background: #ffffff;
  border-radius: 7px;
  color: #484D52;
  font-size: 14px;
  font-weight: 700;
  padding: 15px 40px;
}
.banner-button:hover {
  background: #c8c9cb;
}

@media (max-width: 767px) {
  .banner-background {
    margin: 0 0 40px;
    padding: 10em 0 6em;
  }

  .banner-title {
    font-size: 50px;
    line-height: 50px;
  }
}
</style>

6. Push Slice to Prismic

Finally, now we've finished developing our component, we'll push our Slice to Prismic. Jump back over to The Slice Builder, update your screenshot, which will be used as a preview for your content writers to choose Slices, and send your content model (Slice) to Prismic for future use.

Congratulations you've just built your first component! Now let's do the rest.


Next and Previous articles