Approved composition patterns and the public routes each pattern covers.
5 Component References
Approved composition patterns and the public routes each pattern covers.
8a17b3e1-1100-4d24-9a71-000000000011A campaign-led first viewport followed by focused proof, tools, or action sections.
SiteHeader + hero + ordered sections + SiteFooter.shell { width:min(1180px,calc(100% - (var(--ta-page-gutter) * 2))); margin-inline:auto; }Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
A clear directory hero, search or filters when needed, a card grid, and an empty state.
PanelPageHeader or directory hero + toolbar + cards.ta-directory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Shared page header, a single dominant working container, visible progress for multi-step work, and a consistent action footer.
ToolSubheader + ta-box--large + canonical controls.ta-tool-layout { padding-block:32px 72px; background:#0f1012; }Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Breadcrumb, eyebrow, title, lead, metadata, a readable text column, optional media and sources, then related actions.
ta-standard-article family.ta-article-body { width:min(100%,780px); } .ta-article-section p { font-size:17px; line-height:1.82; }Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.
Shared panel header plus contained reading or form content. Account pages may add a left rail; legal pages keep one readable column.
PanelPageHeader + ta-box or panel-article.ta-reading-column { width:min(100%,780px); }Source: app/styles/canonical.css. Existing shared components are identified when they remain the live implementation.