Page Comparison

NMSU templates include a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. You can assign margin or padding values to an HTML element using shorthand CSS classes.

How to add more space between elements

1. Click on the source code icon from the WYSIWYG editor.

2. Locate the HTML element you’d like to add to or edit.

3. Using the notation guide, add the appropriate notation in the CSS class. For example in the code class="mt-4" you are adding a margin of 1.4rem to the top of the element.

4. Click ok.

Examples of using padding and margin classes

HTML CODE: <h3 class="mt-4 bold">Heading 3</h3>

On Screen: In the preview below, the Heading 3 text includes a larger margin at the top to add more space between the paragraphs. The <h3> element includes two classes. One class controls the margin and the other add the bold text style.

HTML CODE: <a class="ml-4 btn btn-outline-primary" href="#">Outline Button</a>

On Screen: In the preview below, the link element includes a larger margin to the left. The <a> element includes three classes. One class controls the margin and the other two add control the button styles.

In the WYSIWYG Editor

Note the presentation in the WYSIWYG editor for both examples does not include styling presented on screen.

Cards provide a flexible and extensible content container with multiple variants and options. However you may find that the height of the columns are dictated by the amount of content you have placed in side inside of them. When you have cards that should appear side by side, you'll often want them to be of equal height (matching the height of the tallest).

There is a solution that helps to keep columns size the same, no matter how much content may be placed inside.

You can use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

Image Added

Need a set of equal width and height cards that aren’t attached to one another? You can use card decks.

Image Added

CSS classes for cards with equal height

To apply the appropriate CSS class for a row of cards that are equal height, you must first wrap your cards in a <div> element.

• For card groups, you must add the .card-group class.

• For card decks, you must add the .card-deck class.

Image Added

How to add a row of cards with equal height using our documentation

1. Review our card documentation and select the code reference you would like to use.

2. When you identify a code snippet you’d like to use, click on the HTML tab.

3. The code view will load and include all of the relevant HTML and CSS classes included for you. In the top, right hand side of the tab view click copy.

4. This will copy the entire code snippet to your computer clipboard. You can confirm that the code snippet was copied when the copy button transformed to “copied!”

   Image Added

5. In Cascade CMS, click on the source code icon where you would like to include the snippet.

6. Using CTRL+V to past your code snippet into the source code window (or right-click and select Paste.)

7. Click Ok.

8. Update the content as necessary. Double-click on the element you wish to change and make edits to it using Cascade’s link tools, image placement tools, or text editor.

It is used to size the element. By using sizing utility, you can easily make an element as wide or as tall (relative to its parent)