Usage
Anatomy
Variants
When using the main siteframe inside the app, the header is hidden as the app adds bottom and top bar, the newsletter subscription is also hidden, and the footer is being minified.
HTML
<div class="on-frame" style="display:flex;flex-wrap:wrap;justify-content:center;gap:40px;padding:32px 16px"><div style="width:300px;max-width:100%;border:2px solid var(--oc-semantic-color-stroke-divider);border-radius:40px;overflow:hidden;background:var(--oc-semantic-color-background-frame);display:flex;flex-direction:column;color:var(--oc-semantic-color-text-default)"><div style="background:var(--oc-semantic-color-background-canvas);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 26px 6px;font:700 14px/18px OTTOSans,sans-serif"><span>9:41</span><span style="width:80px;height:22px;border-radius:12px;background:var(--oc-semantic-color-text-default)"></span><span style="justify-self:end;display:flex;gap:6px;align-items:center"><oc-icon-v1 type="wifi" style="width:16px;height:16px"></oc-icon-v1><span style="width:22px;height:11px;border-radius:3px;background:var(--oc-semantic-color-text-default)"></span></span></div><div style="background:var(--oc-semantic-color-background-canvas);display:flex;align-items:center;gap:4px;padding:0 12px 12px 4px"><oc-icon-button-v3 variant="transparent" icon="arrow-left" oc-aria-label="Zurück"></oc-icon-button-v3><div style="flex:1"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:300px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT</div></div><div style="padding:24px 16px 16px;text-align:center;color:var(--oc-semantic-color-text-secondary);font-size:13px;line-height:22px"><p><a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Hilfe & Kontakt</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Chat</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Service</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Newsletter</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Lob & Kritik</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Cookie-Einstellungen</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">AGB</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Datenschutz</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Impressum</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Produktsicherheitsrückrufe</a></p><p style="font-size:11px;line-height:15px;margin-top:12px">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p><img src="/assets-static/icons/pl_logo_slogan.svg" alt="OTTO … find ich gut" style="display:block;height:32px;width:auto;margin:16px auto 0;opacity:.5"></div><div style="background:var(--oc-semantic-color-background-canvas);display:flex;justify-content:space-around;align-items:center;padding:12px 8px 8px"><oc-icon-v1 type="home"></oc-icon-v1><span style="box-shadow:0 -12px 0 -10px var(--oc-semantic-color-brand);display:inline-flex"><oc-icon-v1 type="burger" style="--color:var(--oc-semantic-color-text-brand)"></oc-icon-v1></span><span style="position:relative;display:inline-flex"><oc-icon-v1 type="basket"></oc-icon-v1><oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:-8px">1</oc-badge-v2></span><span style="position:relative;display:inline-flex"><oc-icon-v1 type="wishlist"></oc-icon-v1><oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:-8px">1</oc-badge-v2></span><oc-icon-v1 type="person"></oc-icon-v1></div><div style="background:var(--oc-semantic-color-background-canvas);padding:6px 0 10px"><div style="margin:0 auto;width:110px;height:4px;border-radius:2px;background:var(--oc-semantic-color-text-default)"></div></div></div><div style="width:300px;max-width:100%;border:2px solid var(--oc-semantic-color-stroke-divider);border-radius:40px;overflow:hidden;background:var(--oc-semantic-color-background-frame);display:flex;flex-direction:column;color:var(--oc-semantic-color-text-default)"><div style="background:var(--oc-semantic-color-background-canvas);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 26px 6px;font:700 14px/18px OTTOSans,sans-serif"><span>9:30</span><span style="width:16px;height:16px;border-radius:50%;background:var(--oc-semantic-color-text-default)"></span><span style="justify-self:end;display:flex;gap:6px;align-items:center"><oc-icon-v1 type="wifi" style="width:16px;height:16px"></oc-icon-v1><span style="width:22px;height:11px;border-radius:3px;background:var(--oc-semantic-color-text-default)"></span></span></div><div style="background:var(--oc-semantic-color-background-canvas);display:flex;align-items:center;gap:4px;padding:0 12px 12px 4px"><oc-icon-button-v3 variant="transparent" icon="arrow-left" oc-aria-label="Zurück"></oc-icon-button-v3><div style="flex:1"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:300px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT</div></div><div style="padding:24px 16px 16px;text-align:center;color:var(--oc-semantic-color-text-secondary);font-size:13px;line-height:22px"><p><a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Hilfe & Kontakt</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Chat</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Service</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Newsletter</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Lob & Kritik</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Cookie-Einstellungen</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">AGB</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Datenschutz</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Impressum</a> <span aria-hidden="true" style="margin:0 4px">•</span> <a href="#" style="color:inherit;text-decoration:none;white-space:nowrap">Produktsicherheitsrückrufe</a></p><p style="font-size:11px;line-height:15px;margin-top:12px">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p><img src="/assets-static/icons/pl_logo_slogan.svg" alt="OTTO … find ich gut" style="display:block;height:32px;width:auto;margin:16px auto 0;opacity:.5"></div><div style="background:var(--oc-semantic-color-background-canvas);display:flex;justify-content:space-around;align-items:center;padding:12px 8px 8px"><oc-icon-v1 type="home"></oc-icon-v1><span style="padding:2px 14px;border-radius:12px;background:var(--oc-semantic-color-background-stacked);display:inline-flex"><oc-icon-v1 type="burger" style="--color:var(--oc-semantic-color-text-brand)"></oc-icon-v1></span><span style="position:relative;display:inline-flex"><oc-icon-v1 type="basket"></oc-icon-v1><oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:-8px">1</oc-badge-v2></span><span style="position:relative;display:inline-flex"><oc-icon-v1 type="wishlist"></oc-icon-v1><oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:-8px">1</oc-badge-v2></span><oc-icon-v1 type="person"></oc-icon-v1></div><div style="background:var(--oc-semantic-color-background-canvas);padding:6px 0 10px"><div style="margin:0 auto;width:110px;height:4px;border-radius:2px;background:var(--oc-semantic-color-text-default)"></div></div></div></div>Behavior
Interaction
The back-to-top button is automatically shown on the main siteframe when scrolling in a specific way.
Fitting
The header, newsletter subscription and footer are included as Edge Side Includes (ESI). They are not inherent parts of the siteframe itself, though they all integrate very closely. The main siteframe specifies the width of all of its contents as fill-parent and limits the size on breakpoint XXL.
HTML
<div class="on-frame" style="overflow:hidden;padding:24px"><div style="zoom:.42;display:grid;gap:64px">
<div style="display:grid;grid-template-columns:auto 360px minmax(0,1fr);gap:40px;align-items:start"><div style="display:flex;align-items:center;gap:8px;margin-top:46px"><span style="writing-mode:vertical-rl;transform:rotate(180deg);color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px">fit-content</span><span style="width:3px;align-self:stretch;background:#f06"></span></div><div><div style="display:grid;justify-items:center;margin-bottom:12px"><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;line-height:34px">fill-parent</span><span style="display:block;width:100%;height:12px;background:linear-gradient(#f06,#f06) center/100% 3px no-repeat"></span></div><div style="height:900px;overflow:hidden"><div style="width:360px;flex:none;background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default)"><div style="background:var(--oc-semantic-color-background-canvas);padding:10px 12px;display:flex;align-items:center;gap:10px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="burger"></oc-icon-v1>Sortiment</span><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:22px;width:auto"><span style="margin-left:auto;display:flex;gap:8px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="search"></oc-icon-v1>Suche</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="person"></oc-icon-v1>Mein Konto</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="wishlist"></oc-icon-v1>Merkzettel<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="basket"></oc-icon-v1>Warenkorb<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span></span></div><div style="display:grid;gap:4px;margin-top:4px"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:280px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:160px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 16px"><p class="oc-headline-100" style="margin-bottom:12px">Newsletter anmelden & Vorteile sichern</p><div style="display:grid;gap:12px"><oc-text-field-v1>E-Mail-Adresse</oc-text-field-v1><oc-button-v1 variant="secondary" >Anmelden</oc-button-v1></div></div><div style="-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);color:var(--oc-semantic-color-text-secondary);font-size:14px"><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;gap:12px"><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="person" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Mein Konto</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="voucher" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Geschenkgutschein</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="feedback" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Lob & Kritik</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="service-info" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Service</span></div></div></div></div></div></div>
<div><div style="display:grid;justify-items:center;margin-bottom:12px"><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;line-height:34px">fill-parent</span><span style="display:block;width:100%;height:12px;background:linear-gradient(#f06,#f06) center/100% 3px no-repeat"></span></div><div style="height:900px;overflow:hidden"><div style="background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default);height:100%"><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 5% 16px;display:grid;gap:12px"><div style="display:flex;align-items:center;gap:32px"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:48px;width:auto"><div style="flex:1;max-width:460px"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div><div style="margin-left:auto;display:flex;gap:16px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="service-info"></oc-icon-v1>Service</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="person"></oc-icon-v1>Mein Konto</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="wishlist"></oc-icon-v1>Merkzettel<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="basket"></oc-icon-v1>Warenkorb<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span></div></div><div style="display:grid;gap:4px;font-size:17px;color:var(--oc-semantic-color-text-secondary)"><div style="display:flex;justify-content:space-between;gap:12px"><span>Inspiration</span><span>Damen-Mode</span><span>Herren-Mode</span><span>Baby & Kind</span><span>Sport</span><span>Drogerie</span></div><div style="display:flex;justify-content:space-between;gap:12px"><span>Multimedia</span><span>Haushalt</span><span>Küche</span><span>Heimtextilien</span><span>Möbel</span><span>Baumarkt</span><span>Marken</span><span>%Sale%</span></div></div></div><div style="height:4px"></div><div style="display:grid;gap:4px;"><div style="display:grid;grid-template-columns:1fr 3fr;gap:4px"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:300px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">SIDE CONTENT</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:300px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">MAIN CONTENT</div></div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 16px"><p class="oc-headline-100" style="margin-bottom:12px">Newsletter anmelden & Vorteile sichern</p><div style="display:flex;gap:12px;align-items:center"><div style="flex:1;max-width:60%"><oc-text-field-v1>E-Mail-Adresse</oc-text-field-v1></div><oc-button-v1 variant="secondary" fit-content>Anmelden</oc-button-v1></div></div><div style="-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);color:var(--oc-semantic-color-text-secondary);font-size:14px"><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px"><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="person" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Mein Konto</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="voucher" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Geschenkgutschein</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="feedback" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Lob & Kritik</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="service-info" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Service</span></div><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;font-weight:700"><span>Wir sind gerne für dich da</span><span>Zahlungsarten</span><span>Über uns</span><span>Verkaufen bei OTTO</span></div></div></div></div></div></div></div>
<div><div style="padding:0 16% 0 5%"><div style="display:grid;justify-items:center;margin-bottom:12px"><span style="color:#f06;font:12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;line-height:34px">max-width (72rem)</span><span style="display:block;width:100%;height:12px;background:linear-gradient(#f06,#f06) center/100% 3px no-repeat"></span></div></div><div style="height:760px;overflow:hidden"><div style="background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default);height:100%"><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 5% 16px;display:grid;gap:12px"><div style="display:flex;align-items:center;gap:32px"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:48px;width:auto"><div style="flex:1;max-width:460px"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div><div style="margin-left:auto;display:flex;gap:16px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="service-info"></oc-icon-v1>Service</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="person"></oc-icon-v1>Mein Konto</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="wishlist"></oc-icon-v1>Merkzettel<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="basket"></oc-icon-v1>Warenkorb<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span></div></div><div style="display:grid;gap:4px;font-size:17px;color:var(--oc-semantic-color-text-secondary)"><div style="display:flex;justify-content:space-between;gap:12px"><span>Inspiration</span><span>Damen-Mode</span><span>Herren-Mode</span><span>Baby & Kind</span><span>Sport</span><span>Drogerie</span></div><div style="display:flex;justify-content:space-between;gap:12px"><span>Multimedia</span><span>Haushalt</span><span>Küche</span><span>Heimtextilien</span><span>Möbel</span><span>Baumarkt</span><span>Marken</span><span>%Sale%</span></div></div></div><div style="height:4px"></div><div style="display:grid;grid-template-columns:minmax(0,1fr) 12%;gap:2%;padding:0 4% 0 5%"><div style="display:grid;gap:4px;"><div style="display:grid;grid-template-columns:1fr 3fr;gap:4px"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:300px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">SIDE CONTENT</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:300px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">MAIN CONTENT</div></div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 16px"><p class="oc-headline-100" style="margin-bottom:12px">Newsletter anmelden & Vorteile sichern</p><div style="display:flex;gap:12px;align-items:center"><div style="flex:1;max-width:60%"><oc-text-field-v1>E-Mail-Adresse</oc-text-field-v1></div><oc-button-v1 variant="secondary" fit-content>Anmelden</oc-button-v1></div></div><div style="-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);color:var(--oc-semantic-color-text-secondary);font-size:14px"><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px"><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="person" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Mein Konto</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="voucher" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Geschenkgutschein</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="feedback" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Lob & Kritik</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="service-info" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Service</span></div><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;font-weight:700"><span>Wir sind gerne für dich da</span><span>Zahlungsarten</span><span>Über uns</span><span>Verkaufen bei OTTO</span></div></div></div><div style="padding-top:28px"><div style="aspect-ratio:1/3.7;background:repeating-conic-gradient(#0a84ff 0 25%,#0070e0 0 50%) 0 0/16px 16px"></div></div></div></div></div></div>
</div>Layout
The main siteframe is the topmost element in a layout. It can be designed using the grid system. Using this it is possible to horizontally divide the view into blocks on from breakpoint L - giving the possibility to display side content or placing content blocks side by side.
HTML
<div class="on-frame" style="overflow:hidden;padding:24px"><div style="zoom:.45;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px">
<div style="justify-self:center"><div style="height:720px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)"><div style="width:360px;flex:none;background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default)"><div style="background:var(--oc-semantic-color-background-canvas);padding:10px 12px;display:flex;align-items:center;gap:10px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="burger"></oc-icon-v1>Sortiment</span><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:22px;width:auto"><span style="margin-left:auto;display:flex;gap:8px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="search"></oc-icon-v1>Suche</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="person"></oc-icon-v1>Mein Konto</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="wishlist"></oc-icon-v1>Merkzettel<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="basket"></oc-icon-v1>Warenkorb<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span></span></div><div style="display:grid;gap:4px;margin-top:4px"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:220px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT A</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:60px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT B</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 16px"><p class="oc-headline-100" style="margin-bottom:12px">Newsletter anmelden & Vorteile sichern</p><div style="display:grid;gap:12px"><oc-text-field-v1>E-Mail-Adresse</oc-text-field-v1><oc-button-v1 variant="secondary" >Anmelden</oc-button-v1></div></div><div style="-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);color:var(--oc-semantic-color-text-secondary);font-size:14px"><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;gap:12px"><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="person" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Mein Konto</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="voucher" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Geschenkgutschein</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="feedback" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Lob & Kritik</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="service-info" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Service</span></div></div></div></div></div></div><div style="height:720px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)"><div style="background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default);height:100%"><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 5% 16px;display:grid;gap:12px"><div style="display:flex;align-items:center;gap:32px"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:48px;width:auto"><div style="flex:1;max-width:460px"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div><div style="margin-left:auto;display:flex;gap:16px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="service-info"></oc-icon-v1>Service</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="person"></oc-icon-v1>Mein Konto</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="wishlist"></oc-icon-v1>Merkzettel<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="basket"></oc-icon-v1>Warenkorb<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span></div></div><div style="display:grid;gap:4px;font-size:17px;color:var(--oc-semantic-color-text-secondary)"><div style="display:flex;justify-content:space-between;gap:12px"><span>Inspiration</span><span>Damen-Mode</span><span>Herren-Mode</span><span>Baby & Kind</span><span>Sport</span><span>Drogerie</span></div><div style="display:flex;justify-content:space-between;gap:12px"><span>Multimedia</span><span>Haushalt</span><span>Küche</span><span>Heimtextilien</span><span>Möbel</span><span>Baumarkt</span><span>Marken</span><span>%Sale%</span></div></div></div><div style="height:4px"></div><div style="display:grid;gap:4px;"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:200px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT A</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:60px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT B</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 16px"><p class="oc-headline-100" style="margin-bottom:12px">Newsletter anmelden & Vorteile sichern</p><div style="display:flex;gap:12px;align-items:center"><div style="flex:1;max-width:60%"><oc-text-field-v1>E-Mail-Adresse</oc-text-field-v1></div><oc-button-v1 variant="secondary" fit-content>Anmelden</oc-button-v1></div></div><div style="-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);color:var(--oc-semantic-color-text-secondary);font-size:14px"><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px"><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="person" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Mein Konto</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="voucher" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Geschenkgutschein</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="feedback" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Lob & Kritik</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="service-info" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Service</span></div><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;font-weight:700"><span>Wir sind gerne für dich da</span><span>Zahlungsarten</span><span>Über uns</span><span>Verkaufen bei OTTO</span></div></div></div></div></div><div style="height:720px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)"><div style="background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default);height:100%"><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 5% 16px;display:grid;gap:12px"><div style="display:flex;align-items:center;gap:32px"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:48px;width:auto"><div style="flex:1;max-width:460px"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div><div style="margin-left:auto;display:flex;gap:16px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="service-info"></oc-icon-v1>Service</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="person"></oc-icon-v1>Mein Konto</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="wishlist"></oc-icon-v1>Merkzettel<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="basket"></oc-icon-v1>Warenkorb<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span></div></div><div style="display:grid;gap:4px;font-size:17px;color:var(--oc-semantic-color-text-secondary)"><div style="display:flex;justify-content:space-between;gap:12px"><span>Inspiration</span><span>Damen-Mode</span><span>Herren-Mode</span><span>Baby & Kind</span><span>Sport</span><span>Drogerie</span></div><div style="display:flex;justify-content:space-between;gap:12px"><span>Multimedia</span><span>Haushalt</span><span>Küche</span><span>Heimtextilien</span><span>Möbel</span><span>Baumarkt</span><span>Marken</span><span>%Sale%</span></div></div></div><div style="height:4px"></div><div style="display:grid;gap:4px;"><div style="display:grid;grid-template-columns:1fr 3fr;gap:4px"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:284px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">SIDE CONTENT</div></div><div style="display:grid;gap:4px"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:200px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT A</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:60px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT B</div></div></div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 16px"><p class="oc-headline-100" style="margin-bottom:12px">Newsletter anmelden & Vorteile sichern</p><div style="display:flex;gap:12px;align-items:center"><div style="flex:1;max-width:60%"><oc-text-field-v1>E-Mail-Adresse</oc-text-field-v1></div><oc-button-v1 variant="secondary" fit-content>Anmelden</oc-button-v1></div></div><div style="-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);color:var(--oc-semantic-color-text-secondary);font-size:14px"><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px"><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="person" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Mein Konto</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="voucher" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Geschenkgutschein</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="feedback" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Lob & Kritik</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="service-info" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Service</span></div><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;font-weight:700"><span>Wir sind gerne für dich da</span><span>Zahlungsarten</span><span>Über uns</span><span>Verkaufen bei OTTO</span></div></div></div></div></div><div style="height:720px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent)"><div style="background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default);height:100%"><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 5% 16px;display:grid;gap:12px"><div style="display:flex;align-items:center;gap:32px"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:48px;width:auto"><div style="flex:1;max-width:460px"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div><div style="margin-left:auto;display:flex;gap:16px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="service-info"></oc-icon-v1>Service</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="person"></oc-icon-v1>Mein Konto</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="wishlist"></oc-icon-v1>Merkzettel<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="basket"></oc-icon-v1>Warenkorb<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span></div></div><div style="display:grid;gap:4px;font-size:17px;color:var(--oc-semantic-color-text-secondary)"><div style="display:flex;justify-content:space-between;gap:12px"><span>Inspiration</span><span>Damen-Mode</span><span>Herren-Mode</span><span>Baby & Kind</span><span>Sport</span><span>Drogerie</span></div><div style="display:flex;justify-content:space-between;gap:12px"><span>Multimedia</span><span>Haushalt</span><span>Küche</span><span>Heimtextilien</span><span>Möbel</span><span>Baumarkt</span><span>Marken</span><span>%Sale%</span></div></div></div><div style="height:4px"></div><div style="display:grid;gap:4px;"><div style="display:grid;grid-template-columns:3fr 2fr;gap:4px"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:284px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT A</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:284px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT B</div></div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 16px"><p class="oc-headline-100" style="margin-bottom:12px">Newsletter anmelden & Vorteile sichern</p><div style="display:flex;gap:12px;align-items:center"><div style="flex:1;max-width:60%"><oc-text-field-v1>E-Mail-Adresse</oc-text-field-v1></div><oc-button-v1 variant="secondary" fit-content>Anmelden</oc-button-v1></div></div><div style="-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);color:var(--oc-semantic-color-text-secondary);font-size:14px"><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px"><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="person" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Mein Konto</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="voucher" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Geschenkgutschein</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="feedback" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Lob & Kritik</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="service-info" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Service</span></div><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;font-weight:700"><span>Wir sind gerne für dich da</span><span>Zahlungsarten</span><span>Über uns</span><span>Verkaufen bei OTTO</span></div></div></div></div></div>
</div>Responsiveness
The header and footer are responsive themselves respecting major breakpoints S and L. When breakpoint XXL is reached, the skyscraper is shown to the right of the content and the content's width is maxed to 1152px. The skyscraper behaves sticky, when scrolling down.
Breakout sections
On breakpoint XXL, you can use breakout sections to use the full width of the viewport. Make sure, you provide enough vertical space with standard sections to allow for the skyscraper to be placed at the side.
HTML
<div class="on-frame" style="overflow:hidden;padding:24px"><div style="zoom:.5"><div style="height:1100px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent)"><div style="background:var(--oc-semantic-color-background-frame);border:1px solid var(--oc-semantic-color-stroke-divider);color:var(--oc-semantic-color-text-default)"><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 5% 16px;display:grid;gap:12px"><div style="display:flex;align-items:center;gap:32px"><img src="/otto-logo.svg" alt="OTTO" style="display:block;height:48px;width:auto"><div style="flex:1;max-width:460px"><oc-search-field-v1><input type="search" placeholder="Wonach suchst du?" spellcheck="false" aria-label="Suche"></oc-search-field-v1></div><div style="margin-left:auto;display:flex;gap:16px"><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="service-info"></oc-icon-v1>Service</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="person"></oc-icon-v1>Mein Konto</span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="wishlist"></oc-icon-v1>Merkzettel<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span><span style="position:relative;display:grid;justify-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--oc-semantic-color-text-secondary)"><oc-icon-v1 type="basket"></oc-icon-v1>Warenkorb<oc-badge-v2 variant="primary" style="position:absolute;top:-6px;right:2px">1</oc-badge-v2></span></div></div><div style="display:grid;gap:4px;font-size:17px;color:var(--oc-semantic-color-text-secondary)"><div style="display:flex;justify-content:space-between;gap:12px"><span>Inspiration</span><span>Damen-Mode</span><span>Herren-Mode</span><span>Baby & Kind</span><span>Sport</span><span>Drogerie</span></div><div style="display:flex;justify-content:space-between;gap:12px"><span>Multimedia</span><span>Haushalt</span><span>Küche</span><span>Heimtextilien</span><span>Möbel</span><span>Baumarkt</span><span>Marken</span><span>%Sale%</span></div></div></div><div style="height:4px"></div><div style="display:grid;grid-template-columns:minmax(0,1fr) 12%;gap:2%;padding:0 4% 0 5%"><div style="display:grid;gap:4px"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:280px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">DEFAULT SECTION</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:120px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">DEFAULT SECTION</div></div></div><div style="padding-top:28px"><div style="aspect-ratio:1/3.7;background:repeating-conic-gradient(#0a84ff 0 25%,#0070e0 0 50%) 0 0/16px 16px"></div></div></div><div style="background:var(--oc-semantic-color-background-canvas);margin:4px 0;padding:16px 1%"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:120px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">BREAKOUT SECTION</div></div><div style="display:grid;grid-template-columns:minmax(0,1fr) 12%;gap:2%;padding:0 4% 0 5%"><div style="display:grid;gap:4px"><div style="background:var(--oc-semantic-color-background-canvas);padding:16px"><div style="background:var(--oc-semantic-color-background-soft-mint);min-height:120px;display:grid;place-items:center;color:var(--oc-semantic-color-background-canvas);font:700 12px/16px OTTOSans,sans-serif;letter-spacing:.02em">CONTENT</div></div><div style="background:var(--oc-semantic-color-background-canvas);padding:20px 16px"><p class="oc-headline-100" style="margin-bottom:12px">Newsletter anmelden & Vorteile sichern</p><div style="display:flex;gap:12px;align-items:center"><div style="flex:1;max-width:60%"><oc-text-field-v1>E-Mail-Adresse</oc-text-field-v1></div><oc-button-v1 variant="secondary" fit-content>Anmelden</oc-button-v1></div></div><div style="-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);color:var(--oc-semantic-color-text-secondary);font-size:14px"><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px"><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="person" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Mein Konto</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="voucher" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Geschenkgutschein</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="feedback" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Lob & Kritik</span><span style="display:flex;align-items:center;gap:10px"><oc-icon-v1 type="service-info" style="--color:var(--oc-semantic-color-text-secondary)"></oc-icon-v1>Service</span></div><div style="background:var(--oc-semantic-color-background-canvas);margin-top:4px;padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;font-weight:700"><span>Wir sind gerne für dich da</span><span>Zahlungsarten</span><span>Über uns</span><span>Verkaufen bei OTTO</span></div></div></div><div style="padding-top:28px"></div></div></div></div></div></div>Status
Implementation
Note: For full technical documentation of the main siteframe, visit Storybook/Siteframe.