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:

  1. Open the Row, Column, or Module settings.
  2. Click the "Advanced" tab.
  3. Scroll to the bottom.
  4. Enter your desired class in the "Classes" field. (To add multiple classes, separate them with a space.)
  5. Hit "Save"

Bonus: You can add the class invert to any element to create inverted text (like this!)

Click to open larger.

Basics

Static - Single Column

Tip: You can can adjust the width of the column by updating the CSS class to use a different max-### number.

Example Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id sodales ultricies amet, ornare consequat, facilisi enim aliquam ut. Consectetur ultricies lorem eros lorem nibh euismod. Vel sed a, sed arcu.

Ridiculus velit purus in quam mi facilisis erat fames. Tellus tortor, orci viverra donec sed amet tortor habitasse dui.

Example Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Id sodales ultricies amet, ornare consequat, facilisi enim aliquam ut. Consectetur ultricies lorem eros lorem nibh euismod. Vel sed a, sed arcu.

Ridiculus velit purus in quam mi facilisis erat fames. Tellus tortor, orci viverra donec sed amet tortor habitasse dui.

Static - Section Header With Button

Lorem ipsum

Lorem ipsum dolar sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna.

Lorem ipsum

Lorem ipsum dolar sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna.

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).

Example
Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae a adipiscing mauris mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna quis aliquam diam pretium varius non platea ornare. Venenatis, sed nibh sit aliquam. Aliquet orci mi ut diam. Eget ullamcorper in turpis donec vulputate dolor libero. Enim quam sed in volutpat. Consequat maecenas volutpat in euismod interdum. Leo, dui sit ac ante diam.

Mollis commodo sapien ullamcorper enim sollicitudin pharetra ut. Auctor mi eu, convallis leo lectus quis aliquam. Tortor duis pellentesque nibh ut scelerisque aliquet senectus aliquam. Id hendrerit quis id morbi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna quis aliquam diam pretium varius non platea ornare. Venenatis, sed nibh sit aliquam. Aliquet orci mi ut diam. Eget ullamcorper in turpis donec vulputate dolor libero. Enim quam sed in volutpat. Consequat maecenas volutpat in euismod interdum. Leo, dui sit ac ante diam.

Example
Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae a adipiscing mauris mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna quis aliquam diam pretium varius non platea ornare. Venenatis, sed nibh sit aliquam. Aliquet orci mi ut diam. Eget ullamcorper in turpis donec vulputate dolor libero. Enim quam sed in volutpat. Consequat maecenas volutpat in euismod interdum. Leo, dui sit ac ante diam.

Mollis commodo sapien ullamcorper enim sollicitudin pharetra ut. Auctor mi eu, convallis leo lectus quis aliquam. Tortor duis pellentesque nibh ut scelerisque aliquet senectus aliquam. Id hendrerit quis id morbi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna quis aliquam diam pretium varius non platea ornare. Venenatis, sed nibh sit aliquam. Aliquet orci mi ut diam. Eget ullamcorper in turpis donec vulputate dolor libero. Enim quam sed in volutpat. Consequat maecenas volutpat in euismod interdum. Leo, dui sit ac ante diam.

Grids

Static - Grid - Inline 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.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

.unset

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

.unset

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Events Calendar

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Static - Grid - Inline Cards with Logos

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.

Savings4Members logo

Savings4Members

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Beeline logo

Savings4Members

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Savings4Members logo

Savings4Members

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

.unset

Savings4Members logo

Savings4Members

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Beeline logo

Savings4Members

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Savings4Members logo

Savings4Members

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

.unset

Static - Grid - Image Cards

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.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

.unset

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

.unset

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Static - Grid - Image Cards - With Leadin

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.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

.unset

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

.unset

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Grid image placeholder
Lorem ipsum

Lorem Ipsum

Facilisi vitae nulla com modo posuere tortor nibh molest. Lorem ipsum dolor sit amet.

Static - Grid - Product Cards

STI Technologies

Vitae ultrices viverra emi auctor sit morv sit.

Steel Water Pipe

Vitae ultrices viverra emi auctor sit morv sit.

Field Erected Tanks

Vitae ultrices viverra emi auctor sit morv sit.

Pressure Vessels

Vitae ultrices viverra emi auctor sit morv sit.

STI Technologies

Vitae ultrices viverra emi auctor sit morv sit.

Steel Water Pipe

Vitae ultrices viverra emi auctor sit morv sit.

Field Erected Tanks

Vitae ultrices viverra emi auctor sit morv sit.

Pressure Vessels

Vitae ultrices viverra emi auctor sit morv sit.

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.

EDUCATION

STI/SPFA Training and Certifications

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.

EDUCATION

STI/SPFA Training and Certifications

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.

EDUCATION

STI/SPFA Training and Certifications

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.

EDUCATION

STI/SPFA Training and Certifications

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna.

Static - Contained Rivers - With List

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.

EXPLORE

Resource Library

Research is at the heart of medical imaging informatics, and our organization is dedicated to providing the latest and most comprehensive research in the field.

Standards & Regulatory Resources

Safety Resources

Safety Resources

No Link

No Link

EXPLORE

Resource Library

Research is at the heart of medical imaging informatics, and our organization is dedicated to providing the latest and most comprehensive research in the field.

Standards & Regulatory Resources

Safety Resources

Safety Resources

No Link

No Link

EXPLORE

Resource Library

Research is at the heart of medical imaging informatics, and our organization is dedicated to providing the latest and most comprehensive research in the field.

Standards & Regulatory Resources

Safety Resources

Safety Resources

No Link

No Link

EXPLORE

Resource Library

Research is at the heart of medical imaging informatics, and our organization is dedicated to providing the latest and most comprehensive research in the field.

Standards & Regulatory Resources

Safety Resources

Safety Resources

No Link

No Link

CTAs
& Features

Static - Horizontal Card

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla

Lorem ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla

Static - Video

YouTube video

Static - Featured Card

Static - CTA

The following two elements are default Beaver Builder modules that have been styled.

Upcoming Professional Development Opportunities

View the Events calendar to register for in-person and virtual educational opportunities including:

Upcoming Professional Development Opportunities

View the Events calendar to register for in-person and virtual educational opportunities including:

Upcoming Professional Development Opportunities

View the Events calendar to register for in-person and virtual educational opportunities including:

Upcoming Professional Development Opportunities

View the Events calendar to register for in-person and virtual educational opportunities including: