MarketingLayout

MarketingLayout is the arrangement a marketing page is built in: the navigation at the top, a main region holding the sections, and the footer at the bottom. It paints the page background and takes the height of the window; it states no width and no rhythm of its own, because those belong to the Section, Container and Grid inside it.

Which sections exist, in what order and whether they appear at all stays the page's decision, because they are children. What the shell guarantees is the structure around them: the landmarks, the skip link past the navigation, and one background behind the whole page.

Usage

import { CTA, Footer, Hero, MarketingLayout, Navbar } from "@asheeui/web";

<MarketingLayout
  navigation={<Navbar brand="Ashee" links={links} />}
  footer={<Footer brand="Ashee" groups={groups} copyright="Ashee Softworks" />}
>
  <Hero
    title="A complete UI system"
    primaryAction={{ label: "Start free", href: "/signup" }}
  />
  <CTA
    title="Start building"
    primaryAction={{ label: "Read the docs", href: "/docs" }}
  />
</MarketingLayout>;

Two slots and a list of sections. The bands are not props: Hero, FeatureGrid, CTA and any other section are children, in the order the page reads them, and each one states its own alignment, background and spacing.

The navigation and footer slots

navigation and footer are slots, not components. There are no Navbar or Footer props here, no links, no brand, no groups, and nothing to look for: the shell places the node you give it above and below the main region and paints nothing behind it. That is what lets a page run its own header without giving up the composition.

The landmark comes from the element you pass. The framework's Navbar renders a header, the banner landmark at the top of a page, and Footer renders a footer, which is contentinfo. Plain <header> and <footer> elements behave the same, and a div gives the page neither, so the slot is also where that decision is made.

The background it paints

background is the one thing the composition paints behind the sections: default is the theme background, for a page whose bands carry their own surfaces, and muted is a recessed ground, for a page built out of cards that need to sit on something.

It is a background, not a band. A Section inside the page still paints its own background, so a muted page and a tinted band can sit together without the composition knowing anything about either.

Props

Three options are registered by the component, so each resolves from the instance, then from components.marketinglayout, then from the registration: skipLink true, skipLinkLabel Skip to content and background default. The two slots, children, as and mainId are instance-only; mainId defaults to main-content and exists so that a page holding more than one composition can name each main region separately.

Accessibility

• The sections are a main landmark with the identifier in mainId and tabIndex={-1}, which is what makes the skip link land in the content rather than beside it.
• The skip link is rendered as the first focusable element and is visually hidden until it is focused, so a pointer reader never sees it and a keyboard reader reaches it with the first Tab. skipLink={false} removes it, and the navigation becomes the first thing reached.
• The composition renders no header or footer landmark itself: both come from the slots, so Navbar and Footer are what make the page a banner and a contentinfo.
• It renders no heading either. Each section supplies its own, so the page's outline is the sections' outline, keep a single <h1> among them.

The spacing and the widths the sections use are the Layout and spacing vocabulary; which shell a product should start from is the argument in Page compositions.

Native

@asheeui/native ships the same contract as the platform's screen arrangement: the composition is a scrolling region that fills the screen it is given, the regions keep their order, mainId becomes the identifier the platform's own reader can be pointed at, and the skip link renders nothing, because a platform screen has no focus order to skip through. See React Native.

Related