https://twicpics-next-demo.netlify.app/basic-grid

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/67a895005826f59a.js" defer=""></script>

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

1<script src="/_next/static/chunks/turbopack-bfa21bc15ad8634f.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><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/basic-grid/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/basic-grid/index.jsx&amp;initialpath=basic-grid" 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>A basic example</h1><div><p>TwicPics is a Responsive Image Service Solution (SaaS) that enables on-demand responsive image generation.</p><p>TwicPics Components make it dead easy to unleash the power of TwicPics.</p>Here the properties used in this example:<ul><li><span class="index-module-scss-module__E8tk6G__twic-code">ratio</span>:<span>  determines the value of the width/height ratio of the image display area.</span></li><li><span class="index-module-scss-module__E8tk6G__twic-code">mode</span>:<span>determines if the image fills or sits inside the area.</span></li><li><span class="index-module-scss-module__E8tk6G__twic-code">focus</span>:<span>changes the focus point coordinates of the image.</span></li><li><span class="index-module-scss-module__E8tk6G__twic-code">placeholder</span>:<span>helps optimize your CLS and implement the LQIP technique.</span></li></ul></div></div><div class="twic-grid"><div class="twic-item"><div role="img" class="twic-i  "><div class="twic-w twic-tf"><img data-twic-src="media:https://assets.twicpics.com/examples/football.jpg" alt=""/><div></div></div></div><span> Default values </span></div><div class="twic-item"><div role="img" class="twic-i  "><div class="twic-w twic-tf" style="padding-top:56.25%"><img style="object-fit:cover" data-twic-src="media:football.jpg" alt=""/><div style="background-size:cover"></div></div></div><span><span class="index-module-scss-module__E8tk6G__twic-code">ratio=&quot;16/9&quot;</span>&amp;<span class="index-module-scss-module__E8tk6G__twic-code">mode=&quot;cover&quot;</span>: the image fills the area</span></div><div class="twic-item"><div role="img" class="twic-i  "><div class="twic-w twic-tf" style="padding-top:56.25%"><img style="object-fit:contain" data-twic-src="media:football.jpg" data-twic-step="100" alt=""/><div style="background-size:contain"></div></div></div><span><span class="index-module-scss-module__E8tk6G__twic-code">ratio=&quot;16/9&quot;</span>&amp;<span class="index-module-scss-module__E8tk6G__twic-code">mode=&quot;contain&quot;</span>: the image sits inside the area</span></div><div class="twic-item"><div role="img" class="twic-i  "><div class="twic-w twic-tf" style="padding-top:150%"><img style="object-fit:contain" data-twic-src="media:football.jpg" data-twic-step="100" alt=""/><div style="background-size:contain"></div></div></div><span><span class="index-module-scss-module__E8tk6G__twic-code">ratio=&quot;2/3&quot;</span>,<span class="index-module-scss-module__E8tk6G__twic-code">mode=&quot;contain&quot;</span>&amp;<span class="index-module-scss-module__E8tk6G__twic-code">focus=&quot;auto&quot;</span></span></div></div></main></div></div></div>

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

1</body></html>