Skip Navigation

Height Adjuster

Height Adjuster Component

When working within the Content Parsys all web components must first be placed inside of a Section Component

The height adjuster helps make card components the same length. Use this tool to keep your layout balanced when cards have different amounts of content.

Usage

  • Align card components so they appear uniform
  •  Prevent uneven card lengths from disrupting your design0
  •  Improve the visual consistency of your page

How to Add the Component

Click within a section component to insert new components.

  1. Click the + icon

  2. Choose Height Adjuster

Tip: Place the Height Adjuster component above or near the group of items you want to equalize.

arrow pointing to the + icon on the component menu and another arrow pointing to the Height Adjuster option on the insert new component menu

How to Configure the Component

  1. To start using the component, click anywhere on the component and a menu will appear.

  2. Click the wrench icon to enter configure mode.
An arrow pointing to the wrench icon on the configure toolbar.
  • CSS Class
    This is where you assign a unique name (or ID) to the height adjuster. You will later apply this same name to the components you want to align.

  • Minimum Height
    This sets the height (in pixels) that all selected components will match. Use a value based on the tallest item in your group.
Hight Adjuster configuration screen with CSS Class and Minimum Height fields.

Working within the Component

The Height Adjuster component works by setting the height of desired components to match the tallest one.

This helps your layout look clean and balanced, especially when placing multiple cards or sections side by side.

  1. Create a unique name for your height adjuster. Type it into the CSS class box.

  2. Enter the height in pixels in the Minimum Height box. 

  3. Click the check mark to save your changes and close the window. To cancel without saving, click the X.
Hight Adjuster configuration screen with "dog-height" for the CSS Class and Minimum Height as 400. The check mark is highlighted showing how to save settings.

Setting the ID on the Cards

After setting a CSS Class name and a Minimum Height in the Height Adjuster component, you’ll need to apply that same class name to each Card (or other component) you want to match.

Steps to apply the class to each component:

  1. Click anywhere on the component that needs its height adjusted (such as a Card).

  2. Click the wrench icon to open Configure mode.

  3. In the CSS Class field, enter the exact class name you used in the Height Adjuster.

  4. Click the check mark to save your changes. To cancel without saving, click the X.

  5. All components using that class name will be adjusted to match the height you set.

CMS screen showing two card components on a page. One is highlighted with a blue box, indicating that it has been chosen. The configure toolbar with a wrench icon appears above it.
Additional configuration options for the card component showing sample CSS class of "Dog-Height" and an arrow pointing to the check mark to save changes.

Example - Before Using the Height Adjuster

German Shepherd puppy lying in the grass.
Dog Breeds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue euismod nibh, eu bibendum eros. Pellentesque eu gravida risus. Sed vel tempor ipsum. Integer pellentesque dignissim ex ac gravida. 

More dog breeds

Dog Breeds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue euismod nibh, eu bibendum eros. Pellentesque eu gravida risus. Sed vel tempor ipsum. Integer pellentesque dignissim ex ac gravida.

Vivamus porta risus et dui tempus porttitor. Sed cursus porta tortor, ac semper ante ultrices quis. Ut lobortis lobortis commodo. Phasellus diam quam, posuere vitae maximus sed, tincidunt sit amet metus.

More dog breeds

Dog Breeds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue euismod nibh, eu bibendum eros. Pellentesque eu gravida risus. Sed vel tempor ipsum.


Example After Using the Height Adjuster

German Shepherd puppy lying in the grass.
Dog Breeds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue euismod nibh, eu bibendum eros. Pellentesque eu gravida risus. Sed vel tempor ipsum. Integer pellentesque dignissim ex ac gravida. 

More dog breeds

Dog Breeds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue euismod nibh, eu bibendum eros. Pellentesque eu gravida risus. Sed vel tempor ipsum. Integer pellentesque dignissim ex ac gravida.

Vivamus porta risus et dui tempus porttitor. Sed cursus porta tortor, ac semper ante ultrices quis. Ut lobortis lobortis commodo. Phasellus diam quam, posuere vitae maximus sed, tincidunt sit amet metus.

More dog breeds

Dog Breeds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue euismod nibh, eu bibendum eros. Pellentesque eu gravida risus. Sed vel tempor ipsum.