Shell — Brand Mark

Anatomy

Logo, wordmark and optional tagline shared by app_header and the sidebar. Visual identity comes from the nine brand tokens; content and destinations stay in props. An empty wordmark emits nothing.

maud_ui::blocks::shell::brand_mark

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`wordmark`	`String`	`""`	Plain text identity. Empty identity emits nothing.
`href`	`Option<String>`	`None`	Optional destination for the wordmark; the tagline remains outside the link.
`logo`	`Option<Markup>`	`None`	Full-color image or custom logo. None uses the brand's CSS logo mask.
`tagline`	`Option<Markup>`	`None`	Optional caller-owned tagline slot.

Examples

light · fictional example

Garden House

Independent hospitality

Northline

Business banking

Commonwell

Care for your community

Switch the whole interface and export your brand from the theme customiser.

Try the three brands

dark · fictional example

Garden House

Independent hospitality

Northline

Business banking

Commonwell

Care for your community

Switch the whole interface and export your brand from the theme customiser.

Try the three brands

Usage and composition

Import and example

use maud::html;
use maud_ui::blocks::shell::brand_mark::{self, Props};
brand_mark::render(Props {
    wordmark: "Northline".into(), href: Some("/accounts".into()),
    tagline: Some(html! { "Business banking" }),
    ..Default::default()
});

Helpers and composition

preset("lodge" | "bank" | "clinic") -> Option<Props> supplies fictional example identities. Pair it with a matching data-brand wrapper for a showcase preset. Pass typed props through app_header::Props::brand_mark or sidebar::Props::brand_mark; they override the legacy raw brand slot when supplied.

Brand tokens: --mui-brand-accent, --mui-brand-accent-ink, --mui-brand-font-heading, --mui-brand-font-body, --mui-brand-radius, --mui-brand-density, --mui-brand-logo-mask, --mui-brand-logo-size, --mui-brand-logo-radius. The theme customiser exports exactly these names as brand.css. Load it after the library CSS.

App header, sidebar, page header.

Accessibility

The wordmark names the identity; the logo is decorative. Optional tagline markup stays outside the wordmark link. In the desktop icon rail the text and its link are hidden together; they return in the phone drawer. Supply fonts with local fallbacks, and verify contrast for custom accent/ink values in both themes.

← Back to Blocks