Skip to main content

Create a Rivet component using utilities

Learn how to use Rivet's utility classes to create your own component

Beginner
45 min
Requires knowledge of HTML and CSS

What you'll learn

  • How to read utilities documentation
  • How to use utilities to add Rivet styles to non-component markup
  • How to combine utilities to create new components

What are Rivet utilities? #

Rivet utilities are CSS classes that can be used to adjust color, spacing, typography, borders, shadows, and other visual styles.

Utilities are helpful when you need to fine-tune a page layout. You can also combine utilities to create an interface element that Rivet’s built-in components don’t cover.

In this tutorial, you’ll use Rivet utilities to create the author byline component shown below.

Author byline component The author byline component you'll create in this tutorial.

1. Open CodePen #

Go to codepen.io/pen.

This will open CodePen, an in-browser editor in which you can write HTML, CSS, and JavaScript.

2. Set up your CodePen workspace #

The CodePen editor has three tabs: HTML, CSS, and JS. In this tutorial, you’ll only be using the HTML tab.

First, click the Change View button at the top of the editor and select the left-aligned layout. This will move the code editing tabs to the left side of the screen.

Change CodePen view button

To hide the CSS and JS tabs and make the HTML editor tab larger, click the CSS tab header and drag it down to the bottom of the screen.

Drag CodePen editor tabs down

Depending on your screen size, you may also want to make the HTML editor tab wider. You can do so by clicking and dragging the divider between the code editor tabs and preview area.

Widen CodePen HTML editor

3. Import Rivet CSS #

CodePen allows you to import CSS stylesheets into your document.

To include Rivet styles and utilities, click the Settings button at the top of the editor. This will open a configuration screen.

In the screen that opens, click CSS in the left-hand menu.

CodePen settings CSS tab

Scroll down to Add External Stylesheets/Pens. Paste the following into the first text field (not the search box):

https://unpkg.com/rivet-core@2.1.0/css/rivet.min.css
CodePen settings paste Rivet CSS path
Your CSS path may differ slightly from the one shown in the above screenshot.

Click Close.

4. Copy and paste byline markup #

Copy the byline component markup shown below and paste it into the HTML tab in CodePen.

You should see the unstyled byline component appear in the preview window.

<!-- Component wrapper -->
<div>
<!-- Image -->
<img src="https://rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
<!-- Content -->
<div>
<h2>Norval Ashton</h2>
<p>Norval Ashton is a writer and researcher from Bloomington, Indiana. They have won many awards.</p>
<a>test@iu.edu</a>
</div>
</div>
Paste byline markup

Note that the pasted markup is just basic HTML. In the next steps, you’ll use utility classes to add Rivet styles to the byline component.

5. Move text to the right of the photo #

Currently, the author’s name, bio, and email are positioned underneath the photo.

To move them to the right of the photo, you’ll use Rivet’s flex utilities. Flex utilities allow you to fine-tune the position of elements within a single component.

Go to the flex utilities documentation.

Reading utilities documentation #

A utilities documentation page has the following sections:

Overview
A short description of the utility classes and the use cases they're designed for.
Examples
A dropdown that lets you preview different examples of the utilities in use and their associated HTML code. You can use the buttons in this section to open the preview in a new window, edit the code on CodePen, copy the code to your clipboard, or grab a shareable link directly to the example.
Usage
Instructions on how to use the utility classes.

5.1. Arrange content horizontally #

You can arrange items horizontally in an element by using the .rvt-flex utility class.

Add the .rvt-flex CSS class to the component wrapper div in the byline markup as shown below.

The page preview should update to show the text moved to the right of the photo.

<!-- Component wrapper -->
<div class="rvt-flex">
<!-- Image -->
<img src="https://rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
<!-- Content -->
<div>
<h2>Norval Ashton</h2>
<p>Norval Ashton is a writer and researcher from Bloomington, Indiana. They have won many awards.</p>
<a>test@iu.edu</a>
</div>
</div>
Add rvt-flex to byline

5.2. Center content vertically #

You can center items vertically in an element by using the .rvt-items-center utility class in combination with .rvt-flex.

Add the .rvt-items-center CSS class to the component wrapper div in the byline markup as shown below.

The page preview should update to show the text centered vertically with the photo.

<!-- Component wrapper -->
<div class="rvt-flex rvt-items-center">
<!-- Image -->
<img src="https://rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
<!-- Content -->
<div>
<h2>Norval Ashton</h2>
<p>Norval Ashton is a writer and researcher from Bloomington, Indiana. They have won many awards.</p>
<a>test@iu.edu</a>
</div>
</div>
Add rvt-items-center to byline

6. Add spacing #

Rivet provides spacing utilities that can be used to add margins and padding between page elements.

In this step, you’ll add spacing between the parts of the byline component so that they don’t run up against one another.

Go to the spacing utilities documentation.

6.1. Add space between the photo and the text #

You can add margins between elements using CSS classes that follow the .rvt-m-[direction]-[size] pattern.

For example, if you wanted to add a large margin to the bottom of an element, you would add the .rvt-m-bottom-lg CSS class.

To put some space between the photo and the text in the byline component, add the .rvt-m-right-xl CSS class to the img element as shown below.

The page preview should update to show the added spacing between the photo and the text.

<!-- Component wrapper -->
<div class="rvt-flex rvt-items-center">
<!-- Image -->
<img class="rvt-m-right-xl" src="https://rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
<!-- Content -->
<div>
<h2>Norval Ashton</h2>
<p>Norval Ashton is a writer and researcher from Bloomington, Indiana. They have won many awards.</p>
<a>test@iu.edu</a>
</div>
</div>
Add rvt-m-right-xl to photo

6.2. Add padding around component #

You can add padding around elements using CSS classes that follow the .rvt-p-[direction]-[size] pattern.

For example, if you wanted to add a small amount of padding around each side of an element, you would add the .rvt-p-all-sm CSS class.

To add an extra large amount of padding around the entire byline component, add the .rvt-p-all-xl CSS class to the component wrapper div element as shown below.

The page preview should update to show the added spacing around the entire byline component.

<!-- Component wrapper -->
<div class="rvt-flex rvt-items-center rvt-p-all-xl">
<!-- Image -->
<img class="rvt-m-right-xl" src="https://rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
<!-- Content -->
<div>
<h2>Norval Ashton</h2>
<p>Norval Ashton is a writer and researcher from Bloomington, Indiana. They have won many awards.</p>
<a>test@iu.edu</a>
</div>
</div>
Add rvt-p-all-xl to byline

7. Adjust typography #

Rivet provides typography utilities you can use to adjust an element’s text styles.

In this step, you’ll update the appearance of the byline text to create more visual contrast between the name and the biography.

Go to the typography utilities.

7.1. Add prose styling to the text #

You can use the .rvt-prose typography utility class to add automatic styling to an element containing running text.

To style the byline component’s text, add the .rvt-prose CSS class to the div element wrapping the name, bio, and email elements as shown below.

The page preview should update to show the new text styles.

<!-- Component wrapper -->
<div class="rvt-flex rvt-items-center rvt-p-all-xl">
<!-- Image -->
<img class="rvt-m-right-xl" src="https://rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
<!-- Content -->
<div class="rvt-prose">
<h2>Norval Ashton</h2>
<p>Norval Ashton is a writer and researcher from Bloomington, Indiana. They have won many awards.</p>
<a>test@iu.edu</a>
</div>
</div>
Add rvt-prose to byline content

8. Add border and shadow #

Rivet provides border utilities and shadow utilities that can be used to help visually group and highlight elements.

In the next steps, you’ll add a border and subtle drop shadow to the byline component.

8.1. Add rounded border #

Go to the border utilities documentation.

You can use the .rvt-border-all CSS class to add a border on each side of an element. You can combine the .rvt-border-all class with the .rvt-border-radius class to add rounded corners to the border.

Add both the .rvt-border-all and .rvt-border-radius CSS classes to the component wrapper div element as shown below.

The page preview should update to show the border.

<!-- Component wrapper -->
<div class="rvt-flex rvt-items-center rvt-p-all-xl rvt-border-all rvt-border-radius">
<!-- Image -->
<img class="rvt-m-right-xl" src="https://rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
<!-- Content -->
<div class="rvt-prose">
<h2>Norval Ashton</h2>
<p>Norval Ashton is a writer and researcher from Bloomington, Indiana. They have won many awards.</p>
<a>test@iu.edu</a>
</div>
</div>
Add border to byline component

8.2. Add subtle drop shadow #

Go to the shadow utilities documentation.

You can use the .rvt-shadow-subtle CSS class to add a subtle drop shadow to an element.

Add the .rvt-shadow-subtle CSS class to the component wrapper div element as shown below.

The page preview should update to show the drop shadow.

<!-- Component wrapper -->
<div class="rvt-flex rvt-items-center rvt-p-all-xl rvt-border-all rvt-border-radius rvt-shadow-subtle">
<!-- Image -->
<img class="rvt-m-right-xl" src="https://rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
<!-- Content -->
<div class="rvt-prose">
<h2>Norval Ashton</h2>
<p>Norval Ashton is a writer and researcher from Bloomington, Indiana. They have won many awards.</p>
<a>test@iu.edu</a>
</div>
</div>
Add shadow to byline component

9. Give the photo a rounded appearance #

To complete the byline component, you’ll use the .rvt-border-radius-circle CSS class from the border utilities to give the photo a rounded appearance.

Add the .rvt-border-radius-circle CSS class to the img element as shown below.

The page preview should update to show the rounded image.

<!-- Component wrapper -->
<div class="rvt-flex rvt-items-center rvt-p-all-xl rvt-border-all rvt-border-radius rvt-shadow-subtle">
<!-- Image -->
<img class="rvt-m-right-xl rvt-border-radius-circle" src="https://rivet.iu.edu/img/placeholder/avatar-1.jpg" alt="">
<!-- Content -->
<div class="rvt-prose">
<h2>Norval Ashton</h2>
<p>Norval Ashton is a writer and researcher from Bloomington, Indiana. They have won many awards.</p>
<a>test@iu.edu</a>
</div>
</div>
Add .rvt-border-radius-circle to photo

Tutorial complete #

Congratulations—you have just created a component using Rivet utilities! 🎉

You can paste your component markup into any Rivet page to use it.

Some things to try next: