Component Contract
Byline / Meta
A small metadata row — author, date, read-time, category — shown beneath a title.
Live Demo
Default
Rendered
With avatar
Rendered
1. Summary
| Component name | Byline / Meta |
|---|---|
| AEM resource type | caat/components/byline |
| Tier | Base — may optionally compose Avatar |
| Purpose | Present article/teaser metadata (author, date, read-time, category) in one consistent muted row. |
| Variants | Default · With avatar |
| Status | New |
| Replaces | .caat-article__meta (Article-internal) |
Used by
- Article Layout — author/date/read-time under the title.
- Blog Listing — teaser metadata (candidate to adopt).
2. Design Tokens
| Token | Role |
|---|---|
--caat-color-text-muted | Meta text |
--caat-color-text | Emphasised author name |
--caat-font-primary | Font |
3. Authoring Fields
| Field | Type | Required | Notes |
|---|---|---|---|
| Author | Text | No | Emphasised; optional Avatar |
| Date | Date | No | Rendered via <time datetime> |
| Read time | Text | No | e.g. "5 min read" |
| Category | Text | No | Optional topic label |
4. Validation Rules
No author-managed content beyond an accessible label, so there are no authoring validation rules. Accessibility requirements are covered in Section 8 (Accessibility).
5. Content Guidance
- Keep it to 2–4 items; order author → date → read-time.
- Use a relative-friendly absolute date ("May 22, 2026"), not "2 days ago".
- Pair with an Avatar only when the author is a real, named person.
6. Semantic HTML
<p class="caat-byline">
<span><i class="bi bi-person" aria-hidden="true"></i> <span class="caat-byline__author">Jane Smith</span></span>
<span><i class="bi bi-calendar3" aria-hidden="true"></i> <time datetime="2026-05-22">May 22, 2026</time></span>
<span><i class="bi bi-clock" aria-hidden="true"></i> 5 min read</span>
</p>7. CSS Contract
| Selector | Purpose |
|---|---|
.caat-byline | Flex row, muted small text, wraps |
.caat-byline__author | Emphasised author name |
.caat-byline i | Leading icon spacing |
8. Accessibility
| Requirement | Implementation |
|---|---|
| Machine-readable date | Use <time datetime="…"> for the date. |
| Icons | Leading icons are aria-hidden="true"; the text label conveys meaning. |
| Contrast | Muted text on white meets AA (6.3:1). |
9. SEO
Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.
10. Analytics
Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.
11. AEM Implementation Notes
- Resource type:
caat/components/byline; optional Avatar via Sling delegation. - Date formatted server-side;
datetimeattribute carries ISO value.
12. Dialog Model (cq:dialog)
Not authored directly. The byline is a sub-element emitted and configured by its host component (or generated from page structure), so it has no standalone cq:dialog — any options are exposed through the host component's dialog.
13. QA Checklist
| # | Check | Pass? |
|---|---|---|
| 1 | Row wraps gracefully on mobile | |
| 2 | Author emphasised; other items muted | |
| 3 | Date uses <time datetime>; icons aria-hidden | |
| 4 | Optional avatar aligns to the row |
14. Definition of Done
- Token-driven; AA verified.
- Article Layout refactored to compose it (was
.caat-article__meta). - Date is machine-readable; icons aria-hidden.
- QA checklist signed off.