Portal blocks reference
Atender’s layout builder ships 17 blocks. You drop them onto the homepage, category page, or article page canvas, configure the settings, and they render on the public help center. This is the catalogue.
Every block has shared settings: a heading, an optional description, an optional background or hero image, and a visibility toggle. The block-specific settings are listed below.
Search blocks
Hero search
A large search bar with a headline and optional subheadline above it. Usually the first block on the homepage.
Settings: heading, subheadline, background image or color, search placeholder text.
When to use: the standard help-center landing experience. Customers expect a big search bar at the top.
Compact search
A smaller search bar that fits inside a denser layout. Useful when the page already has a navigation strip and a hero would be redundant.
Settings: placeholder text, alignment (left, center, right).
When to use: if the homepage has a strong heading already, or for the article page header.
Quick links
A horizontal row of preset links with icons. Customers click straight through to the article or external URL you’ve pinned.
Settings: list of links (icon, label, target URL or article slug). Up to 8 links render cleanly.
When to use: to feature the 4–6 articles or external resources customers ask about most. “Track an order”, “Update payment”, “Contact support”.
Listing blocks
Category grid
A grid of categories — typically 2-4 columns, depending on layout. Each tile shows the category name, icon, description, and article count.
Settings: column count, whether to show description, whether to show article count, sort order.
When to use: the canonical homepage block. Customers scan categories visually and click into the one that matches their problem.
Category list
A vertical list version of Category Grid. Less visual, more scannable.
Settings: show/hide description, show/hide article count, sort order.
When to use: for low-density layouts where visual tiles would feel ostentatious. Doc-style help centers.
Recent articles
The most recently published articles, capped at a limit. Updates automatically as you ship.
Settings: limit (typically 5 or 10), show/hide summary, show/hide reading time.
When to use: to signal that the help center is actively maintained. Customers notice this — recent dates build trust.
Featured article
A single article rendered as a hero card with title, summary, and a “Read more” CTA.
Settings: article picker (which article to feature), background image, CTA label.
When to use: to surface a specific article — a launch announcement, the most-requested how-to, a flagship guide.
Section blocks
Section grid
A grid that renders the articles inside one of your sections. Each tile is a clickable article.
Settings: section picker, column count, limit (defaults to the section’s own limit).
When to use: to feature a curated topic on the homepage. “Most popular”, “For developers”, “Returns and refunds”.
Section list
A vertical list version of Section Grid.
Settings: section picker, show/hide article summaries, limit.
When to use: in dense layouts where a grid would dominate the page.
Section bar
A horizontal bar of sections — each section gets a tab-like entry, and clicking it loads that section’s articles inline.
Settings: list of sections to include, default open section, layout style.
When to use: to let customers switch between curated topics without leaving the page.
Role blocks
Role grid
A grid of browsing roles — each tile takes the customer to a role-filtered view. “I’m a developer”, “I’m an end user”.
Settings: roles to include, tile style, description per role.
When to use: when your help center serves multiple audiences with very different needs. Multi-product or multi-audience SaaS help centers.
Role bar
A horizontal bar version of Role Grid.
Settings: roles to include, default selected role.
When to use: when role-filtering is a primary navigation, not a secondary one.
Communication blocks
Announcement
A horizontal banner with text, optional CTA, and a dismiss button.
Settings: heading, body, CTA label, CTA target, color (info, warning, error, success), dismissible toggle.
When to use: outage notices, scheduled maintenance, launch announcements, “we’re hiring” pulses. Take it down when it’s no longer true.
Contact CTA
A block that nudges customers to chat, email, or open a ticket if they didn’t find an answer.
Settings: heading, body, CTA buttons (chat, email, phone, web form), enabled channels.
When to use: at the bottom of the homepage, the bottom of category pages, and the bottom of every article. The most-used block by volume.
System status
Live status of your services, pulled from your Atender Status page if you’ve configured one.
Settings: which services to show, compact vs. full layout.
When to use: if you have a public Status page, embedding it on the help center reduces “is everything down?” tickets.
Layout blocks
Spacer
Vertical empty space. Invisible but useful for tuning the rhythm of the page.
Settings: height (small, medium, large).
When to use: between dense blocks that would otherwise feel cramped.
Video embed
An embedded YouTube or Vimeo video.
Settings: video URL, heading, description, autoplay toggle (off by default).
When to use: for product demo or onboarding videos. Don’t autoplay — customers hate it.
Notes
- Blocks have visibility toggles. You can keep a block configured but invisible — useful for staging an Announcement before a launch.
- The What’s-new block isn’t shipped yet. It’s referenced internally but waiting on a real data source.
- Block ordering is drag-and-drop. Blocks can also be reordered via keyboard with the arrow keys when focused.