TenantAtlas/apps/website/src/components/content/Headline.astro
ahmido f884b16061
Some checks failed
Main Confidence / confidence (push) Failing after 40s
feat: implement website visual foundation (#251)
## Summary
- implement the website-only visual foundation for apps/website
- formalize semantic tokens, typography, spacing, surfaces, and shared CTA/navigation primitives
- align landing, trust/legal, and content-heavy routes plus Playwright smoke coverage with the new foundation

## Validation
- corepack pnpm build:website
- corepack pnpm --filter @tenantatlas/website exec playwright test

## Scope
- website-only change set for spec 214
- no apps/platform runtime coupling introduced

Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de>
Reviewed-on: #251
2026-04-19 07:19:58 +00:00

23 lines
920 B
Plaintext

---
interface Props {
as?: keyof HTMLElementTagNameMap;
class?: string;
size?: 'card' | 'display' | 'page' | 'section';
}
const { as = 'h2', class: className = '', size = 'section' } = Astro.props;
const Tag = as;
const sizeClasses = {
display:
'font-[var(--font-display)] text-[length:var(--type-display-size)] leading-[var(--line-display)] tracking-[var(--tracking-display)]',
page: 'font-[var(--font-display)] text-[length:var(--type-page-size)] leading-[var(--line-heading)] tracking-[var(--tracking-tight)]',
section:
'font-[var(--font-display)] text-[length:var(--type-section-size)] leading-[var(--line-heading)] tracking-[var(--tracking-tight)]',
card: 'font-semibold text-[length:var(--type-card-size)] leading-[1.12] tracking-[var(--tracking-tight)]',
};
---
<Tag class:list={['m-0 text-[var(--color-ink-900)]', sizeClasses[size], className]}>
<slot />
</Tag>