PageSourceSearch

https://frame.work/cart

html frame.work collected 2026-10-01 10:24:31 UTC 105,354 bytes, 1,506 lines download raw bytes

1<!doctype html>
2<html lang="en-US">
3  <head>
4  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, shrink-to-fit=no">
6<meta name="msapplication-TileColor" content="#1F1F1F">
7<meta name="theme-color" content="#ffffff">
8
9<meta name="analytics-key" content="peLUa1duUe2FSV2ib9Q583HHzzoPf86U">
10<meta name="compliance-enabled" content="true">
11<meta name="challenges-enabled" content="true">
12<meta name="datadog-application-id" content="4d609250-0a09-4cf7-b0cc-9ac48ec8c44b">
13<meta name="datadog-client-token" content="pub6ad971e1dde38b835554a6e4da4d170a">
14<meta name="google-apis-key" content="AIzaSyDJhr1X-1JHqQx1RM8QxkdcYaZUTWYsDjk">
15<meta name="policy-id" content="55865674">
16<meta name="release-revision" content="84d3d946c38a1a0639b003787ebd27ccac5b2f18">
17<meta name="release-stage" content="production">
18<meta name="release-version" content="v6903">
19<meta name="language" content="en">
20<meta name="country" content="us">
21<meta name="currency" content="usd">
22
23<title>Framework | Your bag</title>
24<meta name="description" content="We know consumer electronics can be better for you and for the environment. Unlike most products, ours are open for you to repair and upgrade">
25<meta name="robots" content="noindex">
26<link rel="image_src" href="/assets/og_image-4ed36f752b489946634f27564886ca68fafacc7202bf36024057eadf0ba6225e.png">
27<meta property="og:site_name" content="Framework">
28<meta property="og:title" content="Your bag">
29<meta property="og:description" content="We know consumer electronics can be better for you and for the environment. Unlike most products, ours are open for you to repair and upgrade">
30<meta property="og:type" content="website">
31<meta property="og:image" content="/assets/og_image-4ed36f752b489946634f27564886ca68fafacc7202bf36024057eadf0ba6225e.png">
32<meta name="twitter:card" content="summary_large_image">
33
34<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
35<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
36<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
37<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
38<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
39
40
41    <link rel="preconnect" href="https://images.frame.work">
42
43    <link rel="preconnect" href="https://static.frame.work">
44
45  <link rel="preconnect" href="https://cdn.segment.com">
46  <link rel="preconnect" href="https://cdn.iubenda.com">
47  <link rel="dns-prefetch" href="https://customer-gbu4wsrjcdamtxzc.cloudflarestream.com">
48  <link rel="dns-prefetch" href="https://images.prismic.io">
49  <link rel="dns-prefetch" href="https://a.klaviyo.com">
50  <link rel="dns-prefetch" href="https://www.google-analytics.com">
51  <link rel="dns-prefetch" href="https://connect.facebook.net">
52  <link rel="dns-prefetch" href="https://www.facebook.com">
53
54  
55
56  <link rel="alternate" type="application/rss+xml" title="RSS" href="https://frame.work/blog.rss" />
57  <link rel="stylesheet" href="/assets/application-2ee69bb268f234b443cbaef26d0d19ff744759b08ceaec55a866ed4e160499dd.css" media="all" data-turbo-track="reload" />
58    <link rel="preload" href="/assets/Graphik-Regular-3732095de2f2a2afbbd10592e77b86c28a9c77bc2831edb5a0757de12f8d1756.woff2" as="font" type="font/woff2" crossorigin="anonymous">
59    <link rel="preload" href="/assets/Graphik-Medium-Web-00d488676deae0a2638bf0753dba63b51e767e8965811225a61a90a9c0e5e186.woff2" as="font" type="font/woff2" crossorigin="anonymous">
60    <link rel="preload" href="/assets/MaterialIcons-Outlined-6581849288a08d7f603f2b684421b8b946c72eebb39c32eadda1019f01c55076.woff2" as="font" type="font/woff2" crossorigin="anonymous">
61  <meta name="action-cable-url" content="/cable" />
62    <link rel="preload" href="/assets/runtime-313585af629bd94ba63ddba0a257522be07778a30048d7bdbd6de80a27b108b0.js" as="script" type="text/javascript">
63    <link rel="preload" href="/assets/turbo-bfb5d726439909af8434dd29510b2f2e341aef6e132908d7654db670548bc5b9.js" as="script" type="text/javascript">
64    <link rel="preload" href="/assets/application-929388349213fecec5a9720c3fb2c5b87f21ecfd630c5f9a4db81180ab2f0075.js" as="script" type="text/javascript">
65    <link rel="preload" href="/assets/components-e88fbd48a11dc1e3f1b40f581b83f7d61e6908c0680537abb706e70f310dfffd.js" as="script" type="text/javascript">
66  
66<script src="/assets/runtime-313585af629bd94ba63ddba0a257522be07778a30048d7bdbd6de80a27b108b0.js" data-turbo-track="reload" defer="defer"></script>
vendor: 1 bytes, line 66
66
67<script src="/assets/turbo-bfb5d726439909af8434dd29510b2f2e341aef6e132908d7654db670548bc5b9.js" data-turbo-track="reload" defer="defer"></script>
vendor: 1 bytes, line 67
67
68<script src="/assets/application-929388349213fecec5a9720c3fb2c5b87f21ecfd630c5f9a4db81180ab2f0075.js" data-turbo-track="reload" defer="defer"></script>
vendor: 1 bytes, line 68
68
69<script src="/assets/components-e88fbd48a11dc1e3f1b40f581b83f7d61e6908c0680537abb706e70f310dfffd.js" data-turbo-track="reload" defer="defer"></script>
69
70
71</head>
72
73  <body data-turbo-prefetch="false" data-admin="">
74    <div class="theme-provider" data-controller="theme-provider-component--theme-provider" data-theme-provider-component--theme-provider-theme-value="">
75        <noscript>
76          <iframe
77            src="https://www.googletagmanager.com/ns.html?id=G-PYG8X65YJJ"
78            title="Google Tag Manager"
79            height="0"
80            width="0"
81            style="display:none;visibility:hidden"></iframe>
82        </noscript>
83          <header
84  data-controller='containers--header-component--header'
85  data-containers--header-component--header-containers--products--slices--selector-component--transparent-header-outlet='[data-controller~="containers--products--slices--selector-component--transparent-header"]'
86  data-containers--header-component--header-initial-class='header-primary bg-surface text-black border-utility-outline-mild'
87  data-containers--header-component--header-transparent-class='header-transparent text-black border-transparent hover:border-solid hover:duration-0 hover:bg-surface hover:border-utility-outline-mild'
88  data-action='scroll@window->containers--header-component--header#setHeaderAppearance'
89  class="z-[60] sticky inset-0 [&amp;&gt;*]:border-b [&amp;&gt;*]:border-b-transparent hover:[&amp;&gt;*]:border-b-utility-outline header-primary bg-surface text-black border-utility-outline-mild"
90  data-test-id="header">
91  
92
93  <div
94    class="
95      max-sm:container sm:px-6 md:px-10 xl:px-0 h-12 xl:h-16 flex
96      justify-between items-center lg:text-sm relative
97    ">
98    <div class="flex items-center xl:hidden">
99      <div class="mr-2"
100  data-controller='containers--navigations--mobile-menu-component--menu'
101  data-containers--navigations--mobile-menu-component--menu-open-class='menu-open'
102  data-containers--navigations--mobile-menu-component--menu-scroll-lock-class='overflow-hidden lg:overflow-auto'
103  data-action='keydown.esc->containers--navigations--mobile-menu-component--menu#close keydown->containers--navigations--mobile-menu-component--menu#trapFocus turbo:before-cache@window->containers--navigations--mobile-menu-component--menu#teardown'>
104
105  <button type="button"
106    class="cursor-pointer grid grid-flow-row gap-y-2"
107    aria-label="Menu"
108    aria-haspopup="dialog"
109    aria-expanded="false"
110    data-containers--navigations--mobile-menu-component--menu-target='trigger'
111    data-action='click->containers--navigations--mobile-menu-component--menu#toggle'>
112    <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">menu</span>
113  </button>
114
115  <div class="mobile-menu-overlay" aria-hidden="true"
116    data-action='click->containers--navigations--mobile-menu-component--menu#close'></div>
117
118  <div class="bg-white z-10 h-dvh px-8 pt-4 pb-12 font-normal overflow-y-scroll text-black mobile-menu"
119    role="dialog"
120    aria-modal="true"
121    aria-label="Menu"
122    data-containers--navigations--mobile-menu-component--menu-target='panel'>
123    <nav class="grid grid-flow-row">
124      <button type="button"
125        class="cursor-pointer mb-8 justify-self-start"
126        aria-label="Close menu"
127        data-containers--navigations--mobile-menu-component--menu-target='close'
128        data-action='click->containers--navigations--mobile-menu-component--menu#close'>
129        <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">close</span>
130      </button>
131
132      <div class="border-t border-b border-light-dark divide-y divide-light-dark">
133          <div class="py-2.5">
134              <div class="w-full" data-controller='containers--navigations--mobile-accordion-component--accordion'>
135  <button type="button"
136    class="peer group flex items-center justify-between w-full font-medium cursor-pointer"
137    aria-expanded="false"
138    aria-controls="menu_dropdown_desktop_mobile"
139    data-test-id="desktop-hero-navigation-mobile"
140    data-action='click->containers--navigations--mobile-accordion-component--accordion#toggle'>
141    Framework Desktop
142    <span class="inline-block group-aria-expanded:hidden">
143      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_down</span>
144    </span>
145    <span class="hidden group-aria-expanded:inline-block">
146      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_up</span>
147    </span>
148  </button>
149
150  <div id="menu_dropdown_desktop_mobile" class="hidden peer-aria-expanded:block">
151    <div class="pl-2 pb-4">
152      
153    <div class="pt-4">
154      <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/desktop">
155        <img alt="Framework Desktop" width="200" height="200" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/3bay32p8nnpegez5s3tdzor1dhwo" />
156</a>    </div>
157    <div class="pt-8">
158      <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline" aria-label="Learn more about Desktop" href="/desktop">
159        <span class="text-lg font-semibold">Desktop</span>
160</a>    </div>
161      <div class="pt-4">
162        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/desktop?tab=specs">Specs</a>
163      </div>
164      <div class="pt-4">
165        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace?compatibility%5B%5D=desktop_amd_ryzen_ai_max300&amp;compatibility%5B%5D=desktop_amd_ryzen_ai_max400">Shop parts</a>
166      </div>
167      <div class="pt-4">
168        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/desktop-support">Downloads and guides</a>
169      </div>
170      <div class="pt-4">
171        <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" href="/products/desktop-diy-amd-aimax400/configuration/new">Configure now</a>
172      </div>
173
174    </div>
175  </div>
176</div>
177
178          </div>
179          <div class="py-2.5">
180              <div class="w-full" data-controller='containers--navigations--mobile-accordion-component--accordion'>
181  <button type="button"
182    class="peer group flex items-center justify-between w-full font-medium cursor-pointer"
183    aria-expanded="false"
184    aria-controls="menu_dropdown_laptop_12_mobile"
185    data-test-id="laptop-12-hero-navigation-mobile"
186    data-action='click->containers--navigations--mobile-accordion-component--accordion#toggle'>
187    Framework Laptop 12
188    <span class="inline-block group-aria-expanded:hidden">
189      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_down</span>
190    </span>
191    <span class="hidden group-aria-expanded:inline-block">
192      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_up</span>
193    </span>
194  </button>
195
196  <div id="menu_dropdown_laptop_12_mobile" class="hidden peer-aria-expanded:block">
197    <div class="pl-2 pb-4">
198      
199    <div class="pt-4">
200      <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/laptop12">
201        <img alt="Framework Laptop 12" width="200" height="200" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/resqjawk6ah239m1zi4o5sddtftm" />
202</a>    </div>
203    <div class="pt-8">
204      <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline" aria-label="Learn more about Laptop 12" href="/laptop12">
205        <span class="text-lg font-semibold">Laptop 12</span>
206</a>    </div>
207      <div class="pt-4">
208        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop12?tab=specs">Specs</a>
209      </div>
210      <div class="pt-4">
211        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace?compatibility%5B%5D=laptop12_intel_core_13th_gen&amp;compatibility%5B%5D=laptop12_intel_core_series_3">Shop parts</a>
212      </div>
213      <div class="pt-4">
214        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop12-support">Downloads and guides</a>
215      </div>
216      <div class="pt-4">
217        <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" href="/products/laptop12-diy-intel-series3/configuration/new">Configure now</a>
218      </div>
219
220    </div>
221  </div>
222</div>
223
224          </div>
225          <div class="py-2.5">
226              <div class="w-full" data-controller='containers--navigations--mobile-accordion-component--accordion'>
227  <button type="button"
228    class="peer group flex items-center justify-between w-full font-medium cursor-pointer"
229    aria-expanded="false"
230    aria-controls="menu_dropdown_laptop_13_mobile"
231    data-test-id="laptop-13-hero-navigation-mobile"
232    data-action='click->
232containers--navigations--mobile-accordion-component--accordion#toggle'>
233    Framework Laptop 13
234    <span class="inline-block group-aria-expanded:hidden">
235      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_down</span>
236    </span>
237    <span class="hidden group-aria-expanded:inline-block">
238      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_up</span>
239    </span>
240  </button>
241
242  <div id="menu_dropdown_laptop_13_mobile" class="hidden peer-aria-expanded:block">
243    <div class="pl-2 pb-4">
244      
245      <div class="pt-8">
246        <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/laptop13pro">
247          <img alt="Framework Laptop 13 Pro" width="200" height="200" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/ix6yqbgw7m5tidfjbxjo3ke86scu" />
248</a>      </div>
249      <div class="pt-4">
250        <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline" aria-label="Learn more about Laptop 13 Pro" href="/laptop13pro">
251          <span class="text-lg font-semibold">Laptop 13 Pro</span>
252</a>      </div>
253        <div class="pt-4">
254          <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop13pro?tab=specs">Specs</a>
255        </div>
256        <div class="pt-4">
257          <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace?compatibility%5B%5D=laptop13pro_amd_ryzen_ai300_series&amp;compatibility%5B%5D=laptop13pro_intel_core_ultra_series_3">Shop parts</a>
258        </div>
259        <div class="pt-4">
260          <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop13pro-support">Downloads and guides</a>
261        </div>
262        <div class="pt-4">
263          <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" href="/products/laptop13pro-diy-intel-ultra-3/configuration/new">Configure now</a>
264        </div>
265      <div class="pt-8">
266        <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/laptop13">
267          <img alt="Framework Laptop 13" width="200" height="200" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/6ou8q6io9z68ecbjuc0se3qxxbiw" />
268</a>      </div>
269      <div class="pt-4">
270        <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline" aria-label="Learn more about Laptop 13" href="/laptop13">
271          <span class="text-lg font-semibold">Laptop 13</span>
272</a>      </div>
273        <div class="pt-4">
274          <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop13?tab=specs">Specs</a>
275        </div>
276        <div class="pt-4">
277          <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace?compatibility%5B%5D=laptop13_intel_core_11th_gen&amp;compatibility%5B%5D=laptop13_intel_core_12th_gen&amp;compatibility%5B%5D=chromebook&amp;compatibility%5B%5D=%09laptop13_intel_core_13th_gen&amp;compatibility%5B%5D=%09laptop13_amd_ryzen_7040_series&amp;compatibility%5B%5D=laptop13_intel_core_ultra_series_1&amp;compatibility%5B%5D=laptop13_amd_ryzen_ai300_series">Shop parts</a>
278        </div>
279        <div class="pt-4">
280          <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop13-support">Downloads and guides</a>
281        </div>
282        <div class="pt-4">
283          <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" href="/products/laptop13-diy-amd-ai300/configuration/new">Configure now</a>
284        </div>
285
286    </div>
287  </div>
288</div>
289
290          </div>
291          <div class="py-2.5">
292              <div class="w-full" data-controller='containers--navigations--mobile-accordion-component--accordion'>
293  <button type="button"
294    class="peer group flex items-center justify-between w-full font-medium cursor-pointer"
295    aria-expanded="false"
296    aria-controls="menu_dropdown_laptop_16_mobile"
297    data-test-id="laptop-16-hero-navigation-mobile"
298    data-action='click->
298containers--navigations--mobile-accordion-component--accordion#toggle'>
299    Framework Laptop 16
300    <span class="inline-block group-aria-expanded:hidden">
301      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_down</span>
302    </span>
303    <span class="hidden group-aria-expanded:inline-block">
304      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_up</span>
305    </span>
306  </button>
307
308  <div id="menu_dropdown_laptop_16_mobile" class="hidden peer-aria-expanded:block">
309    <div class="pl-2 pb-4">
310      
311    <div class="pt-4">
312      <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/laptop16">
313        <img alt="Framework Laptop 16" width="200" height="200" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/2go7hla66f448kffzjxj6zvwtx84" />
314</a>    </div>
315    <div class="pt-8">
316      <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline" aria-label="Learn more about Laptop 16" href="/laptop16">
317        <span class="text-lg font-semibold">Laptop 16</span>
318</a>    </div>
319      <div class="pt-4">
320        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop16?tab=specs">Specs</a>
321      </div>
322      <div class="pt-4">
323        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace?compatibility%5B%5D=laptop16_amd_ryzen_7040_series&amp;compatibility%5B%5D=laptop16_amd_ryzen_ai300_series">Shop parts</a>
324      </div>
325      <div class="pt-4">
326        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop16-support">Downloads and guides</a>
327      </div>
328      <div class="pt-4">
329        <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" href="/products/laptop16-diy-amd-ai300/configuration/new">Configure now</a>
330      </div>
331
332    </div>
333  </div>
334</div>
335
336          </div>
337          <div class="py-2.5">
338              <div class="w-full" data-controller='containers--navigations--mobile-accordion-component--accordion'>
339  <button type="button"
340    class="peer group flex items-center justify-between w-full font-medium cursor-pointer"
341    aria-expanded="false"
342    aria-controls="menu_dropdown_marketplace_mobile"
343    data-test-id="marketplace-dropdown-navigation-mobile"
344    data-action='click->containers--navigations--mobile-accordion-component--accordion#toggle'>
345    Shop all
346    <span class="inline-block group-aria-expanded:hidden">
347      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_down</span>
348    </span>
349    <span class="hidden group-aria-expanded:inline-block">
350      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_up</span>
351    </span>
352  </button>
353
354  <div id="menu_dropdown_marketplace_mobile" class="hidden peer-aria-expanded:block">
355    <div class="pl-2 pb-4">
356      
357
358      <div class="pt-4">
359        <a data-test-id="marketplace-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace">View All</a>
360      </div>
361      <div class="pt-4">
362        <a data-test-id="outlet-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="https://frame.work/outlet">Outlet</a>
363      </div>
364      <div class="pt-4">
365        <a data-test-id="framework-laptop-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/laptops">Framework Laptop</a>
366      </div>
367      <div class="pt-4">
368        <a data-test-id="framework-desktop-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/desktops">Framework Desktop</a>
369      </div>
370      <div class="pt-4">
371        <a data-test-id="mainboards-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/mainboards">Mainboards</a>
372      </div>
373      <div class="pt-4">
374        <a data-test-id="expansion-cards-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/expansion-cards">Expansion Cards</a>
375      </div>
376      <div class="pt-4">
377        <a data-test-id="memory-storage-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/memory-storage">Memory &amp; Storage</a>
378      </div>
379      <div class="pt-4">
380        <a data-test-id="keyboards-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/keyboards">Keyboards</a>
381      </div>
382      <div class="pt-4">
383        <a data-test-id="parts-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/parts">Parts</a>
384      </div>
385      <div class="pt-4">
386        <a data-test-id="customization-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/customization">Customization</a>
387      </div>
388      <div class="pt-4">
389        <a data-test-id="tools-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/tools">Tools</a>
390      </div>
391      <div class="pt-4">
392        <a data-test-id="software-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/software">Software</a>
393      </div>
394      <div class="pt-4">
395        <a data-test-id="merch-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/marketplace/merch">Merch</a>
396      </div>
397
398    </div>
399  </div>
400</div>
401
402          </div>
403          <div class="py-2.5">
404              <div class="w-full" data-controller='containers--navigations--mobile-accordion-component--accordion'>
405  <button type="button"
406    class="peer group flex items-center justify-between w-full font-medium cursor-pointer"
407    aria-expanded="false"
408    aria-controls="menu_dropdown_support_mobile"
409    data-test-id="support-dropdown-navigation-mobile"
410    data-action='click->containers--navigations--mobile-accordion-component--accordion#toggle'>
411    Support
412    <span class="inline-block group-aria-expanded:hidden">
413      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_down</span>
414    </span>
415    <span class="hidden group-aria-expanded:inline-block">
416      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_up</span>
417    </span>
418  </button>
419
420  <div id="menu_dropdown_support_mobile" class="hidden peer-aria-expanded:block">
421    <div class="pl-2 pb-4">
422      
423      <div class="pt-8 font-medium">Downloads and guides</div>
424
425      <div class="pt-4">
426        <a data-test-id="desktop-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/desktop-support">Framework Desktop</a>
427      </div>
428      <div class="pt-4">
429        <a data-test-id="laptop-12-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop12-support">Framework Laptop 12</a>
430      </div>
431      <div class="pt-4">
432        <a data-test-id="laptop-13-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop13-support">Framework Laptop 13</a>
433      </div>
434      <div class="pt-4">
435        <a data-test-id="laptop-16-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/laptop16-support">Framework Laptop 16</a>
436      </div>
437      <div class="pt-8 font-medium">Resources</div>
438
439      <div class="pt-4">
440        <a data-test-id="linux-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/linux">Linux on the Framework Laptop</a>
441      </div>
442      <div class="pt-4">
443        <a data-test-id="community_forum-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="https://community.frame.work">Community Forum</a>
444      </div>
445      <div class="pt-4">
446        <a data-test-id="knowledge_base-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="https://knowledgebase.frame.work">Knowledge Base</a>
447      </div>
448      <div class="pt-8 font-medium">Contact Support</div>
449
450      <div class="pt-4">
451        <a data-test-id="submit_a_support_request-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="https://knowledgebase.frame.work/contact/contact-us-rJfw7Ryglx">Submit a support request</a>
452      </div>
453
454    </div>
455  </div>
456</div>
457
458          </div>
459          <div class="py-2.5">
460              <span class="xl:flex xl:items-center xl:px-3 h-full font-medium" data-test-id="for business-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" href="/framework-for-business">For Business</a></span>
461          </div>
462          <div class="py-2.5">
463              <div class="w-full" data-controller='containers--navigations--mobile-accordion-component--accordion'>
464  <button type="button"
465    class="peer group flex items-center justify-between w-full font-medium cursor-pointer"
466    aria-expanded="false"
467    aria-controls="menu_dropdown_about_mobile"
468    data-test-id="about-dropdown-navigation-mobile"
469    data-action='click->containers--navigations--mobile-accordion-component--accordion#toggle'>
470    About
471    <span class="inline-block group-aria-expanded:hidden">
472      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_down</span>
473    </span>
474    <span class="hidden group-aria-expanded:inline-block">
475      <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">keyboard_arrow_up</span>
476    </span>
477  </button>
478
479  <div id="menu_dropdown_about_mobile" class="hidden peer-aria-expanded:block">
480    <div class="pl-2 pb-4">
481      
482
483      <div class="pt-4">
484        <a data-test-id="about_framework-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/about">About Framework</a>
485      </div>
486      <div class="pt-4">
487        <a data-test-id="sustainability-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/sustainability">Sustainability</a>
488      </div>
489      <div class="pt-4">
490        <a data-test-id="our_blog-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/blog">Our Blog</a>
491      </div>
492      <div class="pt-4">
493        <span class="flex flex-row items-center space-x-1.5 h-full w-full">
494  <a target="_blank" rel="noopener" title="We&#39;re Hiring" class="focus:accent-blue" href="https://jobs.frame.work">We&#39;re Hiring</a>
495  <span class="rounded-full flex items-center justify-center bg-primary h-5 w-5 text-xs">2</span>
496</span>
497
498      </div>
499
500    </div>
501  </div>
502</div>
503
504          </div>
505        <div class="hidden lg:block py-4">
506  <a aria-label="Change Location and Language settings" data-turbo="false" class="focus:accent-blue" href="/locale/edit">
507      <span class="flex items-center gap-x-2 px-3 py-2 rounded-full font-medium bg-light">
508        <span class="w-6">
509          <img alt="United States" width="24" height="17" loading="lazy" src="/images/flags/us.svg" />
510        </span>
511        USD
512    </span>
513</a></div>
514
515<div class="lg:hidden py-4">
516<a data-turbo="false" class="focus:accent-blue" href="/locale/edit">
517    <span class="flex items-center space-x-2">
518      <span class="w-6">
519        <img alt="United States" width="24" height="17" loading="lazy" src="/images/flags/us.svg" />
520      </span>
521      <span>
522        USD
523      </span>
524  </span>
525</a></div>
526
527      </div>
528
529      <div class="lg:hidden">
530      <turbo-frame id="mobile-profile-menu" src="/profile_menu?mobile=true" loading="lazy" target="_top">
531        <div class="mt-2 space-y-4">
532  <div class="hidden p-6 pt-4 lg:flex flex-col items-center text-center">
533    <a class="focus:accent-blue whitespace-nowrap block flex justify-center items-center relative transition-colors duration-300 ease-in-out hover:no-underline font-semibold focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-2 focus-visible:outline-accent-blue group rounded-full max-w-max min-w-min bg-brand-primary text-on-primary hover:bg-brand-primary-hover active:bg-brand-primary-pressed focus:outline-accent-blue group no-underline" data-test-id="sign-in-button" href="/login"><span class="flex justify-center items-center py-2 px-4 space-x-3 rounded-full"><span>Sign in</span></span></a>
534
535    <p class="mt-3">Don&#39;t have an account?</p>
536    <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/signup">Create your account</a>
537</div>
538
539<div class="lg:hidden py-3">
540    <a class="focus:accent-blue whitespace-nowrap block flex justify-center items-center relative transition-colors duration-300 ease-in-out hover:no-underline font-semibold focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-2 focus-visible:outline-accent-blue group rounded-full max-w-max min-w-min bg-black text-white border-white hover:bg-secondary-hover active:bg-secondary-pressed focus:bg-accent-dark group no-underline" href="/login"><span class="flex justify-center items-center py-2 px-4 space-x-3 rounded-full"><span>Sign in</span></span></a>
541    <div class="mt-3">
542      or
543      <span class="font-semibold display-inline">
544        <span class="xl:flex xl:items-center xl:px-3 h-full" data-test-id="create account-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" href="/signup">Create account</a></span>
545      </span>
546    </div>
547</div>
548
549</div>
550
551      </turbo-frame>
552      </div>
553    </nav>
554  </div>
555</div>
556
557    </div>
558
559    <div class="md:px-10">
560      <div class="w-40 h-6" data-nosnippet>
561  <a aria-label="Framework homepage" title="Framework Home" class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/">
562        <img alt="Framework logo" width="160" height="21" class="filter-invert" src="/assets/logo-c1ae78bbc66fed63092c4b9c39c0258f27ab7e2938efc03883bb1a5c73f1a632.svg" />
563</a></div>
564
565    </div>
566
567    <div
568  class="
569    sr-only focus-within:not-sr-only focus-within:absolute focus-within:top-full
570    focus-within:z-[70] focus-within:whitespace-nowrap
571    focus-within:mt-[20px] sm:focus-within:left-6 md:focus-within:left-10
572  ">
573  <a class="focus:accent-blue whitespace-nowrap block flex justify-center items-center relative transition-colors duration-300 ease-in-out hover:no-underline font-semibold text-sm focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-2 focus-visible:outline-accent-blue group rounded-full max-w-max min-w-min bg-white text-black hover:bg-surface-hover group no-underline" data-turbo="false" href="#main-content"><span class="flex justify-center items-center py-2 px-4 space-x-3 rounded-full"><span>
574    Skip to main content
575</span></span></a></div>
576
577
578    <div class="hidden xl:flex h-full w-full md:px-4">
579      <div class="hidden w-full h-full my-auto lg:flex justify-between">
580  <div class="lg:flex">
581        <nav class="hero-component hidden lg:flex group"
582     data-test-id="desktop-hero-navigation"
583     tabindex="0"
584     aria-label="Framework Desktop"
585     data-controller='containers--navigations--hero-component--hero-component'
586     data-containers--navigations--hero-component--hero-component-containers--header-component--header-outlet='[data-controller~="containers--header-component--header"]'
587     data-action='mouseover->containers--navigations--hero-component--hero-component#toggleBodyOverflow mouseleave->containers--navigations--hero-component--hero-component#restore focusout->containers--navigations--hero-component--hero-component#restore keydown.esc@window->containers--navigations--hero-component--hero-component#dismiss'>
588  <span class="xl:flex xl:items-center xl:px-3 h-full font-medium" data-test-id="desktop-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" tabindex="-1" aria-label="Framework Desktop" aria-hidden="true" href="/desktop">Desktop</a></span>
589
590  <div class="absolute inset-x-0 hidden group-hover:block group-focus-within:block group-focus:block" data-containers--navigations--hero-component--hero-component-target='heroContainer'>
591    <div class="fixed w-full h-screen bg-black opacity-50 -z-10 left-0 hidden group-focus-within:block group-focus:block group-hover:block pointer-events-none menu-overlay"></div>
592    <div class="bg-surface py-10 text-dark text-sm z-20 w-screen hero-nav">
593      <div class="container flex gap-12">
594          <div class="w-52">
595            <a tabindex="-1" aria-hidden="true" class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/desktop">
596              <img alt="Framework Desktop" width="200" height="200" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/3bay32p8nnpegez5s3tdzor1dhwo" />
597</a>          </div>
598          <div class="py-4">
599            <div class="flex flex-col gap-5">
600              <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline hover:underline" aria-label="Learn more about Desktop" href="/desktop">
601                <span class="text-xl font-bold">Desktop</span>
602</a>              <div class="flex flex-col gap-2">
603                  <span class="hover:underline text-lg">
604                    <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Specs for Framework Desktop" href="/desktop?tab=specs">Specs</a>
605                  </span>
606                  <span class="hover:underline text-lg">
607                    <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop parts for Framework Desktop" href="/marketplace?compatibility%5B%5D=desktop_amd_ryzen_ai_max300&amp;compatibility%5B%5D=desktop_amd_ryzen_ai_max400">Shop parts</a>
608                  </span>
609                  <span class="hover:underline text-lg">
610                    <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Downloads and guides for Framework Desktop" href="/desktop-support">Downloads and guides</a>
611                  </span>
612                  <span class="hover:underline text-lg">
613                    <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" aria-label="Configure Framework Desktop Now" href="/products/desktop-diy-amd-aimax400/configuration/new">Configure now</a>
614                  </span>
615              </div>
616            </div>
617          </div>
618      </div>
619    </div>
620  </div>
621</nav>
622
623        <nav class="hero-component hidden lg:flex group"
624     data-test-id="laptop-12-hero-navigation"
625     tabindex="0"
626     aria-label="Framework Laptop 12"
627     data-controller='containers--navigations--hero-component--hero-component'
628     data-containers--navigations--hero-component--hero-component-containers--header-component--header-outlet='[data-controller~="containers--header-component--header"]'
629     data-action='mouseover->containers--navigations--hero-component--hero-component#toggleBodyOverflow mouseleave->containers--navigations--hero-component--hero-component#restore focusout->containers--navigations--hero-component--hero-component#restore keydown.esc@window->containers--navigations--hero-component--hero-component#dismiss'>
630  <span class="xl:flex xl:items-center xl:px-3 h-full font-medium" data-test-id="laptop 12-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" tabindex="-1" aria-label="Framework Laptop 12" aria-hidden="true" href="/laptop12">Laptop 12</a></span>
631
632  <div class="absolute inset-x-0 hidden group-hover:block group-focus-within:block group-focus:block" data-containers--navigations--hero-component--hero-component-target='heroContainer'>
633    <div class="fixed w-full h-screen bg-black opacity-50 -z-10 left-0 hidden group-focus-within:block group-focus:block group-hover:block pointer-events-none menu-overlay"></div>
634    <div class="bg-surface py-10 text-dark text-sm z-20 w-screen hero-nav">
635      <div class="container flex gap-12">
636          <div class="w-52">
637            <a tabindex="-1" aria-hidden="true" class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/laptop12">
638              <img alt="Framework Laptop 12" width="200" height="200" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/resqjawk6ah239m1zi4o5sddtftm" />
639</a>          </div>
640          <div class="py-4">
641            <div class="flex flex-col gap-5">
642              <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline hover:underline" aria-label="Learn more about Laptop 12" href="/laptop12">
643                <span class="text-xl font-bold">Laptop 12</span>
644</a>              <div class="flex flex-col gap-2">
645                  <span class="hover:underline text-lg">
646                    <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Specs for Framework Laptop 12" href="/laptop12?tab=specs">Specs</a>
647                  </span>
648                  <span class="hover:underline text-lg">
649                    <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop parts for Framework Laptop 12" href="/marketplace?compatibility%5B%5D=laptop12_intel_core_13th_gen&amp;compatibility%5B%5D=laptop12_intel_core_series_3">Shop parts</a>
650                  </span>
651                  <span class="hover:underline text-lg">
652                    <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Downloads and guides for Framework Laptop 12" href="/laptop12-support">Downloads and guides</a>
653                  </span>
654                  <span class="hover:underline text-lg">
655                    <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" aria-label="Configure Framework Laptop 12 Now" href="/products/laptop12-diy-intel-series3/configuration/new">Configure now</a>
656                  </span>
657              </div>
658            </div>
659          </div>
660      </div>
661    </div>
662  </div>
663</nav>
664
665        <nav class="hero-component hidden lg:flex group"
666     data-test-id="laptop-13-hero-navigation"
667     tabindex="0"
668     aria-label="Framework Laptop 13"
669     data-controller='containers--navigations--hero-component--hero-component'
670     data-containers--navigations--hero-component--hero-component-containers--header-component--header-outlet='[data-controller~="containers--header-component--header"]'
671     data-action='mouseover->containers--navigations--hero-component--hero-component#toggleBodyOverflow mouseleave->containers--navigations--hero-component--hero-component#restore focusout->containers--navigations--hero-component--hero-component#restore keydown.esc@window->containers--navigations--hero-component--hero-component#dismiss'>
672  <span class="xl:flex xl:items-center xl:px-3 h-full font-medium" data-test-id="laptop 13-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" tabindex="-1" aria-label="Framework Laptop 13" aria-hidden="true" href="/laptop13">Laptop 13</a></span>
673
674  <div class="absolute inset-x-0 hidden group-hover:block group-focus-within:block group-focus:block" data-containers--navigations--hero-component--hero-component-target='heroContainer'>
675    <div class="fixed w-full h-screen bg-black opacity-50 -z-10 left-0 hidden group-focus-within:block group-focus:block group-hover:block pointer-events-none menu-overlay"></div>
676    <div class="bg-surface py-10 text-dark text-sm z-20 w-screen hero-nav">
677      <div class="container flex gap-12">
678            <div class="flex gap-8">
679              <div class="w-40">
680                <a tabindex="-1" aria-hidden="true" class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/laptop13pro">
681                  <img alt="Framework Laptop 13 Pro" width="160" height="160" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/ix6yqbgw7m5tidfjbxjo3ke86scu" />
682</a>              </div>
683              <div class="py-4">
684                <div class="flex flex-col gap-5">
685                  <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline hover:underline" aria-label="Learn more about Laptop 13 Pro" href="/laptop13pro">
686                    <span class="text-xl font-bold">Laptop 13 Pro</span>
687</a>                  <div class="flex flex-col gap-2">
688                      <span class="hover:underline text-lg">
689                        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Specs for Laptop 13 Pro" href="/laptop13pro?tab=specs">Specs</a>
690                      </span>
691                      <span class="hover:underline text-lg">
692                        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop parts for Laptop 13 Pro" href="/marketplace?compatibility%5B%5D=laptop13pro_amd_ryzen_ai300_series&amp;compatibility%5B%5D=laptop13pro_intel_core_ultra_series_3">Shop parts</a>
693                      </span>
694                      <span class="hover:underline text-lg">
695                        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Downloads and guides for Laptop 13 Pro" href="/laptop13pro-support">Downloads and guides</a>
696                      </span>
697                      <span class="hover:underline text-lg">
698                        <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" aria-label="Configure Laptop 13 Pro Now" href="/products/laptop13pro-diy-intel-ultra-3/configuration/new">Configure now</a>
699                      </span>
700                  </div>
701                </div>
702              </div>
703            </div>
704            <div class="flex gap-8">
705              <div class="w-40">
706                <a tabindex="-1" aria-hidden="true" class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/laptop13">
707                  <img alt="Framework Laptop 13" width="160" height="160" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/6ou8q6io9z68ecbjuc0se3qxxbiw" />
708</a>              </div>
709              <div class="py-4">
710                <div class="flex flex-col gap-5">
711                  <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline hover:underline" aria-label="Learn more about Laptop 13" href="/laptop13">
712                    <span class="text-xl font-bold">Laptop 13</span>
713</a>                  <div class="flex flex-col gap-2">
714                      <span class="hover:underline text-lg">
715                        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Specs for Laptop 13" href="/laptop13?tab=specs">Specs</a>
716                      </span>
717                      <span class="hover:underline text-lg">
718                        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop parts for Laptop 13" href="/marketplace?compatibility%5B%5D=laptop13_intel_core_11th_gen&amp;compatibility%5B%5D=laptop13_intel_core_12th_gen&amp;compatibility%5B%5D=chromebook&amp;compatibility%5B%5D=%09laptop13_intel_core_13th_gen&amp;compatibility%5B%5D=%09laptop13_amd_ryzen_7040_series&amp;compatibility%5B%5D=laptop13_intel_core_ultra_series_1&amp;compatibility%5B%5D=laptop13_amd_ryzen_ai300_series">Shop parts</a>
719                      </span>
720                      <span class="hover:underline text-lg">
721                        <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Downloads and guides for Laptop 13" href="/laptop13-support">Downloads and guides</a>
722                      </span>
723                      <span class="hover:underline text-lg">
724                        <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" aria-label="Configure Laptop 13 Now" href="/products/laptop13-diy-amd-ai300/configuration/new">Configure now</a>
725                      </span>
726                  </div>
727                </div>
728              </div>
729            </div>
730      </div>
731    </div>
732  </div>
733</nav>
734
735        <nav class="hero-component hidden lg:flex group"
736     data-test-id="laptop-16-hero-navigation"
737     tabindex="0"
738     aria-label="Framework Laptop 16"
739     data-controller='containers--navigations--hero-component--hero-component'
740     data-containers--navigations--hero-component--hero-component-containers--header-component--header-outlet='[data-controller~="containers--header-component--header"]'
741     data-action='mouseover->containers--navigations--hero-component--hero-component#toggleBodyOverflow mouseleave->containers--navigations--hero-component--hero-component#restore focusout->containers--navigations--hero-component--hero-component#restore keydown.esc@window->containers--navigations--hero-component--hero-component#dismiss'>
742  <span class="xl:flex xl:items-center xl:px-3 h-full font-medium" data-test-id="laptop 16-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" tabindex="-1" aria-label="Framework Laptop 16" aria-hidden="true" href="/laptop16">Laptop 16</a></span>
743
744  <div class="absolute inset-x-0 hidden group-hover:block group-focus-within:block group-focus:block" data-containers--navigations--hero-component--hero-component-target='heroContainer'>
745    <div class="fixed w-full h-screen bg-black opacity-50 -z-10 left-0 hidden group-focus-within:block group-focus:block group-hover:block pointer-events-none menu-overlay"></div>
746    <div class="bg-surface py-10 text-dark text-sm z-20 w-screen hero-nav">
747      <div class="container flex gap-12">
748          <div class="w-52">
749            <a tabindex="-1" aria-hidden="true" class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/laptop16">
750              <img alt="Framework Laptop 16" width="200" height="200" class="object-cover rounded-2xl" loading="lazy" src="https://static.frame.work/2go7hla66f448kffzjxj6zvwtx84" />
751</a>          </div>
752          <div class="py-4">
753            <div class="flex flex-col gap-5">
754              <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface no-underline hover:underline" aria-label="Learn more about Laptop 16" href="/laptop16">
755                <span class="text-xl font-bold">Laptop 16</span>
756</a>              <div class="flex flex-col gap-2">
757                  <span class="hover:underline text-lg">
758                    <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Specs for Framework Laptop 16" href="/laptop16?tab=specs">Specs</a>
759                  </span>
760                  <span class="hover:underline text-lg">
761                    <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop parts for Framework Laptop 16" href="/marketplace?compatibility%5B%5D=laptop16_amd_ryzen_7040_series&amp;compatibility%5B%5D=laptop16_amd_ryzen_ai300_series">Shop parts</a>
762                  </span>
763                  <span class="hover:underline text-lg">
764                    <a data-test-id="-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Downloads and guides for Framework Laptop 16" href="/laptop16-support">Downloads and guides</a>
765                  </span>
766                  <span class="hover:underline text-lg">
767                    <a data-test-id="-product-links-navigation" class="focus:accent-blue font-bold w-full h-full block flex items-center" aria-label="Configure Framework Laptop 16 Now" href="/products/laptop16-diy-amd-ai300/configuration/new">Configure now</a>
768                  </span>
769              </div>
770            </div>
771          </div>
772      </div>
773    </div>
774  </div>
775</nav>
776
777        <nav class="dropdown-component hidden lg:flex group"
778     data-test-id="marketplace-dropdown-navigation"
779     tabindex="0"
780     aria-label="Shop all"
781     data-controller='containers--navigations--dropdown-component--dropdown-component'
782     data-containers--navigations--dropdown-component--dropdown-component-containers--header-component--header-outlet='[data-controller~="containers--header-component--header"]'
783     data-action='mouseover->containers--navigations--dropdown-component--dropdown-component#toggleBodyOverflow mouseleave->containers--navigations--dropdown-component--dropdown-component#restore focusout->containers--navigations--dropdown-component--dropdown-component#restore keydown.esc@window->containers--navigations--dropdown-component--dropdown-component#dismiss'>
784  <span class="xl:flex xl:items-center xl:px-3 h-full font-medium" data-test-id="shop all-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" aria-label="Shop all" tabindex="-1" aria-hidden="true" href="/marketplace">Shop all</a></span>
785
786  <div class="absolute inset-x-0 hidden group-hover:block group-focus-within:block group-focus:block" data-containers--navigations--dropdown-component--dropdown-component-target='dropdownContainer'>
787    <div class="fixed w-full h-screen bg-black opacity-50 -z-10 left-0 hidden group-focus-within:block group-focus:block group-hover:block pointer-events-none menu-overlay"></div>
788    <div class="bg-surface py-10 text-dark text-sm z-20 w-screen dropdown-nav">
789      <div class="hidden container lg:grid grid-cols-12 gap-4">
790        <div class="relative col-start-2 col-span-11 grid grid-cols-10 gap-x-6">
791            <div class="mt-8 col-start-1 col-span-6 flex justify-between max-h-64">
792                  <div class="flex flex-col flex-wrap w-full">
793                      <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
794    <a data-test-id="marketplace-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="View all Framework Products in Marketplace" href="/marketplace">View All</a>
795  </div>
796  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
797    <div class="h-80 w-80">
798          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/breo3govpykzt0fm3ibqtdaf6kqm 128w, https://static.frame.work/gmrc3avian0n6k6ehzotmga08tg9 256w, https://static.frame.work/uy8vi3qo6oxvotgip0dcv4ea5806 876w" sizes="20rem" alt="View all" src="https://static.frame.work/uy8vi3qo6oxvotgip0dcv4ea5806" />
799
800    </div>
801  </div>
802  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
803    <a data-test-id="outlet-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Framework Outlet Products in Marketplace" href="https://frame.work/outlet">Outlet</a>
804  </div>
805  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
806    <div class="h-80 w-80">
807        <img alt="Shop Outlet" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="/assets/navigation/outlet-ae7f9d1174add5b0385e42789a1a12e241509b982e4ac54377d2025
807761a6cba9.jpg" />
808    </div>
809  </div>
810  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
811    <a data-test-id="framework-laptop-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Framework Laptop" href="/marketplace/laptops">Framework Laptop</a>
812  </div>
813  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
814    <div class="h-80 w-80">
815          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/qa1hixlvfc41sd8aeqb6uuqmqeda 128w, https://static.frame.work/0yp7skhm7ec5zv0lr816u5im0p42 256w, https://static.frame.work/63uhegemkawl4d27ebo6xaz6osrk 876w" sizes="20rem" alt="Framework laptops" src="https://static.frame.work/63uhegemkawl4d27ebo6xaz6osrk" />
816
817    </div>
818  </div>
819  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
820    <a data-test-id="framework-desktop-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Framework Desktop" href="/marketplace/desktops">Framework Desktop</a>
821  </div>
822  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
823    <div class="h-80 w-80">
824          <img width="8192" height="5464" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/ebjvyobjry5n9k141epda4whmmnc 128w, https://static.frame.work/l97qtqxy5z23rwg69rd00p063fji 256w, https://static.frame.work/bv87cp0oj6mkol1615qhj23iwar5 1024w" sizes="20rem" alt="" src="https://static.frame.work/bv87cp0oj6mkol1615qhj23iwar5" />
825
826    </div>
827  </div>
828  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
829    <a data-test-id="mainboards-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Mainboards" href="/marketplace/mainboards">Mainboards</a>
830  </div>
831  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
832    <div class="h-80 w-80">
833          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/zuhp8lathnvg67y0lz7lnfuuln4h 128w, https://static.frame.work/zallvs4xt7jeo4cokoaxzi0106f2 256w, https://static.frame.work/wyfhy06qvn80px1zw8ka618be7xd 876w" sizes="20rem" alt="Mainboards" src="https://static.frame.work/wyfhy06qvn80px1zw8ka618be7xd" />
834
835    </div>
836  </div>
837  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
838    <a data-test-id="expansion-cards-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Expansion Cards" href="/marketplace/expansion-cards">Expansion Cards</a>
839  </div>
840  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
841    <div class="h-80 w-80">
842          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/p460hzvex2k0x704g4t9wcrhj29q 128w, https://static.frame.work/smtxl4nqnhb7bpuqdk7xt3ldy6ai 256w, https://static.frame.work/eim1sw277dv3w4iqpffoy6h1utam 876w" sizes="20rem" alt="Expansion Cards" src="https://static.frame.work/eim1sw277dv3w4iqpffoy6h1utam" />
843
844    </div>
845  </div>
846  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
847    <a data-test-id="memory-storage-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Memory &amp; Storage" href="/marketplace/memory-storage">Memory &amp; Storage</a>
848  </div>
849  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
850    <div class="h-80 w-80">
851          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/my3n168qiiqwgzkdi7jj2udb6jrl 128w, https://static.frame.work/g9i51hagfvm7fukpliy1twt28ntf 256w, https://static.frame.work/cl
851s7ftzzgsxlgu4ns5otpdsz2w6f 876w" sizes="20rem" alt="Memory &amp; Storage" src="https://static.frame.work/cls7ftzzgsxlgu4ns5otpdsz2w6f" />
852
853    </div>
854  </div>
855  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
856    <a data-test-id="keyboards-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Keyboards" href="/marketplace/keyboards">Keyboards</a>
857  </div>
858  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
859    <div class="h-80 w-80">
860          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/07zvkje2k86q867fhr3kzikmwmpp 128w, https://static.frame.work/y9nuwnvv7sbz2v08dlg8sikaaulh 256w, https://static.frame.work/qe64aa2rdiqd9x7alqzmp6dtskl8 876w" sizes="20rem" alt="Keyboards" src="https://static.frame.work/qe64aa2rdiqd9x7alqzmp6dtskl8" />
861
862    </div>
863  </div>
864  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
865    <a data-test-id="parts-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Parts" href="/marketplace/parts">Parts</a>
866  </div>
867  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
868    <div class="h-80 w-80">
869          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/h4bzsern2fqbt577q17y6x6j48yb 128w, https://static.frame.work/z1dkeugnpnyfouf2yi4v61zg1mwc 256w, https://static.frame.work/s1ke4037ad457jt7vhub1dd5sbl7 876w" sizes="20rem" alt="Parts" src="https://static.frame.work/s1ke4037ad457jt7vhub1dd5sbl7" />
870
871    </div>
872  </div>
873  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
874    <a data-test-id="customization-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Customization" href="/marketplace/customization">Customization</a>
875  </div>
876  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
877    <div class="h-80 w-80">
878          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/laf439m52akefxyt7hc72nd67ac3 128w, https://static.frame.work/6ntkn61giz0cv7l7qucl2v2rmc9w 256w, https://static.frame.work/i9qbpu6rnmlz2vzz5u9i1ostrqg2 876w" sizes="20rem" alt="Customization" src="https://static.frame.work/i9qbpu6rnmlz2vzz5u9i1ostrqg2" />
879
880    </div>
881  </div>
882  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
883    <a data-test-id="tools-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Tools" href="/marketplace/tools">Tools</a>
884  </div>
885  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
886    <div class="h-80 w-80">
887          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/r6rh5u1aqbjk5u74vjwb8v2ihh8u 128w, https://static.frame.work/f7knynitlvzja9l1g0ghzgu8h4zl 256w, https://static.frame.work/zyls89jks9y637seuucxekeocixp 876w" sizes="20rem" alt="Tools" src="https://static.frame.work/zyls89jks9y637seuucxekeocixp" />
888
889    </div>
890  </div>
891  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
892    <a data-test-id="software-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Software" href="/marketplace/software">Software</a>
893  </div>
894  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
895    <div class="h-80 w-80">
896          <img width="876" height="876" loading="lazy" class="object-cover w-full h-full" srcset="https://static.frame.work/unya82ieiivyast6ptonpeia0d4b 128w, https://static.frame.work/f6t8jtyy4ichiz0fob8zsony0a2t 256w, https://static.frame.work/x80ojziivrj8kgqtl6k1sg1xfy8f 876w" sizes="20rem" alt="Software" src="https://static.frame.work/x80ojziivrj8kgqtl6k1sg1xfy8f" />
897
898    </div>
899  </div>
900  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
901    <a data-test-id="merch-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Shop Merch" href="/marketplace/merch">Merch</a>
902  </div>
903  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
904    <div class="h-80 w-80">
905        
906    </div>
907  </div>
908
909                  </div>
910            </div>
911          <div class="h-80 w-80 col-start-7 col-span-4 invisible"></div>
912        </div>
913      </div>
914    </div>
915  </div>
916</nav>
917
918  </div>
919
920  <div class="lg:flex">
921        <nav class="dropdown-component hidden lg:flex group"
922     data-test-id="support-dropdown-navigation"
923     tabindex="0"
924     aria-label="Support"
925     data-controller='containers--navigations--dropdown-component--dropdown-component'
926     data-containers--navigations--dropdown-component--dropdown-component-containers--header-component--header-outlet='[data-controller~="containers--header-component--header"]'
927     data-action='mouseover->containers--navigations--dropdown-component--dropdown-component#toggleBodyOverflow mouseleave->containers--navigations--dropdown-component--dropdown-component#restore focusout->containers--navigations--dropdown-component--dropdown-component#restore keydown.esc@window->containers--navigations--dropdown-component--dropdown-component#dismiss'>
928  <span class="xl:flex xl:items-center xl:px-3 h-full font-medium" data-test-id="support-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" aria-label="Support" tabindex="-1" aria-hidden="true" href="/support">Support</a></span>
929
930  <div class="absolute inset-x-0 hidden group-hover:block group-focus-within:block group-focus:block" data-containers--navigations--dropdown-component--dropdown-component-target='dropdownContainer'>
931    <div class="fixed w-full h-screen bg-black opacity-50 -z-10 left-0 hidden group-focus-within:block group-focus:block group-hover:block pointer-events-none menu-overlay"></div>
932    <div class="bg-surface py-10 text-dark text-sm z-20 w-screen dropdown-nav">
933      <div class="hidden container lg:grid grid-cols-12 gap-4">
934        <div class="relative col-start-2 col-span-11 grid grid-cols-10 gap-x-6">
935            <div class="mt-8 col-start-1 col-span-6 flex justify-between max-h-64">
936                  <div class="flex flex-col flex-wrap w-full">
937                      <span class="font-bold h-12 flex items-center">Downloads and guides</span>
938                      <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
939    <a data-test-id="desktop-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Downloads and guides for Framework Desktop" href="/desktop-support">Framework Desktop</a>
940  </div>
941  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
942    <div class="h-80 w-80">
943        <img alt="Framework Desktop" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="https://static.frame.work/3bay32p8nnpegez5s3tdzor1dhwo" />
944    </div>
945  </div>
946  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
947    <a data-test-id="laptop-12-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Downloads and guides for Framework Laptop 12" href="/laptop12-support">Framework Laptop 12</a>
948  </div>
949  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
950    <div class="h-80 w-80">
951        <img alt="Framework Laptop 12" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="https://static.frame.work/resqjawk6ah239m1zi4o5sddtftm" />
952    </div>
953  </div>
954  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
955    <a data-test-id="laptop-13-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Downloads and guides for Framework Laptop 13" href="/laptop13-support">Framework Laptop 13</a>
956  </div>
957  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
958    <div class="h-80 w-80">
959        <img alt="Framework Laptop 13" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="https://static.frame.work/6ou8q6io9z68ecbjuc0se3qxxbiw" />
960    </div>
961  </div>
962  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
963    <a data-test-id="laptop-16-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Downloads and guides for Framework Laptop 16" href="/laptop16-support">Framework Laptop 16</a>
964  </div>
965  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
966    <div class="h-80 w-80">
967        <img alt="Framework Laptop 16" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="https://static.frame.work/2go7hla66f448kffzjxj6zvwtx84" />
968    </div>
969  </div>
970
971                  </div>
972                  <div class="flex flex-col flex-wrap w-full">
973                      <span class="font-bold h-12 flex items-center">Resources</span>
974                      <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
975    <a data-test-id="linux-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/linux">Linux on the Framework Laptop</a>
976  </div>
977  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
978    <div class="h-80 w-80">
979        <img alt="Linux" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="/assets/navigation/linux-f01c5b237e3686f2b53e424d14c00b0306c1994306797b704b546a56abe6bfd1.jpg" />
980    </div>
981  </div>
982  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
983    <a data-test-id="community_forum-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Community Forum" href="https://community.frame.work">Community Forum</a>
984  </div>
985  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
986    <div class="h-80 w-80">
987        <img alt="Community Forum" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="/assets/navigation/community_forum-69a1423ceddf67e31e24bd65840aef5bdf245077f2ec45431fb80ebaa8968bae.jpg" />
988    </div>
989  </div>
990  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
991    <a data-test-id="knowledge_base-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" aria-label="Knowledge Base" href="https://knowledgebase.frame.work">Knowledge Base</a>
992  </div>
993  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
994    <div class="h-80 w-80">
995        <img alt="Knowledge Base" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="/assets/navigation/knowledge_base-e10148f23dd1fad6d9b99f43905b0ccf3b454b4d57e8a9a91b518f64f916e1ef.jpg" />
996    </div>
997  </div>
998
999                  </div>
1000                  <div class="flex flex-col flex-wrap w-full">
1001                      <span class="font-bold h-12 flex items-center">Contact Support</span>
1002                      <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
1003    <a data-test-id="submit_a_support_request-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="https://knowledgebase.frame.work/contact/contact-us-rJfw7Ryglx">Submit a support request</a>
1004  </div>
1005  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
1006    <div class="h-80 w-80">
1007        <img alt="Submit a support request" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="/assets/navigation/submit_a_support_request-b4334789979a36f3f59fc685ae469d087b17abf53cd4c0400acc476360a0c9ea.jpg" />
1008    </div>
1009  </div>
1010
1011                  </div>
1012            </div>
1013          <div class="h-80 w-80 col-start-7 col-span-4 invisible"></div>
1014        </div>
1015      </div>
1016    </div>
1017  </div>
1018</nav>
1019
1020        <span class="xl:flex xl:items-center xl:px-3 h-full font-medium" data-test-id="for business-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" tabindex="0" aria-label="Framework for Business" href="/framework-for-business">For Business</a></span>
1021        <nav class="dropdown-component hidden lg:flex group"
1022     data-test-id="about-dropdown-navigation"
1023     tabindex="0"
1024     aria-label="About"
1025     data-controller='containers--navigations--dropdown-component--dropdown-component'
1026     data-containers--navigations--dropdown-component--dropdown-component-containers--header-component--header-outlet='[data-controller~="containers--header-component--header"]'
1027     data-action='mouseover->containers--navigations--dropdown-component--dropdown-component#toggleBodyOverflow mouseleave->containers--navigations--dropdown-component--dropdown-component#restore focusout->containers--navigations--dropdown-component--dropdown-component#restore keydown.esc@window->containers--navigations--dropdown-component--dropdown-component#dismiss'>
1028  <span class="xl:flex xl:items-center xl:px-3 h-full font-medium" data-test-id="about-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" aria-label="About Framework" tabindex="-1" aria-hidden="true" href="/about">About</a></span>
1029
1030  <div class="absolute inset-x-0 hidden group-hover:block group-focus-within:block group-focus:block" data-containers--navigations--dropdown-component--dropdown-component-target='dropdownContainer'>
1031    <div class="fixed w-full h-screen bg-black opacity-50 -z-10 left-0 hidden group-focus-within:block group-focus:block group-hover:block pointer-events-none menu-overlay"></div>
1032    <div class="bg-surface py-10 text-dark text-sm z-20 w-screen dropdown-nav">
1033      <div class="hidden container lg:grid grid-cols-12 gap-4">
1034        <div class="relative col-start-2 col-span-11 grid grid-cols-10 gap-x-6">
1035            <div class="mt-8 col-start-1 col-span-6 flex justify-between max-h-64">
1036                  <div class="flex flex-col flex-wrap w-full">
1037                      <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
1038    <a data-test-id="about_framework-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/about">About Framework</a>
1039  </div>
1040  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
1041    <div class="h-80 w-80">
1042        <img alt="About" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="/assets/navigation/about_framework-fd94fd2bdf193057f7717c93993efff017f92b7761b17286cea9cf7ec9fe816f.jpg" />
1043    </div>
1044  </div>
1045  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
1046    <a data-test-id="sustainability-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/sustainability">Sustainability</a>
1047  </div>
1048  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
1049    <div class="h-80 w-80">
1050        <img alt="Sustainability" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="/assets/navigation/sustainability-54b107ba035a028505ffdbb681044f066aa3207b0eae8475bf955e4a281de579.jpg" />
1051    </div>
1052  </div>
1053  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
1054    <a data-test-id="our_blog-product-links-navigation" class="focus:accent-blue w-full h-full block flex items-center" href="/blog">Our Blog</a>
1055  </div>
1056  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
1057    <div class="h-80 w-80">
1058        <img alt="20260930 - Framework Desktop 192GB" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="https://images.prismic.io/frameworkmarketplace/hnggiY8rvtkGQI1p_20260xxx-FrameworkDesktop192GB.png?auto=format%2Ccompress&amp;fit=crop&amp;ar=square&amp;h=320&amp;w=320" />
1059    </div>
1060  </div>
1061  <div class="dropdown-link cursor-pointer transition-color duration-200 hover:underline h-12">
1062    <span class="flex flex-row items-center space-x-1.5 h-full w-full">
1063  <a target="_blank" rel="noopener" title="We&#39;re Hiring" class="focus:accent-blue" href="https://jobs.frame.work">We&#39;re Hiring</a>
1064  <span class="rounded-full flex items-center justify-center bg-primary h-5 w-5 text-xs">2</span>
1065</span>
1066
1067  </div>
1068  <div class="absolute dropdown-preview opacity-0 transition-opacity duration-200 right-0 top-0 max-w-full">
1069    <div class="h-80 w-80">
1070        <img alt="Hiring" width="320" height="320" class="object-cover w-full h-full" loading="lazy" src="/assets/navigation/we_are_hiring-c2db61fd4a38ce9f05664d27d2072b636a2ae48b639f8c1ae8118074e605b19e.jpg" />
1071    </div>
1072  </div>
1073
1074                  </div>
1075            </div>
1076          <div class="h-80 w-80 col-start-7 col-span-4 invisible"></div>
1077        </div>
1078      </div>
1079    </div>
1080  </div>
1081</nav>
1082
1083  </div>
1084</div>
1085
1086    </div>
1087
1088    <div class="flex h-full gap-x-4 items-center sm:px-6 md:px-0 xl:px-10 xl:border-l">
1089        <div class="hidden lg:flex h-full group items-center xl:relative">
1090          <turbo-frame
1091            id="profile-menu"
1092            target="_top"
1093            class="inline">
1094            <div data-test-id="profile-menu" class="hidden lg:flex h-full group xl:relative" tabindex="0"
1095  data-controller='containers--navigations--profile-component--profile'
1096  data-action='mouseleave->containers--navigations--profile-component--profile#restore focusout->containers--navigations--profile-component--profile#restore keydown.esc@window->containers--navigations--profile-component--profile#dismiss'>
1097  <input id="profile_desktop_menu" class="hidden" type="checkbox"
1098    data-containers--navigations--profile-component--profile-target='toggle'
1099    data-action='change->containers--navigations--profile-component--profile#reopen'>
1100
1101  <label data-test-id="profile-icon" for="profile_desktop_menu"
1102    class="account-icon cursor-pointer leading-none z-20 primary-on-hover flex items-center group-focus:text-primary group-focus-within:text-primary group-hover:text-primary"
1103    title="Open menu">
1104    <span class="sr-only">
1104Open menu</span>
1105    <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true">account_circle</span>
1106  </label>
1107
1108  <label for="profile_desktop_menu" class="profile-desktop-menu-overlay inset-0 h-screen bg-transparent"></label>
1109  <div class="profile-desktop-menu z-10 group-hover:flex group-focus:flex group-focus-within:flex flex-col pt-3 space-y-6 absolute top-12 right-0 xl:right-1/2 xl:translate-x-1/2 w-60 bg-tertiary-light text-black text-xs shadow-md"
1110    data-containers--navigations--profile-component--profile-target='menu'>
1111      <div class="hidden p-6 pt-4 lg:flex flex-col items-center text-center">
1112    <a class="focus:accent-blue whitespace-nowrap block flex justify-center items-center relative transition-colors duration-300 ease-in-out hover:no-underline font-semibold focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-2 focus-visible:outline-accent-blue group rounded-full max-w-max min-w-min bg-brand-primary text-on-primary hover:bg-brand-primary-hover active:bg-brand-primary-pressed focus:outline-accent-blue group no-underline" data-test-id="sign-in-button" href="/login"><span class="flex justify-center items-center py-2 px-4 space-x-3 rounded-full"><span>Sign in</span></span></a>
1113
1114    <p class="mt-3">Don&#39;t have an account?</p>
1115    <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/signup">Create your account</a>
1116</div>
1117
1118<div class="lg:hidden py-3">
1119    <a class="focus:accent-blue whitespace-nowrap block flex justify-center items-center relative transition-colors duration-300 ease-in-out hover:no-underline font-semibold focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-2 focus-visible:outline-accent-blue group rounded-full max-w-max min-w-min bg-black text-white border-white hover:bg-secondary-hover active:bg-secondary-pressed focus:bg-accent-dark group no-underline" href="/login"><span class="flex justify-center items-center py-2 px-4 space-x-3 rounded-full"><span>Sign in</span></span></a>
1120    <div class="mt-3">
1121      or
1122      <span class="font-semibold display-inline">
1123        <span class="xl:flex xl:items-center xl:px-3 h-full" data-test-id="create account-menu-link"><a class="focus:accent-blue cursor-pointer xl:link-hover hover:no-underline flex h-full items-center" href="/signup">Create account</a></span>
1124      </span>
1125    </div>
1126</div>
1127
1128  </div>
1129</div>
1130
1131          </turbo-frame>
1132        </div>
1133
1134        <div
1135          class="relative flex items-center space-x-0.5"
1136          data-test-id="bag-icon">
1137          <a aria-label="View Cart and Checkout" class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/cart">
1138            <span class="primary-on-hover"><span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true">local_mall</span></span>
1139</a>          <span
1140            class="
1141              absolute top-0 right-0 translate-x-1/4 xl:translate-x-1/2
1142              -translate-y-1/4 xl:-translate-y-1/2
1143            ">
1144            <turbo-frame id="cart-items-count"></turbo-frame>
1145          </span>
1146        </div>
1147
1148      <div class="hidden xl:block">
1149        <div class="hidden lg:block py-4">
1150  <a aria-label="Change Location and Language settings" data-turbo="false" class="focus:accent-blue" href="/locale/edit">
1151      <span class="flex items-center gap-x-2 px-3 py-2 rounded-full font-medium bg-light">
1152        <span class="w-6">
1153          <img alt="United States" width="24" height="17" loading="lazy" src="/images/flags/us.svg" />
1154        </span>
1155        USD
1156    </span>
1157</a></div>
1158
1159<div class="lg:hidden py-4">
1160<a data-turbo="false" class="focus:accent-blue" href="/locale/edit">
1161    <span class="flex items-center space-x-2">
1162      <span class="w-6">
1163        <img alt="United States" width="24" height="17" loading="lazy" src="/images/flags/us.svg" />
1164      </span>
1165      <span>
1166        USD
1167      </span>
1168  </span>
1169</a></div>
1170
1171      </div>
1172
1173      
1174    </div>
1175  </div>
1176</header>
1177
1178      <main id="main-content" tabindex="-1" class="focus:outline-none">
1179        <div id="dynamic-messages" class="fixed z-50 w-full">
1180          <turbo-frame id="flash-messages" src="/personalization"></turbo-frame>
1181        </div>
1182        <div
1183          id="snackbar-container"
1184          class="
1185            fixed right-0 z-50 flex flex-col mx-4 overflow-hidden lg:mx-0
1186            lg:right-24 top-24 gap-y-4
1187          "></div>
1188        <div id="snackbar-template-container" class="hidden">
1189          <div class="snackbar p-2 lg:p-3 max-w-sm flex flex-row justify-between rounded-md shadow-xs animate-slide-in-from-right "
1190     data-test-id="snackbar"
1191     data-controller='elements--snackbar-component--close'
1192     data-action='keydown.esc->elements--snackbar-component--close#closeMessage snackbar-component:dismiss->elements--snackbar-component--close#closeMessage'>
1193
1194  <div class="p-1.5 flex flex-col gap-y-2">
1195    <div data-js-target="content"></div>
1196    <a data-js-target="link" data-turbo="false" href="#" class="hidden underline" data-action='click->
1196elements--snackbar-component--close#closeMessage'>Sample Link content</a> 
1197    <button data-js-target="button" class="hidden underline text-left font-medium" data-action='click->elements--snackbar-component--close#closeMessage'>Sample Button content</button>
1198  </div>
1199
1200  <div data-js-target="announcer" class="sr-only"></div>
1201
1202  <button type="button"
1203          data-test-id="snackbar-close-icon"
1204          class="cursor-pointer self-start"
1205          aria-label="Close"
1206          data-action='click->elements--snackbar-component--close#closeMessage'>
1207    <span class="material-icons material-icons-outlined text-2xl  " data-nosnippet="true" aria-hidden="true">close</span>
1208  </button>
1209</div>
1210
1211        </div>
1212              <div class="container py-16 lg:py-24"><div class="grid grid-cols-12"><div class="col-span-full lg:col-start-2 lg:col-end-6">
1213    <h1 class="text-xl lg:text-2xl font-semibold border-b border-black pb-4">
1214      Your Bag
1215    </h1>
1216      <p class="my-6">
1217        <a class="focus:accent-blue disabled:utility-outline-disabled text-on-surface underline" href="/login">Sign in</a>
1218        to restore any saved items, otherwise continue shopping.
1219      </p>
1220
1221    <a class="focus:accent-blue whitespace-nowrap block flex justify-center items-center relative transition-colors duration-300 ease-in-out hover:no-underline font-semibold focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-2 focus-visible:outline-accent-blue group rounded-full max-w-max min-w-min bg-transparent text-on-surface border-on-surface border group no-underline" data-controller="elements--button-component--button" data-action="click-&gt;elements--button-component--button#disable" href="/marketplace"><span class="flex justify-center items-center py-2 px-4 space-x-3 rounded-full group-[.disabled]:invisible"><span>Continue Shopping</span></span><span class="hidden absolute spinner group-[.disabled]:flex"></span></a>
1222</div></div></div>
1223
1224
1225      </main>
1226      
1227          <footer class="bg-black text-left py-16 lg:py-20">
1228  <div class="container">
1229    <div class="space-y-12 lg:space-y-0 lg:flex lg:justify-between">
1230        <ul>
1231  <li class="text-base font-semibold text-light m-0">
1232    Company
1233        <li class="mt-4 font-normal">
1234            <a title="About Us" class="focus:accent-blue text-white hover:underline" href="/about">About Us</a>
1235        </li>
1236        <li class="mt-4 font-normal">
1237            <a title="Sustainability" class="focus:accent-blue text-white hover:underline" href="/sustainability">Sustainability</a>
1238        </li>
1239        <li class="mt-4 font-normal">
1240            <a title="Our Blog" class="focus:accent-blue text-white hover:underline" href="/blog">Our Blog</a>
1241        </li>
1242        <li class="mt-4 font-normal">
1243            <span class="flex flex-row items-center space-x-1.5 h-full w-full">
1244  <a target="_blank" rel="noopener" title="We&#39;re Hiring" class="focus:accent-blue text-white hover:underline" href="https://jobs.frame.work">We&#39;re Hiring</a>
1245  <span class="rounded-full flex items-center justify-center bg-primary h-5 w-5 text-xs">2</span>
1246</span>
1247
1248        </li>
1249        <li class="mt-4 font-normal">
1250            <a title="Contact Us" class="focus:accent-blue text-white hover:underline" href="/contact-us">Contact Us</a>
1251        </li>
1252        <li class="mt-4 font-normal">
1253            <a title="Accessibility Statement" class="focus:accent-blue text-white hover:underline" href="/accessibility-statement">Accessibility Statement</a>
1254        </li>
1255        <li class="mt-4 font-normal">
1256            <a title="For Business" class="focus:accent-blue text-white hover:underline" href="/framework-for-business">For Business</a>
1257        </li>
1258  </li>
1259</ul>
1260
1261        <ul>
1262  <li class="text-base font-semibold text-light m-0">
1263    Social
1264        <li class="mt-4 font-normal">
1265            <a target="_blank" rel="noopener me" class="focus:accent-blue text-white hover:underline flex space-x-5" title="Framework Computer on Twitter" href="https://www.twitter.com/FrameworkPuter">
1266              <span class="w-4 h-4 text-white"><svg width="24" height="24" viewBox="0 0 24 24" class='fill-current ionicon' xmlns="http://www.w3.org/2000/svg">
1267<path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28001 9.09 5.11001 7.38 3.00001 4.79C2.63001 5.42 2.42001 6.16 2.42001 6.94C2.42001 8.43 3.17001 9.75 4.33001 10.5C3.62001 10.5 2.96001 10.3 2.38001 10C2.38001 10 2.38001 10 2.38001 10.03C2.38001 12.11 3.86001 13.85 5.82001 14.24C5.46001 14.34 5.08001 14.39 4.69001 14.39C4.42001 14.39 4.15001 14.36 3.89001 14.31C4.43001 16 6.00001 17.26 7.89001 17.29C6.43001 18.45 4.58001 19.13 2.56001 19.13C2.22001 19.13 1.88001 19.11 1.54001 19.07C3.44001 20.29 5.70001 21 8.12001 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" />
1268</svg>
1269</span>
1270              <span class="m-0.5">
1271                Twitter
1272              </span>
1273</a>        </li>
1274        <li class="mt-4 font-normal">
1275            <a target="_blank" rel="noopener me" class="focus:accent-blue text-white hover:underline flex space-x-5" title="Framework Computer on YouTube" href="https://www.youtube.com/@FrameworkComputer">
1276              <span class="w-4 h-4 text-white"><?xml version="1.0" encoding="iso-8859-1"?>
1277<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
1278<svg height="24" width="24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
1279	 viewBox="0 0 461.001 461.001" xml:space="preserve">
1280<g>
1281	<path fill="#fff" d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
1282		c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
1283		C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
1284		c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"/>
1285</g>
1286</svg></span>
1287              <span class="m-0.5">
1288                YouTube
1289              </span>
1290</a>        </li>
1291        <li class="mt-4 font-normal">
1292            <a target="_blank" rel="noopener me" class="focus:accent-blue text-white hover:underline flex space-x-5" title="Framework Computer on Instagram" href="https://www.instagram.com/FrameworkComputer">
1293              <span class="w-4 h-4 text-white"><svg width="24" height="24" viewBox="0 0 24 24" class='fill-current ionicon' xmlns="http://www.w3.org/2000/svg">
1294<path d="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 17.7383 21.3889 19.2135 20.3012 20.3012C19.2135 21.3889 17.7383 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 6.26174 2.61107 4.78649 3.69878 3.69878C4.78649 2.61107 6.26174 2 7.8 2V2ZM7.6 4C6.64522 4 5.72955 4.37928 5.05442 5.05442C4.37928 5.72955 4 6.64522 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C17.3548 20 18.2705 19.6207 18.9456 18.9456C19.6207 18.2705 20 17.3548 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.5815 5.5 17.8995 5.6317 18.1339 5.86612C18.3683 6.10054 18.5 6.41848 18.5 6.75C18.5 7.08152 18.3683 7.39946 18.1339 7.63388C17.8995 7.8683 17.5815 8 17.25 8C16.9185 8 16.6005 7.8683 16.3661 7.63388C16.1317 7.39946 16 7.08152 16 6.75C16 6.41848 16.1317 6.10054 16.3661 5.86612C16.6005 5.6317 16.9185 5.5 17.25 5.5ZM12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7V7ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z" />
1295</svg>
1296</span>
1297              <span class="m-0.5">
1298                Instagram
1299              </span>
1300</a>        </li>
1301        <li class="mt-4 font-normal">
1302            <a target="_blank" rel="noopener me" class="focus:accent-blue text-white hover:underline flex space-x-5" title="Framework Computer on Facebook" href="https://www.facebook.com/FrameworkComputer">
1303              <span class="w-4 h-4 text-white"><svg width="24" height="24" viewBox="0 0 24 24" class='fill-current ionicon' xmlns="http://www.w3.org/2000/svg">
1304<path d="M12 2.04004C6.5 2.04004 2 6.53004 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85004C10.44 7.34004 11.93 5.96004 14.22 5.96004C15.31 5.96004 16.45 6.15004 16.45 6.15004V8.62004H15.19C13.95 8.62004 13.56 9.39004 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96C15.9164 21.5879 18.0622 20.3856 19.6099 18.5701C21.1576 16.7546 22.0054 14.4457 22 12.06C22 6.53004 17.5 2.04004 12 2.04004Z" />
1305</svg>
1306</span>
1307              <span class="m-0.5">
1308                Facebook
1309              </span>
1310</a>        </li>
1311        <li class="mt-4 font-normal">
1312            <a target="_blank" rel="noopener me" class="focus:accent-blue text-white hover:underline flex space-x-5" title="Framework Computer on LinkedIn" href="https://www.linkedin.com/company/frameworkcomputer">
1313              <span class="w-4 h-4 text-white"><svg width="24" height="24" viewBox="0 0 24 24" class='fill-current ionicon' xmlns="http://www.w3.org/2000/svg">
1314<path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" />
1315</svg>
1316</span>
1317              <span class="m-0.5">
1318                LinkedIn
1319              </span>
1320</a>        </li>
1321        <li class="mt-4 font-normal">
1322            <a target="_blank" rel="noopener me" class="focus:accent-blue text-white hover:underline flex space-x-5" title="Framework Computer on Bluesky" href="https://bsky.app/profile/frame.work">
1323              <span class="w-4 h-4 text-white"><svg width="24" height="24" viewBox="0 0 24 24" class="fill-current" xmlns="http://www.w3.org/2000/svg">
1324  <g clip-path="url(#clip0_6436_1650)">
1325    <path d="M5.97631 4.57844C8.4145 6.36807 11.037 9.99667 11.9999 11.944C12.9629 9.99682 15.5853 6.36803 18.0235 4.57844C19.7828 3.28713 22.6332 2.28798 22.6332 5.46732C22.6332 6.10228 22.2609 10.8013 22.0425 11.5642C21.2834 14.2164 18.5172 14.8929 16.0567 14.4835C20.3577 15.1992 21.4518 17.5698 19.0889 19.9404C14.6013 24.4427 12.6389 18.8108 12.1358 17.3677C12.0436 17.1031 12.0005 16.9794 11.9998 17.0846C11.9992 16.9793 11.9561 17.1031 11.8639 17.3677C11.3611 18.8108 9.39869 24.4428 4.9108 19.9404C2.54786 17.5698 3.64195 15.199 7.94303 14.4835C5.4824 14.8929 2.71619 14.2164 1.95719 11.5642C1.7388 10.8012 1.36646 6.10221 1.36646 5.46732C1.36646 2.28798 4.21699 3.28713 5.97619 4.57844H5.97631Z"/>
1326  </g>
1327  <defs>
1328    <clipPath id="clip0_6436_1650">
1329      <rect width="22" height="19" transform="translate(1 3)"/>
1330    </clipPath>
1331  </defs>
1332</svg>
1333</span>
1334              <span class="m-0.5">
1335                Bluesky
1336              </span>
1337</a>        </li>
1338        <li class="mt-4 font-normal">
1339            <a target="_blank" rel="noopener me" class="focus:accent-blue text-white hover:underline flex space-x-5" title="Framework Computer on Mastodon" href="https://fosstodon.org/@frameworkcomputer">
1340              <span class="w-4 h-4 text-white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="fill-current ionicon">
1341	<title>mastodon</title>
1342	<path id="Layer" fill-rule="evenodd" class="s0" d="m20.9 14c-0.2 1.4-2.4 2.9-4.9 3.2-1.3 0.2-2.6 0.3-4 0.3-2.2-0.1-4-0.6-4-0.6q0 0.1 0 0.2 0 0.1 0 0.2 0 0 0 0.1 0 0.1 0 0.2c0.3 2.2 2.2 2.3 4 2.4 1.8 0 3.5-0.5 3.5-0.5v1.7c0 0-1.2 0.7-3.5 0.8-1.2 0-2.8-0.1-4.6-0.5-3.9-1.1-4.6-5.3-4.7-9.5 0-1.3 0-2.4 0-3.4 0-4.4 2.8-5.6 2.8-5.6 1.5-0.7 3.9-1 6.5-1 2.6 0 5.1 0.3 6.5 1 0 0 2.8 1.2 2.8 5.6 0 0 0.1 3.2-0.4 5.4zm-2.9-5.1q0-1.6-0.8-2.6-0.9-0.9-2.3-0.9-1.6 0-2.4 1.2l-0.5 0.9-0.5-0.9q-0.8-1.2-2.4-1.2-1.4 0-2.3 0.9-0.8 1-0.8 2.6v5.3h2.1v-5.1q0-1.7 1.4-1.7 1.5 0 1.5 2v2.8h2v-2.8q0-2 1.5-2 1.4 0 1.4 1.7v5.1h2.1z"/>
1343</svg></span>
1344              <span class="m-0.5">
1345                Mastodon
1346              </span>
1347</a>        </li>
1348        <li class="mt-4 font-normal">
1349            <a target="_blank" rel="noopener me" class="focus:accent-blue text-white hover:underline flex space-x-5" title="Framework Computer on GitHub" href="https://github.com/FrameworkComputer">
1350              <span class="w-4 h-4 text-white"><svg width="24" height="23" viewBox="0 0 98 96" class="fill-current ionicon" xmlns="http://www.w3.org/2000/svg">
1351  <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.3
135162 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
1352</svg>
1353</span>
1354              <span class="m-0.5">
1355                GitHub
1356              </span>
1357</a>        </li>
1358        <li class="mt-4 font-normal">
1359            <a target="_blank" rel="noopener me" class="focus:accent-blue text-white hover:underline flex space-x-5" title="Framework Computer on RSS" href="https://frame.work/blog.rss">
1360              <span class="w-4 h-4 text-white"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1361<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22 4.22V7.05C11.25 7.05 16.95 12.75 16.95 19.78H19.78C19.78 11.19 12.81 4.22 4.22 4.22ZM6.4 15.42C5.19602 15.42 4.22 16.396 4.22 17.6C4.22 18.804 5.19602 19.78 6.4 19.78C7.60398 19.78 8.58 18.804 8.58 17.6C8.58 16.396 7.60398 15.42 6.4 15.42ZM4.22 12.71V9.88C9.69 9.88 14.12 14.31 14.12 19.78H11.29C11.29 15.88 8.12 12.71 4.22 12.71Z" fill="white"/>
1362</svg>
1363</span>
1364              <span class="m-0.5">
1365                RSS
1366              </span>
1367</a>        </li>
1368  </li>
1369</ul>
1370
1371        <ul>
1372  <li class="text-base font-semibold text-light m-0">
1373    Community
1374        <li class="mt-4 font-normal">
1375            <a title="Community Forum" class="focus:accent-blue text-white hover:underline" href="https://community.frame.work">Community Forum</a>
1376        </li>
1377        <li class="mt-4 font-normal">
1378            <a title="Support" class="focus:accent-blue text-white hover:underline" href="/support">Support</a>
1379        </li>
1380        <li class="mt-4 font-normal">
1381            <a title="Repair Guides" class="focus:accent-blue text-white hover:underline" href="https://guides.frame.work/c/Framework_Laptop">Repair Guides</a>
1382        </li>
1383  </li>
1384</ul>
1385
1386        <ul>
1387  <li class="text-base font-semibold text-light m-0">
1388    Shop all
1389        <li class="mt-4 font-normal">
1390            <a title="View All" class="focus:accent-blue text-white hover:underline" href="/marketplace">View All</a>
1391        </li>
1392        <li class="mt-4 font-normal">
1393            <a title="Outlet" class="focus:accent-blue text-white hover:underline" href="https://frame.work/outlet">Outlet</a>
1394        </li>
1395        <li class="mt-4 font-normal">
1396            <a title="Framework Laptop" class="focus:accent-blue text-white hover:underline" href="/marketplace/laptops">Framework Laptop</a>
1397        </li>
1398        <li class="mt-4 font-normal">
1399            <a title="Framework Desktop" class="focus:accent-blue text-white hover:underline" href="/marketplace/desktops">Framework Desktop</a>
1400        </li>
1401        <li class="mt-4 font-normal">
1402            <a title="Mainboards" class="focus:accent-blue text-white hover:underline" href="/marketplace/mainboards">Mainboards</a>
1403        </li>
1404        <li class="mt-4 font-normal">
1405            <a title="Expansion Cards" class="focus:accent-blue text-white hover:underline" href="/marketplace/expansion-cards">Expansion Cards</a>
1406        </li>
1407        <li class="mt-4 font-normal">
1408            <a title="Memory &amp; Storage" class="focus:accent-blue text-white hover:underline" href="/marketplace/memory-storage">Memory &amp; Storage</a>
1409        </li>
1410        <li class="mt-4 font-normal">
1411            <a title="Keyboards" class="focus:accent-blue text-white hover:underline" href="/marketplace/keyboards">Keyboards</a>
1412        </li>
1413        <li class="mt-4 font-normal">
1414            <a title="Parts" class="focus:accent-blue text-white hover:underline" href="/marketplace/parts">Parts</a>
1415        </li>
1416        <li class="mt-4 font-normal">
1417            <a title="Customization" class="focus:accent-blue text-white hover:underline" href="/marketplace/customization">Customization</a>
1418        </li>
1419        <li class="mt-4 font-normal">
1420            <a title="Tools" class="focus:accent-blue text-white hover:underline" href="/marketplace/tools">Tools</a>
1421        </li>
1422        <li class="mt-4 font-normal">
1423            <a title="Software" class="focus:accent-blue text-white hover:underline" href="/marketplace/software">Software</a>
1424        </li>
1425        <li class="mt-4 font-normal">
1426            <a title="Merch" class="focus:accent-blue text-white hover:underline" href="/marketplace/merch">Merch</a>
1427        </li>
1428  </li>
1429</ul>
1430
1431      <div class="flex flex-col mt-12 lg:mt-0 max-w-sm w-full">
1432  <div class="pb-8">
1433    <span class="text-base font-semibold text-light m-0 xl:mb-5 xl:text-md">
1434      Subscribe
1435    </span>
1436  </div>
1437
1438  <div class="mb-4">
1439    <div class="text-white">
1440      Stay up to date with the Framework Newsletter (a few times a month)
1441    </div>
1442  </div>
1443
1444  <div class="mt-4">
1445    <turbo-frame id="footer-email-signup" src="/email_signup/new?email_signup%5Bsource%5D=Footer+Newsletter+Form" loading="lazy">
1446      <span class="block spinner mt-4 mx-auto"></span>
1447    </turbo-frame>
1448  </div>
1449</div>
1450
1451    </div>
1452    <div class="flex items-end justify-between text-white lg:items-center mb-10 lg:mb-0 mt-20">
1453      <div>
1454        <div class="mb-4">
1455          &copy; 2026 Framework Computer Inc 
1456        </div>
1457        <div class="space-y-3 lg:flex lg:space-y-0">
1458          <div class="lg:mr-5">
1459            <a class="focus:accent-blue text-white hover:underline iubenda-nostyle no-brand iubenda-embed" title="Terms of Service" href="https://www.iubenda.com/terms-and-conditions/55865674">Terms of Service</a>
1460          </div>
1461          <div class="lg:mr-5">
1462            <a class="focus:accent-blue text-white hover:underline iubenda-nostyle no-brand iubenda-embed" title="Privacy Policy" href="https://www.iubenda.com/privacy-policy/55865674">Privacy Policy</a>
1463          </div>
1464          <div class="lg:mr-5">
1465            <a title="Warranty" class="focus:accent-blue text-white hover:underline" href="/warranty">Warranty</a>
1466          </div>
1467          <div class="lg:mr-5">
1468            <a title="Terms of Sale" class="focus:accent-blue text-white hover:underline" href="/terms-of-sale">Terms of Sale</a>
1469          </div>
1470          <div>
1471            <a class="focus:accent-blue text-white hover:underline iubenda-nostyle no-brand iubenda-embed" title="Cookie Policy" href="https://www.iubenda.com/privacy-policy/55865674/cookie-policy">Cookie Policy</a>
1472          </div>
1473        </div>
1474      </div>
1475
1476      <div class="text-white lg:text-black">
1477        <div class="hidden lg:block py-4">
1478  <a aria-label="Change Location and Language settings" data-turbo="false" class="focus:accent-blue" href="/locale/edit">
1479      <span class="flex items-center gap-x-2 px-3 py-2 rounded-full font-medium bg-light">
1480        <span class="w-6">
1481          <img alt="United States" width="24" height="17" loading="lazy" src="/images/flags/us.svg" />
1482        </span>
1483        USD
1484    </span>
1485</a></div>
1486
1487<div class="lg:hidden py-4">
1488<a data-turbo="false" class="focus:accent-blue" href="/locale/edit">
1489    <span class="flex items-center space-x-2">
1490      <span class="w-6">
1491        <img alt="United States" width="24" height="17" loading="lazy" src="/images/flags/us.svg" />
1492      </span>
1493      <span>
1494        USD
1495      </span>
1496  </span>
1497</a></div>
1498
1499      </div>
1500    </div>
1501  </div>
1502</footer>
1503
1504      
1505</div>  </body>
1506</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.