Elements

(Dynamic)


Dynamic elements automatically pull content in from other places (like a feed of blog posts).

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 more elements?
Visit your static 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.

Featured

Dynamic - Featured Event

Tip: Use this as a base for creating your own feed item layouts. This one is useful for meta-heavy results.

Please try a different search.

Feed

Dynamic - Feed - News

Tip: Use this as a base for creating your own feed item layouts. This one is useful for meta-heavy results.

Dynamic - Feed - Awards

Tip: Use this as a base for creating your own feed item layouts. This one is useful for meta-heavy results.

Example Award Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut…

Example Award Two

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Example Award One

Sunt in culpa qui officia deserunt mollit anim id est laborum.

Grids

Dynamic - Grid - Featured Events

Tip: Use this as a base for creating your own grid layouts. The partial is already prepped.

Please try a different search.

Dynamic - Grid - Events Grid

Tip: Use this as a base for creating your own grid layouts. The partial is already prepped.

Please try a different search.

Dynamic - Grid - Resources

Tip: Use this as a base for creating your own grid layouts. The partial is already prepped.

Example Resource Five

Dolor sit amet consectetur adipiscing.

Example Resource Six

Dolor sit amet consectetur adipiscing.

Example Resource Seven

Dolor sit amet consectetur adipiscing.

Dynamic - Grid - People

Tip: Use this as a base for creating your own grid layouts. The partial is already prepped.

Brad Henry
Brad Henry
Columbia, Tenn.
Haley Norman
Haley Norman
Ex-Officio
Muskogee, Ok.
Jeff Johnson
Jeff Johnson
Ex-officio
Phoenix, Ariz.

Filters

Dynamic - Grid with Filters - Posts

Tip: Use this as a base for creating your own grid layouts. The partial is already prepped.

May 29, 2024
Changes in store for ATSSA’s 2025 Convention & Traffic Expo

Changes in store for ATSSA’s 2025 Convention & Traffic Expo Check out innovative plans for ATSSA’s event in Orlando, Fla….

May 15, 2024
Relive ATSSA’s 2024 Convention through Convention Extra

Relive ATSSA’s 2024 Convention through Convention Extra Special Section features awards, events and tips from history maker Carey Lohrenz ATSSA’s…

April 8, 2024
Host the National Work Zone Memorial to honor roadway workers

Host the National Work Zone Memorial to honor roadway workers Recent worker deaths demonstrate risks of roadway work The recent…

March 20, 2024
Horizon Signal auction raises $38k for the ATSS Foundation

Horizon Signal of Reading, Pa., raised $38,000 for the ATSS Foundation through an online auction during the month of February….

January 9, 2024
ATSSA reveals redesigned website

ATSSA kicks off 2024 with a new website featuring a modern look with intuitive, user-friendly navigation. “The purpose of the…

January 8, 2024
Roadway Worker Memorial Scholarships can help fuel dreams

Students urged to apply by Feb. 15 for up to $11,000 in aid for education When a roadway worker is…

November 29, 2023
Giving Tuesday breaks record for Foundation support

In a year in which households across the nation are struggling due to the rising costs of necessities, ATSS Foundation…

April 4, 2023
3M pledge wall raises more than $14K for ATSS Foundation

This year’s 3M pledge wall raised $14,820 for The ATSS Foundation. This was the seventh year 3M has operated the virtual wall fundraiser, which ran from the start of the year through the end of ATSSA’s Convention & Traffic Expo. 3M launched the event with an offer to match up to $5,000 in donations. When the tally fell just short of that figure—at $4,820—the company elected to provide the full match. Those funds plus 3M’s $5,000 sponsorship provided The Foundation with a total of $14,820. ATSS Foundation Vice Chair Peter Johnston stands in front of the 3M Pledge Wall on the Traffic Expo floor during ATSSA's 2023 Convention & Traffic Expo in Phoenix in February. This year’s 3M pledge wall raised $14,820 for The ATSS Foundation. This was the seventh year 3M has operated the virtual wall fundraiser, which ran from the start of the year through the end of ATSSA’s Convention & Traffic Expo. 3M launched the event with an offer to match up to $5,000 in donations. When the tally fell just short of that figure—at $4,820—the company elected to provide the full match. Those funds plus 3M’s $5,000 sponsorship provided The Foundation with a total of $14,820. “We are grateful for 3M’s support of The Foundation through this fundraiser for seven years running,” said Foundation Director Lori Diaz. “We appreciate the company’s commitment and its generosity in donating the full match amount.  Our generous donors make a difference in educating people about roadway safety and in the lives of people affected by roadway tragedies.” The ATSS Foundation is the charitable arm of ATSSA and exists to promote roadway safety through charitable giving and public awareness programs.

Dynamic - Grid with Filters - Resources

Tip: This row has the class .open-grid-filters-content that allows the content to have a different 'open' layout. This class only works with the configuration this whole row/content has. Please don't add this class to any other row.

Example Resource Five

Dolor sit amet consectetur adipiscing.

Example Resource Six

Dolor sit amet consectetur adipiscing.

Example Resource Seven

Dolor sit amet consectetur adipiscing.

Dynamic - Feed - Grid with Filters - Groups

Tip: This row has the class .open-grid-filters-content that allows the content to have a different 'open' layout. This class only works with the configuration this whole row/content has. Please don't add this class to any other row.

Example Group Five

Hac habitasse platea dictumst quisque sagittis. Lacus viverra vitae congue eu. Et pharetra pharetra massa massa ultricies. Eleifend mi in…

Example Group Six

Hac habitasse platea dictumst quisque sagittis. Lacus viverra vitae congue eu. Et pharetra pharetra massa massa ultricies. Eleifend mi in…

Example Group Seven

Hac habitasse platea dictumst quisque sagittis. Lacus viverra vitae congue eu. Et pharetra pharetra massa massa ultricies. Eleifend mi in…

EXTRAS

Dynamic - Related Content - Posts

Related News

May 29, 2024
Changes in store for ATSSA’s 2025 Convention & Traffic Expo

Changes in store for ATSSA’s 2025 Convention & Traffic Expo Check out innovative plans for ATSSA’s event in Orlando, Fla….

May 15, 2024
Relive ATSSA’s 2024 Convention through Convention Extra

Relive ATSSA’s 2024 Convention through Convention Extra Special Section features awards, events and tips from history maker Carey Lohrenz ATSSA’s…

April 8, 2024
Host the National Work Zone Memorial to honor roadway workers

Host the National Work Zone Memorial to honor roadway workers Recent worker deaths demonstrate risks of roadway work The recent…

Dynamic - Related Content - Events

Related Events

Please try a different search.

Dynamic - Related Content - Resources

Related Resources

Example Resource Five

Dolor sit amet consectetur adipiscing.

Example Resource Six

Dolor sit amet consectetur adipiscing.

Example Resource Seven

Dolor sit amet consectetur adipiscing.