Elements
(Static)
This is a library of saved rows, sections, and modules that can be easily deployed throughout the site. In many cases, you can use CSS classes like .bg-dark, .larger, or .invert to quickly modify the appearance of many of these sections. To learn more about available classes, visit your Style Guide.
Looking for content feeds and dynamic post grids?
Visit your dynamic elements library.
⚡️ Quick Tip
How to use classes in the page builder
All page builder elements, from rows, to columns, to modules, allow you to assign custom CSS classes to manipulate their appearance in a predefined way. We have indicated when this is the case with any of the elements below.
To assign a class to an element:
- Open the Row, Column, or Module settings.
- Click the "Advanced" tab.
- Scroll to the bottom.
- Enter your desired class in the "Classes" field. (To add multiple classes, separate them with a space.)
- Hit "Save"
Bonus: You can add the class invert to any element to create inverted text (like this!)
Basics
Static - Single Column - Left
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at, sollicitudin varius eros. Curabitur ornare mollis nunc, in eleifend nulla pharetra at.
Static - Single Column - Centered
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel metus tellus. Nulla facilisi. Fusce sapien lacus, efficitur scelerisque quam at, sollicitudin varius eros. Curabitur ornare mollis nunc, in eleifend nulla pharetra at.
Static - Heading/Content
Tip: This type of element can be useful when creating a portal page (a top level page that links out to a bunch of subpages).
Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet consectetur adipiscing elit, purus hendrerit aliquam massa cursus nam eget nisi, dapibus lobortis turpis hac sollicitudin aliquet. Scelerisque facilisis eros id accumsan molestie ornare nostra eu, morbi odio sed ultrices tincidunt imperdiet eget, placerat fringilla vitae pretium phasellus praesent at. Leo egestas potenti enim luctus cum id, mauris cras cubilia ligula platea. Non parturient conubia nisi quam congue duis.
Static - Section Title
Lorem Ipsum Dolor Sit
Dark Section - Graphic Left Bottom
Lorem Ipsum Dolor Sit
Dark Section - Graphic Right Bottom
Lorem Ipsum Dolor Sit
Grids
Static - Grid - Cards with Icons
Tip: You can disable the card effect by adding the class .unset to the column. You can also disable the automatic image margins by applying .unset.
Static - Grid - Cards with Icons - Inverted
Tip: You can disable the card effect by adding the class .unset to the column. You can also disable the automatic image margins by applying .unset.
Static - Grid - Cards with Photos
Tip: You can disable the card effect by adding the class .unset to the column. You can also disable the automatic image margins by applying .unset.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Static - Grid - Cards with Photos - Inverted
Tip: You can disable the card effect by adding the class .unset to the column. You can also disable the automatic image margins by applying .unset.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Static - Grid - Horizontal Cards with Photos
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Static - Grid - Horizontal Cards with Photos - Inverted
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet.
Rivers
Static - Contained Rivers
Contained Rivers restrict their contents to the width of the website's main content container. You can change the responsive stacking order by opening the column settings, going to the Advanced tab, and selecting the Stacking Order dropdown.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies integer dis proin, blandit dictum vehicula quisque sollicitudin aliquam pulvinar et hendrerit.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies integer dis proin, blandit dictum vehicula quisque sollicitudin aliquam pulvinar et hendrerit.
Static - Contained Rivers - Inverted
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies integer dis proin, blandit dictum vehicula quisque sollicitudin aliquam pulvinar et hendrerit.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies integer dis proin, blandit dictum vehicula quisque sollicitudin aliquam pulvinar et hendrerit.
Static - Contained River with List
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies integer dis proin, blandit dictum vehicula quisque sollicitudin aliquam pulvinar et hendrerit.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies integer dis proin, blandit dictum vehicula quisque sollicitudin aliquam pulvinar et hendrerit.
Static - Contained River with List - Invert
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies integer dis proin, blandit dictum vehicula quisque sollicitudin aliquam pulvinar et hendrerit.
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet consectetur adipiscing elit ultricies integer dis proin, blandit dictum vehicula quisque sollicitudin aliquam pulvinar et hendrerit.
Static - Big Featured
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.
Static - List of Links
Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet consectetur adipiscing, elit sagittis mauris suscipit enim facilisis eros.
Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet consectetur adipiscing, elit sagittis mauris suscipit enim facilisis eros.
Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet consectetur adipiscing, elit sagittis mauris suscipit enim facilisis eros.
Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet consectetur adipiscing, elit sagittis mauris suscipit enim facilisis eros.
Static - List of Webinars
Navigating a Scientific Career in the National Labs
Speaker:
Dr. Rama Vasudevan, Oak Ridge National Laboratory
Hosted by: ACerS President’s Council of Student Advisors
Free to ACerS Members
Navigating a Scientific Career in the National Labs
Speaker:
Dr. Rama Vasudevan, Oak Ridge National Laboratory
Hosted by: ACerS President’s Council of Student Advisors
Free to ACerS Members
Navigating a Scientific Career in the National Labs
Speaker:
Dr. Rama Vasudevan, Oak Ridge National Laboratory
Hosted by: ACerS President’s Council of Student Advisors
Free to ACerS Members
Modules
Module - Accordion
Module - Testimonials
Module - CTA Inline
Lorem Ipsum Dolor Sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus verenatis, lectus magna urna.
Module - CTA Stacked
Lorem Ipsum Dolor Sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus verenatis, lectus magna urna.
Shortcodes
Shortcode - Gravity Form
Shortcode - Ninja Table
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
|---|---|---|---|---|
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |