x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>TEMPLATE KIT:</strong> Meta-chrome for the pod-leader Template Library (Projects → Templates)<br> <strong>COMPOSES:</strong> Zone markers | Guidance sidebar | Frame | Auth-state ribbon </p> <p class="tw:mb-0 tw:text-sm"> Scaffolding classes that wrap page templates so pod leaders can see which regions to swap. Zone labels come from the <code>data-slot</code> attribute. None of these classes ship on real product pages — they exist only inside the Template Library. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Placeholder Zone Markers</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Three variants:</strong> <code>.tpl-slot</code> (label floats above), <code>.tpl-slot-inline</code> (tight offset, no label — for inline elements), <code>.tpl-slot-inset</code> (outline + label inside the box — for big page regions). </p> </div> <div class="tw:flex tw:flex-col tw:gap-10 tw:bg-white tw:p-8 tw:rounded-lg"> <div class="tpl-slot" data-slot="[HERO SEARCH]"> <div class="tw:h-14 tw:rounded-full tw:border tw:border-line-card tw:bg-white tw:flex tw:items-center tw:px-6 tw:text-neutral-500"> Search pill placeholder </div> </div> <div> <span class="tpl-slot-inline"> <button class="btn btn-primary" type="button">Quick Apply</button> </span> </div> <div class="tpl-slot-inset tw:h-40 tw:bg-surface-muted tw:rounded" data-slot="[FILTER RAIL]"></div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tpl-slot" data-slot="[HERO SEARCH]">…</div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Frame, Guidance Sidebar & State Ribbon</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Frame:</strong> <code>.tpl-frame</code> lays out [<code>.tpl-page</code> | <code>.tpl-guidance</code>]. The ribbon (<code>.tpl-state-ribbon-loggedin/-loggedout</code>) pins top-right of the frame. </p> </div> <div class="tpl-frame tw:border tw:border-line-card tw:rounded-lg tw:overflow-hidden"> <span class="tpl-state-ribbon tpl-state-ribbon-loggedin">Logged in</span> <div class="tpl-page tw:p-10"> <div class="tpl-slot" data-slot="[PAGE BODY]"> <div class="tw:h-48 tw:bg-surface-tint tw:rounded tw:flex tw:items-center tw:justify-center tw:text-neutral-500"> Page render goes here </div> </div> </div> <aside class="tpl-guidance"> <h3 class="tpl-guidance-title">Search Providers — Landing</h3> <p class="tpl-guidance-purpose">Default landing for anonymous visitors. Hero search + stats + discovery sections.</p> <h4 class="tpl-guidance-label">Placeholder zones</h4> <ol> <li><code>[HERO SEARCH]</code> — 5-segment pill. All segments clickable.</li> <li><code>[STATS STRIP]</code> — 4 big-number KPIs.</li> </ol> <h4 class="tpl-guidance-label">Copy guidelines</h4> <ul> <li>Headline = 3 short verbs separated by full stops.</li> <li>Section headers in Title Case.</li> </ul> <h4 class="tpl-guidance-label">Do & don't</h4> <div class="tpl-guidance-do"><b>Do</b> — keep this page logged-out by default.</div> <div class="tpl-guidance-dont"><b>Don't</b> — add a hero image; Applicaa has none in chrome.</div> <div class="tpl-guidance-meta"> <div><b>State</b><span>Logged in</span></div> <div><b>Width</b><span>1280px</span></div> <div><b>Slots</b><span>2</span></div> </div> </aside> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tpl-frame"><div class="tpl-page">…</div><aside class="tpl-guidance">…</aside></div></code> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <%# Introductory callout %> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>TEMPLATE KIT:</strong> Meta-chrome for the pod-leader Template Library (Projects → Templates)<br> <strong>COMPOSES:</strong> Zone markers | Guidance sidebar | Frame | Auth-state ribbon </p> <p class="tw:mb-0 tw:text-sm"> Scaffolding classes that wrap page templates so pod leaders can see which regions to swap. Zone labels come from the <code>data-slot</code> attribute. None of these classes ship on real product pages — they exist only inside the Template Library. </p> </div> <%# Zone markers %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Placeholder Zone Markers</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Three variants:</strong> <code>.tpl-slot</code> (label floats above), <code>.tpl-slot-inline</code> (tight offset, no label — for inline elements), <code>.tpl-slot-inset</code> (outline + label inside the box — for big page regions). </p> </div> <div class="tw:flex tw:flex-col tw:gap-10 tw:bg-white tw:p-8 tw:rounded-lg"> <div class="tpl-slot" data-slot="[HERO SEARCH]"> <div class="tw:h-14 tw:rounded-full tw:border tw:border-line-card tw:bg-white tw:flex tw:items-center tw:px-6 tw:text-neutral-500"> Search pill placeholder </div> </div> <div> <span class="tpl-slot-inline"> <button class="btn btn-primary" type="button">Quick Apply</button> </span> </div> <div class="tpl-slot-inset tw:h-40 tw:bg-surface-muted tw:rounded" data-slot="[FILTER RAIL]"></div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tpl-slot" data-slot="[HERO SEARCH]">…</div></code> </div> </div> <%# Frame + guidance sidebar + ribbon %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Frame, Guidance Sidebar & State Ribbon</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Frame:</strong> <code>.tpl-frame</code> lays out [<code>.tpl-page</code> | <code>.tpl-guidance</code>]. The ribbon (<code>.tpl-state-ribbon-loggedin/-loggedout</code>) pins top-right of the frame. </p> </div> <div class="tpl-frame tw:border tw:border-line-card tw:rounded-lg tw:overflow-hidden"> <span class="tpl-state-ribbon tpl-state-ribbon-loggedin">Logged in</span> <div class="tpl-page tw:p-10"> <div class="tpl-slot" data-slot="[PAGE BODY]"> <div class="tw:h-48 tw:bg-surface-tint tw:rounded tw:flex tw:items-center tw:justify-center tw:text-neutral-500"> Page render goes here </div> </div> </div> <aside class="tpl-guidance"> <h3 class="tpl-guidance-title">Search Providers — Landing</h3> <p class="tpl-guidance-purpose">Default landing for anonymous visitors. Hero search + stats + discovery sections.</p> <h4 class="tpl-guidance-label">Placeholder zones</h4> <ol> <li><code>[HERO SEARCH]</code> — 5-segment pill. All segments clickable.</li> <li><code>[STATS STRIP]</code> — 4 big-number KPIs.</li> </ol> <h4 class="tpl-guidance-label">Copy guidelines</h4> <ul> <li>Headline = 3 short verbs separated by full stops.</li> <li>Section headers in Title Case.</li> </ul> <h4 class="tpl-guidance-label">Do & don't</h4> <div class="tpl-guidance-do"><b>Do</b> — keep this page logged-out by default.</div> <div class="tpl-guidance-dont"><b>Don't</b> — add a hero image; Applicaa has none in chrome.</div> <div class="tpl-guidance-meta"> <div><b>State</b><span>Logged in</span></div> <div><b>Width</b><span>1280px</span></div> <div><b>Slots</b><span>2</span></div> </div> </aside> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tpl-frame"><div class="tpl-page">…</div><aside class="tpl-guidance">…</aside></div></code> </div> </div></div>No notes provided.
No params configured.