Template:UI/hero

Renders a full-width hero banner at the top of a page (typically the Main Page). Two layout variants share one set of markup and CSS so the template works across miniscope.org, the Aharoni Lab wiki, and any future Labki-based site.

Variants:

background (default) — a full-width image with a dark

 overlay and centered text. Lab-wiki style. Defaults to
 theme=dark, align=center.

product — a light gradient with the image positioned on

 the right and text on the left. Miniscope.org style. Defaults to
 theme=light, align=left.

Styling lives in Template:UI/hero/styles.css (TemplateStyles), so the CSS travels with the template. Per-wiki theming flows through the --labki-* tokens that labki-tweeki.css exposes — the hero binds to --labki-primary for the fallback gradient.

Wiki-side prerequisites

The hero relies on three things that cannot live in TemplateStyles, because the CSS sanitizer rejects body- and html-scoped selectors and TemplateStyles auto-scopes everything under .mw-parser-output. These must be present in the wiki's MediaWiki:Common.css:

Main-page padding neutralizers. The hero's negative

 horizontal margins (-32px -40px) need .mw-body
 and .mw-parser-output to have zero top padding on the
 main page so the banner reaches the content card's rounded corners:

body.page-Main_Page .mw-body,
body.mainpage .mw-body { padding-top: 0 !important; }
body.page-Main_Page .mw-parser-output,
body.mainpage .mw-parser-output { padding-top: 0 !important; margin-top: 0 !important; }
body.page-Main_Page .mw-parser-output > p:first-child,
body.mainpage .mw-parser-output > p:first-child { display: none; }

Login-state visibility for the anon/user-conditional

 primary buttons (driven by Tweeki's server-side
 tweeki-user-anon body class — no JS, no FOUC):

.hero-btn-anon, .hero-btn-user { display: none; }
body.tweeki-user-anon .hero-btn-anon,
body:not(.tweeki-user-anon) .hero-btn-user { display: contents; }

Hero image readable by anons. The image is fetched

 via File:..., which on a permission-restricted wiki
 goes through img_auth.php; the file must be in
 $wgWhitelistRead if the main page is anon-visible.

Image

Pass image as a bare file name (no File: prefix), e.g. Hero-banner.jpg. The image is rendered with link= empty so the browser sees a plain <img> with no anchor wrapper, and CSS covers the hero box with object-fit: cover. Pass image-alt for accessible alt text; leave blank to mark it decorative (alt=""), which is correct when the title/tagline carry all the meaning.

Buttons

Two patterns for the primary CTA:

Plain primary: set primary-label +

 primary-link. One button, visible to everyone.

Login-state-conditional primary: set

 primary-anon-label/primary-anon-link AND
 primary-user-label/primary-user-link. The
 anon button shows for logged-out viewers, the user button for
 logged-in viewers. Don't mix the plain and conditional patterns —
 if all three are set you'll render two primaries.

The secondary CTA is always plain: secondary-label + secondary-link. Buttons are delegated to Template:UI/button, which handles the styling and internal-vs-external link selection.

Parameters

variant — background (default) or

 product

theme — dark (default) or light
align — center (default), left,

 or right

image — file name, no File: prefix
image-alt — alt text for the hero image (blank ⇒ decorative)
eyebrow — small uppercased text above the title
title — the big heading (rendered as a styled

 <div>, not <h1>,
 to avoid MediaWiki's auto-section behavior)

tagline — supporting paragraph below the title
primary-label / primary-link — plain primary CTA
primary-anon-label / primary-anon-link —

 anon-only primary (wraps in .hero-btn-anon)

primary-user-label / primary-user-link —

 user-only primary (wraps in .hero-btn-user)

secondary-label / secondary-link — supporting CTA

Examples

Lab wiki main page (background variant, login-state primaries):

{{UI/hero
| variant            = background
| theme              = dark
| image              = Hero-banner.jpg
| eyebrow            = Welcome to
| title              = {{SITENAME}}
| tagline            = Open-source neuroscience tools and lab resources from the UCLA Aharoni Lab.
| primary-anon-label = Request access
| primary-anon-link  = Special:RequestAccount
| primary-user-label = Getting started
| primary-user-link  = Onboarding
| secondary-label    = Explore the lab
| secondary-link     = Lab overview
}}

Miniscope.org product hero:

{{UI/hero
| variant         = product
| theme           = light
| align           = left
| image           = Hero-miniscope-product.webp
| image-alt       =
| eyebrow         = Open-source neuroscience tools
| title           = Open-source tools for neural imaging
| tagline         = Miniscopes and accessories for in vivo imaging in freely behaving animals.
| primary-label   = Explore hardware
| primary-link    = Hardware
| secondary-label = Learn & build
| secondary-link  = Documentation
}}