Registration Wall CSS Styling Guide for Nordbayerischer Kurier

From Paywall to Personalised On‑boarding

The .registrationwall component combines a classic paywall with an interactive onboarding flow. By separating the .registrationwall__header, .registrationwall__content and .registrationwall__banner, publishers can guide readers through a clear two‑step process: first selecting interests, then accessing tailored articles.

Responsive breakpoints (@media screen and (max-width: 550px)) ensure the same experience works on desktop, tablet and mobile, a must‑have as more readers consume news on handheld devices.

Interactive Topic & Author Follow‑Ups

Buttons such as .bookmark-theme and .bookmark-author let users follow topics or authors with a single click. The CSS changes the button’s appearance from a neutral outline to a bold, filled style once data‑follow="true" is set, providing instant visual feedback.

These follow controls are grouped inside .registrationwall .configurationInfo, which dynamically shows the count of followed topics and authors using data‑follow‑count‑theme and data‑follow‑count‑author.

Drag‑and‑Drop Customisation

The .sortable_wrapper class turns the topic list into a sortable grid. Each .item displays a grab icon (url("/staticcontent/nordbayerischer_kurier/common/svg/grab-sort-icon.svg")) and can be reordered, letting readers curate their own news feed.

When an item is being dragged, the .sortable‑ghost and .sortable‑chosen styles keep the layout clean, preventing visual glitches.

Search, Autocomplete and Instant Results

The .registrationwall__search form includes a styled input field and SVG icons that appear only when the placeholder is visible. Autocomplete results are presented in a .item‑list with hover states ([aria‑selected="true"]) that highlight the current suggestion.

Using content: "Themen & Autoren suchen" as a pseudo‑element gives the search block a clear headline without extra markup.

Social Sharing Overlays and Snackbar Notifications

When readers click the share button, the .socialOverlayContainer slides into view, offering sharing options in a compact, fixed‑position panel. The overlay’s background (.socialOverlayBackground) dims the page, keeping focus on the sharing choices.

Feedback is delivered via the .hs‑snackbar, a fixed toast that appears at the bottom of the screen. Its animation keyframes (@-webkit-keyframes hsShowAnimation and hsHideAnimation) create a smooth entrance and exit.

Semantic Markup for Kickers and Headlines

While the CSS adds visual cues for kickers (pre‑headlines), proper HTML semantics are essential for accessibility. According to best‑practice guides, a kicker can be marked up with a <span> inside the headline or placed in a <header> element, ensuring screen readers interpret the hierarchy correctly.^[1]

The <article> element should wrap each news piece, providing a self‑contained composition that can be syndicated or indexed independently.^[2]

Frequently Asked Questions

What is a registration wall?

A UI component that combines a paywall with a personalized onboarding flow, letting users select topics before accessing content.

How does the follow button indicate its state?

When data‑follow="true" is applied, the button changes from an outline to a filled style and updates its label from “Thema folgen” to “Folge ich”.

Can users reorder their topics?

Yes. The .sortable_wrapper enables drag‑and‑drop reordering, with visual cues provided by the grab icon and background changes.

Is the search field accessible?

The search input uses clear placeholder text, focus styles, and ARIA attributes for selected items, supporting keyboard navigation.

What purpose does the snackbar serve?

It delivers brief, unobtrusive messages (e.g., “Topic saved”) and disappears automatically after a short animation.