art-directions

html twicpics-next-demo.netlify.app collected 2026-10-03 11:33:18 UTC 4,295 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="initial-scale=1.0, width=device-width" data-next-head=""/><title data-next-head="">TwicPics x Next</title><link rel="preload" href="/_next/static/chunks/21bbd8bef648af16.css" as="style"/><link rel="preload" href="/_next/static/chunks/98e59639eb785395.css" as="style"/><link rel="stylesheet" href="/_next/static/chunks/21bbd8bef648af16.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/chunks/98e59639eb785395.css" data-n-p=""/><noscript data-n-css=""></noscript>

1<script src="/_next/static/chunks/a15bc769500d745a.js" defer=""></script>

1<script src="/_next/static/chunks/23edd6987028f815.js" defer=""></script>

1<script src="/_next/static/chunks/b83e9443234e5d4a.js" defer=""></script>

1<script src="/_next/static/chunks/turbopack-8a216245f93c17ef.js" defer=""></script>

1<script src="/_next/static/chunks/98d207b53021ab4e.js" defer=""></script>

1<script src="/_next/static/chunks/e20ae30dd4ceaf0e.js" defer=""></script>

1<script src="/_next/static/chunks/turbopack-e45c622bef683cb2.js" defer=""></script>

1<script src="/_next/static/HsbBLMuRIXE7Jzha80tTO/_ssgManifest.js" defer=""></script>

1<script src="/_next/static/HsbBLMuRIXE7Jzha80tTO/_buildManifest.js" defer=""></script>

1</head><body><link rel="preload" as="image" href="https://assets.twicpics.com/demo/@twicpics-components/logos/twicpics-by-frontify.svg"/><link rel="preload" as="image" href="https://assets.twicpics.com/demo/@twicpics-components/logos/next-js.svg"/><link rel="preload" as="image" href="/assets/github-mark-white.svg"/><link rel="preload" as="image" href="/assets/stackblitz.svg"/><div id="__next"><div><header id="index-module-scss-module__5qE7ia__twic-header"><a href="/"><h1 class="index-module-scss-module__5qE7ia__heading-primary"><img class="index-module-scss-module__5qE7ia__twicpics-logo" src="https://assets.twicpics.com/demo/@twicpics-components/logos/twicpics-by-frontify.svg" alt="TwicPics logo"/><span>x</span><img class="index-module-scss-module__5qE7ia__framework-logo" src="https://assets.twicpics.com/demo/@twicpics-components/logos/next-js.svg" alt="React Logo"/></h1></a><div class="index-module-scss-module__5qE7ia__ribbon"><div><a target="_blank" href="https://github.com/TwicPics/components-demo-next/blob/main/pages/art-directions/index.jsx" rel="noreferrer" title="Open in Github"><img src="/assets/github-mark-white.svg" alt="Open in Github"/></a><a target="_blank" href="https://stackblitz.com/github/TwicPics/components-demo-next?file=pages/art-directions/index.jsx&amp;initialpath=art-directions" rel="noreferrer" title="Open in StackBlitz"><img src="/assets/stackblitz.svg" alt="Open in StackBlitz"/></a></div></div><div class="index-module-scss-module__5qE7ia__tags-container"><div class="index-module-scss-module__5qE7ia__tag">@twicpics-components</div><a href="https://www.twicpics.com/docs/components/next?utm_source=github&amp;utm_medium=organic&amp;utm_campaign=components" target="_blank" class="index-module-scss-module__5qE7ia__tag index-module-scss-module__5qE7ia__documentation-link index-module-scss-module__5qE7ia__tag--bg-purple-rain" rel="noreferrer">Documentation</a></div></header><main id="index-module-scss-module__5qE7ia__twic-demo-container"><div class="index-module-scss-module__jFUJqq__twic-abstract"><h1>Art directions with CSS media queries</h1><div><p>Setting up components using CSS enables hassle-free responsive designs.</p><p>You do not need to create a set of images derived from the original.</p><p>You only need to manage a master image in your template: TwicPics understands your CSS and does the rest.</p><p><strong>Change the width of your browser </strong>to see the image ratio adapt according to the CSS rules.</p></div></div><div class="twic-item index-module-scss-module__NHzo6G__style-driven-responsive"><div role="img" class="twic-i  "><div class="twic-w twic-tf"><img data-twic-transform="/focus=48px100p/*" data-twic-src="media:components/greece.jpg" alt=""/><div></div></div></div></div></main></div></div>

1<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/art-directions","query":{},"buildId":"HsbBLMuRIXE7Jzha80tTO","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>

1</body></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.