...
Review our code snippet library and documentation to select a snippet or code reference you would like to use.
Snippets are organized by components and include a preview and an HTML tab.
When you identify a code snippet you’d like to use, click on the HTML tab.
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.
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!”
In Cascade CMS, click on the source code icon where you would like to include the snippet.
Using CTRL+V to past your code snippet into the source code window (or right-click and select Paste.)
Click Ok.
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.
...
| Expand | ||
|---|---|---|
| ||
NMSU templates include a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. You can assign
How to add more space between elements
Examples of using padding and margin classesHTML CODE: 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  HTML CODE: On Screen: In the preview below, the link element includes a larger margin to the left. The  In the WYSIWYG Editor Note the presentation in the WYSIWYG editor for both examples does not include styling presented on screen.  |
| Expand | ||
|---|---|---|
| ||
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  Need a set of equal width and height cards that aren’t attached to one another? You can use card decks. 
How to make a row of cards an equal height using CSS classesTo apply the appropriate CSS class for a row of cards that are equal height, you must first wrap your cards in a
 How to add a row of cards with equal height using our documentation
|
| Expand | ||
|---|---|---|
| ||
It is used to size the element. By using sizing utility, you can easily Sizing utility classes create an easy way to make an element as wide or as tall (relative to its parent) |
How do I make a card height equal in a row?
class = h-100
...
| title | How to add more space or padding between elements. |
|---|
Add note on spacings : https://themetest-d.nmsu.edu/brand-rollout-documentation-demo/Brand2022_documentation/spacings.html
Include common presentation of visual elements in Kb?
. The Bootstrap 4 theme includes support for 25%, 50%, 75%, and 100% by default. You can also use utilities to set the width and height relative to the viewport. How to size an HTML element using CSS classesTo apply the appropriate CSS class for a row of cards that are equal height, you must first wrap your cards in a Width Utilities Note the CSS classes used for each of the the grey boxes depicted above:  Height Utilities Note the CSS classes used for each of the the purple boxes depicted above: 
|