How to Style Homepage Section Titles with CSS

Last updated: Sep 2, 2026

Every homepage section has an optional Section Title field in the Customizer. When filled in, Aurora renders it as a heading directly above that section’s posts, with a class you can target from CSS to change its look beyond what the Customizer exposes.

The Markup Aurora Outputs

Each section title renders as an h2 with two classes: a shared .section-title class present on every section title site-wide, and a second class unique to that section’s style (for example .bold, .mag, .overlay, or .card_grid). The markup looks like this:

<h2 class="mag section-title">Trending Topics</h2>

That combination is what makes two different kinds of overrides possible: one CSS rule that changes every section title on your homepage at once, and more targeted rules that change only one section style, such as Magazine or Bold, while leaving the rest alone.

If a section’s Section Title field is left empty, Aurora does not render the heading at all, so there is no empty h2 sitting in the markup to worry about hiding.

Styling Every Section Title at Once

Target .section-title directly in Appearance → Customize → Additional CSS or your child theme stylesheet. Rules here apply to every section title across every layout, on top of whatever the active homepage layout already sets.

Change the font size and weight

.section-title {
    font-size: 22px;
    font-weight: 700;
}

Remove the underline

.section-title {
    border-bottom: none;
    padding-bottom: 0;
}

Recolor the underline and text

.section-title {
    color: var(--link-color);
    border-bottom-color: var(--link-color);
}

Using Aurora’s CSS variables, like --link-color above, keeps the section titles in step if you change your color scheme later from the Customizer’s Colors panel. See How to Use Aurora’s CSS Variables to Override Site Content for the full list.

Styling One Section Style Only

To change a title in one section style without affecting the others, chain the section’s class onto .section-title. This is the same pattern Aurora’s own homepage layout stylesheets use internally, so it will not conflict with the layout’s built-in rules, it simply takes priority when it’s more specific or loaded after them.

Center the title in a Bold section

.bold.section-title {
    text-align: center;
}

Make a Magazine section title smaller

.mag.section-title {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

Hide the title in one section style only

.card_grid.section-title {
    display: none;
}

The section class matches the section style name used internally, which is not always identical to the label shown in the Customizer. Magazine uses .mag, and Card Grid uses .card_grid with an underscore. If a rule does not seem to apply, inspect the heading in your browser’s dev tools to confirm the exact class Aurora rendered.

Available Section Style Classes

Depending on which homepage layout you’re using, section titles can carry one of the following section-style classes: bold, overlay, mag, card_grid, embed, plain, genteel, news, detail, poster, compress, vanilla, and sweet. Not every homepage layout uses every section style. See How to Configure the Homepage Layout to check which sections your active layout includes.

Tips

Check your active layout before writing overrides. Each homepage layout ships with its own baseline styling for section titles, so a rule that looks right in one layout’s preview may need adjusting if you switch layouts later.
Use the general rule first. If you just want a consistent look across the whole homepage, a single .section-title rule is simpler to maintain than styling each section style individually.
Keep contrast in mind on Overlay and Poster sections. These section styles place the title over a background image. If you override the color, check it against a range of your own featured images before publishing.

Previous ← How to Translate Aurora into Your Language