Build better interfaces.
320 px 1440 px Fit Framework tokens
Understand your hardware.
Get closer to the components that power your everyday tools.
Learn more
Upgrade your workspace.
Find a setup that helps you focus, create, and get things done.
Learn more
HTML
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<section class="pattern-stacked-scroll-panel" tabindex="0" role="region" aria-label="Featured stories" data-motion="stacked"> <article class="pattern-stacked-scroll-panel__card" id="feature-01" style="--stacked-scroll-panel-index: 0; --stacked-scroll-panel-recede-scale: .92"> <div class="pattern-stacked-scroll-panel__body"> <h2>Build better interfaces.</h2> <div class="pattern-stacked-scroll-panel__footer"> <p>Explore practical tools for designing and building your next interface.</p> <a class="btn pattern-stacked-scroll-panel__action" href="/framework/homepage">Learn more</a> </div> </div> <img class="pattern-stacked-scroll-panel__image" src="https://images.pexels.com/photos/6483591/pexels-photo-6483591.jpeg?auto=compress&cs=tinysrgb&w=960" alt="Minimal desktop computer against a muted green wall" width="960" height="1440" style="object-position: 50% 75%"> </article> <article class="pattern-stacked-scroll-panel__card" id="feature-02" style="--stacked-scroll-panel-index: 1; --stacked-scroll-panel-recede-scale: .96"> <div class="pattern-stacked-scroll-panel__body"> <h2>Understand your hardware.</h2> <div class="pattern-stacked-scroll-panel__footer"> <p>Get closer to the components that power your everyday tools.</p> <a class="btn pattern-stacked-scroll-panel__action" href="/framework/homepage">Learn more</a> </div> </div> <img class="pattern-stacked-scroll-panel__image" src="https://images.pexels.com/photos/8038334/pexels-photo-8038334.jpeg?auto=compress&cs=tinysrgb&w=960" alt="Silver over-ear headphones on a stand against a soft mauve backdrop" width="960" height="1438" style="object-position: 50% 65%"> </article> <article class="pattern-stacked-scroll-panel__card" id="feature-03" style="--stacked-scroll-panel-index: 2"> <div class="pattern-stacked-scroll-panel__body"> <h2>Upgrade your workspace.</h2> <div class="pattern-stacked-scroll-panel__footer"> <p>Find a setup that helps you focus, create, and get things done.</p> <a class="btn pattern-stacked-scroll-panel__action" href="/framework/homepage">Learn more</a> </div> </div> <img class="pattern-stacked-scroll-panel__image" src="https://images.pexels.com/photos/8003998/pexels-photo-8003998.jpeg?auto=compress&cs=tinysrgb&w=960" alt="Airy home workspace with a laptop, brass lamp, and trailing plant" width="960" height="1440" style="object-position: 50% 65%"> </article></section> CSS
No element selected 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154.pattern-stacked-scroll-panel { --stacked-scroll-panel-background: var(--semantic-surface); --stacked-scroll-panel-card-background: color-mix(in oklch, var(--semantic-text) 4%, var(--semantic-surface)); --stacked-scroll-panel-color: var(--semantic-text); --stacked-scroll-panel-border: color-mix(in oklch, var(--semantic-border) 68%, var(--semantic-surface)); --stacked-scroll-panel-radius: var(--radius-xl); --stacked-scroll-panel-reveal: var(--space-m); --stacked-scroll-panel-canvas-padding: clamp(var(--space-l), 6vw, var(--space-4xl)); --stacked-scroll-panel-card-size: clamp(20rem, 60svh, 36rem); position: relative; display: grid; gap: var(--space-xl); inline-size: 100%; box-sizing: border-box; padding: var(--stacked-scroll-panel-canvas-padding); background: var(--stacked-scroll-panel-background); color: var(--stacked-scroll-panel-color); container: pattern-stacked-scroll-panel/inline-size; &:focus-visible { outline: 3px solid var(--semantic-focus); outline-offset: 3px; } &[data-motion="flow"] { gap: var(--space-l); } &[data-motion="flow"]::after { display: none; } & .pattern-stacked-scroll-panel__card { position: sticky; z-index: calc(var(--stacked-scroll-panel-index) + 1); inset-block-start: calc(var(--stacked-scroll-panel-canvas-padding) + var(--stacked-scroll-panel-index) * var(--stacked-scroll-panel-reveal)); display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(10rem, 1fr); justify-self: center; inline-size: min(100%, 60rem); min-block-size: var(--stacked-scroll-panel-card-size); overflow: clip; border: 1px solid var(--stacked-scroll-panel-border); border-radius: calc(var(--stacked-scroll-panel-radius) * .88); background: var(--stacked-scroll-panel-card-background); box-shadow: 0 .2rem 1rem color-mix(in oklch, var(--semantic-text) 6%, transparent); transform-origin: center top; } &::after { min-block-size: calc(var(--stacked-scroll-panel-card-size) + var(--space-l)); content: ""; } &[data-motion="flow"] .pattern-stacked-scroll-panel__card { position: relative; inset-block-start: auto; } & .pattern-stacked-scroll-panel__body { display: grid; align-content: space-between; gap: var(--space-l); min-inline-size: 0; padding: clamp(var(--space-m), 4vw, var(--space-xl)); } & .pattern-stacked-scroll-panel__eyebrow, & h2, & .pattern-stacked-scroll-panel__footer p { margin: 0; } & h2 { font: 400 var(--text-xl)/.95 var(--font-heading); letter-spacing: -.05em; } & .pattern-stacked-scroll-panel__footer { display: grid; gap: var(--space-s); justify-items: start; } & .pattern-stacked-scroll-panel__footer p { max-inline-size: 28ch; color: color-mix(in oklch, var(--semantic-text) 72%, var(--semantic-surface)); font: 400 var(--text-s)/1.5 var(--font-body); } & .pattern-stacked-scroll-panel__action { --btn-background: var(--semantic-text); --btn-border-color: var(--semantic-text); --btn-text-color: var(--semantic-surface); --btn-min-block-size: 2.25rem; --btn-padding-block: var(--space-4xs); --btn-padding-inline: var(--space-xs); --btn-font-size: var(--text-s); --btn-radius: var(--radius-full); white-space: nowrap; } & .pattern-stacked-scroll-panel__image { display: block; inline-size: 100%; block-size: 100%; min-block-size: 0; object-fit: cover; } & .pattern-stacked-scroll-panel__card:focus-within { z-index: 10; animation: none; filter: none; scale: 1; }}@supports (animation-timeline: scroll(nearest block)) { .pattern-stacked-scroll-panel[data-motion="stacked"] .pattern-stacked-scroll-panel__card:not(:focus-within) { animation: pattern-stacked-scroll-panel--recede linear both; animation-timeline: scroll(nearest block); } .pattern-stacked-scroll-panel[data-motion="stacked"] .pattern-stacked-scroll-panel__card:nth-of-type(1) { animation-range: 0% 29%; } .pattern-stacked-scroll-panel[data-motion="stacked"] .pattern-stacked-scroll-panel__card:nth-of-type(2) { animation-range: 30% 63%; } .pattern-stacked-scroll-panel[data-motion="stacked"] .pattern-stacked-scroll-panel__card:nth-of-type(3) { animation: none; }}@keyframes pattern-stacked-scroll-panel--recede { to { scale: var(--stacked-scroll-panel-recede-scale, .92); filter: saturate(.78); }}@container pattern-stacked-scroll-panel (max-width:30rem) { .pattern-stacked-scroll-panel .pattern-stacked-scroll-panel__card, .pattern-stacked-scroll-panel[data-motion] .pattern-stacked-scroll-panel__card:not(:focus-within) { position: relative; inset-block-start: auto; grid-template-columns: 1fr; animation: none; } .pattern-stacked-scroll-panel::after { display: none; } .pattern-stacked-scroll-panel .pattern-stacked-scroll-panel__image { aspect-ratio: 16 / 9; }}@media (max-width:40rem), (max-height:38rem), (prefers-reduced-motion:reduce) { .pattern-stacked-scroll-panel .pattern-stacked-scroll-panel__card, .pattern-stacked-scroll-panel[data-motion] .pattern-stacked-scroll-panel__card:not(:focus-within) { position: relative; inset-block-start: auto; grid-template-columns: 1fr; animation: none; } .pattern-stacked-scroll-panel::after { display: none; } .pattern-stacked-scroll-panel .pattern-stacked-scroll-panel__image { aspect-ratio: 16 / 9; }}