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:
- 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!)
Feeds
Feed - Big Image
Tip: You can also use these items as one-offs (displayed without a feed) to highlight just one piece of content.
Johnson & Johnson helps promote safe storage
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque…
Ensuring the Integrity of Global Supply Chain
From the beginning of COVID-19, CHPA and other members of the pharmaceutical supply chain have been concerned about the availability of critical medical supplies and ingredients.
Feed - Simple Feed with Image
Tip: Use this as a base for creating your own feed item layouts. This one is useful for meta-heavy results.
Johnson & Johnson helps promote safe storage
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque…
Ensuring the Integrity of Global Supply Chain
From the beginning of COVID-19, CHPA and other members of the pharmaceutical supply chain have been concerned about the availability of critical medical supplies and ingredients.
Feed - Complex Feed
Tip: Use this as a base for creating your own feed item layouts. This one is useful for meta-heavy results.
Feed - Complex Feed with Image
Tip: Use this as a base for creating your own feed item layouts. This one is useful for meta-heavy results.
Johnson & Johnson helps promote safe storage
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque…
Ensuring the Integrity of Global Supply Chain
From the beginning of COVID-19, CHPA and other members of the pharmaceutical supply chain have been concerned about the availability of critical medical supplies and ingredients.
Grids
Grid - Simple Grid
Tip: Use this as a base for creating your own grid layouts. The partial is already prepped.
2,000 people attended CHPA Virtual Events in 2020
Our members value a place to meet, learn, and network with others who do similar work. CHPA rose to the challenge with a 30% increase in participation.
- « Previous
- 1
- 2
Grid - Full Bleed Grid
Tip: You can manipulate the shape of these items by using the css classes .img-tall, .img-square, or .img-wide (there are examples of each of these below). This can be very useful when you want to break out a single post to use as a large, featured piece of content.
Grid - Big Featured Item
Tip: This item uses the same markup (and partial) as the full bleed grids above, so you can reshape it using the height CSS classes described above. It also uses the .larger class to make the title bigger.
