Documentation Index
Fetch the complete documentation index at: https://fieldpulse.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
Category Index Card — Specification
Status: Active
Source mockup: Image #14 (user-provided, 2026-05-21)
Before: Image #15 (current state as of ET-420)
Target pages: Any Mintlify page that renders a <CardGroup> (category index pages)
Last updated: 2026-05-21
1. Problem
Category index pages (e.g. /core-platform/projects, /core-platform/scheduling) show article
cards with a dark navy header band containing only a small bare icon, and a white body with only
the article title. Cards contain no description, no reading time, no “last updated” date, and no
category label in the header. Cards vary in height depending on title length.
2. Target Design
2.1 Anatomy
┌─────────────────────────────────────────────────────────┐
│ ┌──────────┐ │
│ │ [icon] │ CATEGORY NAME │ ← dark navy band, 90px tall
│ └──────────┘ │ (#00034D / var(--navy))
├─────────────────────────────────────────────────────────┤
│ │
│ Article Title │ ← 16px, #00034D, weight 700
│ │ 2-line clamp
│ Description text up to three lines of body copy │ ← 13px, var(--muted), 3-line clamp
│ that gives the reader a real preview of the article. │
│ │
│ ───────────────────────────────────────────────────── │ ← 1px solid var(--rule) divider
│ │
│ 3 min read · Updated May 2026 │ ← 12px, var(--muted)
│ │
└─────────────────────────────────────────────────────────┘
2.2 Header band
| Property | Value |
|---|
| Background | var(--navy) (#00034D) |
| Height | 90px (flex: 0 0 90px) |
| Padding | 18px 20px |
| Layout | display: flex; align-items: center; gap: 16px |
| Property | Value |
|---|
| Size | 52 × 52px |
| Border-radius | 12px |
| Background | rgba(97, 131, 216, 0.22) (—sky tint) |
| Icon | White document SVG, 24px |
| Layout | display: flex; align-items: center; justify-content: center |
| Property | Value |
|---|
| Content | Page H1 text, uppercased (e.g. “PROJECTS”) |
| Font-size | 11px |
| Font-weight | 700 |
| Letter-spacing | 0.12em |
| Color | rgba(255, 255, 255, 0.75) |
2.3 Card body
| Element | Spec |
|---|
| Padding | 20px all sides, 18px bottom |
| Title | 16px, var(--navy), weight 700, line-height 1.35, -webkit-line-clamp: 2 |
| Description | 13px, var(--muted), line-height 1.45, -webkit-line-clamp: 3 |
| Divider | <hr> — border-top 1px solid var(--rule), margin 12px 0, no border elsewhere |
| Meta | 12px, var(--muted) — format: “N min read · Updated Month YYYY” |
2.4 Card grid
- Equal height within each row: CSS grid
align-items: stretch on .card-group
height: 100% on .card so the card fills the grid cell
3. Data Model
3.1 /article-data.js (root-level)
Generated at build time by scripts/generate-article-data.ts. Assigns
window.__articleData so category-cards.js can read it synchronously without
a network fetch. Lives at the repo root (not /static/) because Mintlify does
not serve .json files from /static/ — only image types. Mintlify auto-includes
all root-level .js files. Keyed by exact article title
(matches data-component-part="card-title" DOM text, since Mintlify cards carry no href in
the hydrated DOM).
{
"Custom Fields on Project Records": {
"description": "How to create custom fields on your project records",
"readingTime": 2,
"lastUpdated": "May 1, 2026"
},
"Project Management Overview": {
"description": "Overview of FieldPulse project management tools",
"readingTime": 3,
"lastUpdated": "April 15, 2026"
}
}
| Field | Source | Notes |
|---|
| key (title) | title: frontmatter | Exact string match |
description | description: frontmatter | Omitted if missing |
readingTime | Word count ÷ 230, ceil, min 1 | Strip frontmatter + JSX before counting |
lastUpdated | last_crawled: frontmatter → formatted | Falls back to git log --follow -1 |
index.mdx files, changelog/, engineering/, architecture/, scripts/,
static/, docs/, todos/, .claude/.
4. Injected HTML Structure
category-cards.js injects the following real DOM nodes. CSS ::before is suppressed.
<!-- Prepended as first child of .card -->
<div class="hc-card-header">
<div class="hc-card-icon-box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ...><!-- document --></svg>
</div>
<span class="hc-card-category">PROJECTS</span>
</div>
<!-- Inside [data-component-part="card-content-container"], appended after card-title -->
<div class="hc-card-desc">Description text from frontmatter.</div>
<hr class="hc-card-divider" />
<div class="hc-card-meta">3 min read · Updated May 2026</div>
data-hc-enhanced="1" after injection to prevent double-processing.
5. CSS Class Inventory
| Class | Element | Role |
|---|
.hc-card-header | <div> | Dark navy header band (flex row) |
.hc-card-icon-box | <div> | Light blue rounded icon container |
.hc-card-category | <span> | Category name label |
.hc-card-desc | <div> | Description paragraph |
.hc-card-divider | <hr> | Separator between body and meta |
.hc-card-meta | <div> | ”N min read · Updated …” line |
6. Implementation Files
| File | Action | Purpose |
|---|
specs/category-cards/SPEC.md | Create | This document |
scripts/generate-article-data.ts | Create | Generates /article-data.js |
article-data.js | Generate + commit | Root-level script assigning window.__articleData |
category-cards.js | Create | JS that enhances cards on page load |
styles.css | Modify | Remove CSS ::before header; add hc-card-* styles |
7. Verification Checklist
