Heading - Blog Listing
A two-column heading with an H2 and a small message box.
View a live demo of this section here.
The following is a detailed listing of the styling edits made to the section, the modules used in the section, and field changes from the modules’ default state.
Section Styles
Alignment and spacing > Vertical alignment
Middle
Modules
Visible Elements
Heading
Visible Elements
Body Text
Text Size
Small
Styles > Module > Max Width
450
Styles > Module > Alignment
Desktop: Right
Mobile: Left
Styles > Module > Background
Color: #FFECE9
Styles > Module > Spacing > Desktop > Padding
Left: 20
Right: 20
Top: 13
Bottom: 13
Styles > Alignment > Desktop
Center
How to Use This Section
The Heading - Blog Listing section creates a professional two-column header layout that’s perfect for introducing your blog, news, or resource pages in the Rubric theme. This section combines a prominent H2 heading with a highlighted message box, giving you the flexibility to present both your main page title and supplementary information in a visually balanced design.
You can add this section to any page through HubSpot’s drag-and-drop page editor by selecting it from the Rubric theme’s pre-built sections library. The section works particularly well on blog listing pages, resource hubs, event directories, and academic program pages where you need to establish clear page hierarchy while providing additional context or calls-to-action.
When customizing this section, focus on keeping your heading concise and descriptive since it uses H2 formatting for strong SEO value. The message box on the right is ideal for brief announcements, navigation tips, or promotional content that supports your main heading. The coral background color (#FFECE9) draws attention without overwhelming the primary content.
This section’s responsive design automatically adjusts the message box alignment from right-aligned on desktop to left-aligned on mobile devices, ensuring optimal readability across all screen sizes. The middle vertical alignment keeps both elements visually centered, creating a clean, professional appearance that aligns with educational and institutional branding standards.
Consider using this section when you want to replace a simple page title with something more engaging and informative. It’s especially effective when placed at the top of pages before blog listings, course catalogs, or event schedules where visitors benefit from both clear navigation and supplementary guidance.