Skip to content

Instantly share code, notes, and snippets.

@luizbills
Created August 19, 2025 23:31
Show Gist options
  • Select an option

  • Save luizbills/17217fb37b7018dfad36c18f91b5ed32 to your computer and use it in GitHub Desktop.

Select an option

Save luizbills/17217fb37b7018dfad36c18f91b5ed32 to your computer and use it in GitHub Desktop.
Pico.css full page layout with accordions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
>
<link
rel="stylesheet"
href="style.css"
>
</head>
<body>
<div class="container">
<details name="example" open>
<summary>Logs</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero velit accusamus repudiandae, illo minus, optio at sed! Tenetur fuga sapiente impedit ex voluptate autem, dolorum optio quos vero ad alias obcaecati id dignissimos omnis, qui enim tempore numquam quas. Explicabo architecto dolores unde praesentium aliquam tempora quo error. Doloremque ipsam delectus ducimus rerum obcaecati repellat ab nulla et ad commodi recusandae, dolorem esse blanditiis voluptatibus vel tenetur porro culpa provident excepturi vero sit quisquam asperiores? Error recusandae in quod quibusdam est, earum ullam, blanditiis illo expedita. Iste vel voluptatem error similique quasi voluptas nihil vero sed, sint, ad praesentium porro. Tempore ipsum id, accusantium unde ullam hic iusto perferendis consequatur quasi eligendi. Deserunt dolore iste fugiat animi similique quaerat, a distinctio sed autem adipisci delectus itaque modi et pariatur. Alias maiores sed nisi unde accusamus nam eos. Accusamus maiores vero quas aspernatur optio nisi, praesentium, voluptas. Dolor nam fugit, facere minus enim laborum voluptas facilis illo quidem animi doloremque ratione, sint, corrupti sunt consequatur laboriosam. Minima rerum sit obcaecati harum fugiat dolorem odit, excepturi officia magnam eos quas, accusantium. Odit hic assumenda eligendi, facere molestias aut qui voluptates eum ipsa ullam eaque, dolores repellat et esse tenetur eos! Quae odio natus inventore qui doloribus ut pariatur maxime atque nisi! Ad, iste ex, sequi quidem quae, tenetur sed blanditiis ipsum illum obcaecati doloribus impedit eveniet nostrum non deserunt atque deleniti modi architecto sunt id nisi a ipsa. Beatae, asperiores ipsa sapiente accusamus impedit rem, at voluptatum, commodi ducimus nisi incidunt! Iusto, ab rerum vitae molestiae eligendi adipisci, suscipit. Reiciendis, consequatur dignissimos perferendis. Repellat perferendis quibusdam molestias sapiente dolores numquam ea possimus recusandae quia aliquid odio incidunt, repellendus nostrum vero quidem hic voluptatibus dignissimos culpa. Aspernatur nam natus rerum sit! Qui iste praesentium expedita dignissimos tempore dolorum quisquam, consequuntur accusantium, doloribus cumque in voluptatibus odit itaque aperiam laudantium. Ut cumque neque consequatur iste. Quod fugiat labore perferendis similique, dolores adipisci! Sunt, quasi unde. Aut assumenda atque sint quam, iusto fugiat consequatur quis molestiae hic fuga similique placeat voluptates facere doloribus, corrupti magni adipisci, laudantium odit obcaecati, accusamus voluptate minus laborum pariatur vero. A reprehenderit veritatis et, provident laborum quibusdam, numquam reiciendis. Quibusdam illum autem exercitationem commodi, repellendus voluptatibus itaque ipsum et tempore, quia reiciendis, mollitia magni delectus? Incidunt eveniet, ducimus repellendus! Consequuntur itaque, asperiores recusandae, officia debitis iusto quas quos minus ea, quia cumque iure et perferendis cum consequatur veniam placeat assumenda nisi est repudiandae nesciunt illum rerum! Sint, labore. Laborum dolorem nihil voluptatum quaerat quam, culpa inventore nam quisquam eveniet vel aut corrupti quo sunt numquam blanditiis, consectetur eum excepturi suscipit? Quisquam, aperiam, amet. Cupiditate tempora sed a optio, dolor voluptatem architecto, qui rem laboriosam tempore, asperiores ipsam quibusdam, nihil distinctio. Corporis quasi praesentium impedit rem quia sed nam adipisci sunt, debitis odit, deserunt dolorem alias, ab neque aut eveniet recusandae? Commodi minus placeat velit atque earum sequi necessitatibus optio id aliquid ex totam temporibus amet mollitia libero assumenda quod repellat laboriosam sapiente delectus qui, vero officiis. Sit, error. In rem praesentium tempora fuga porro dolorem velit consequuntur, saepe nulla maxime enim ratione laudantium sapiente iusto, voluptates aut quo, ea unde eos rerum totam a tempore ipsum. Id fuga nesciunt unde, saepe mollitia tempore? Odio porro tempore voluptas nesciunt reiciendis doloremque minus commodi. Saepe alias ratione neque magnam molestiae vero veniam, porro praesentium delectus facilis reprehenderit nostrum nulla! Sint fuga sapiente accusamus, odio veritatis quae, explicabo labore a et, ipsam quidem magnam perspiciatis nulla quo alias iure soluta nisi modi porro! Pariatur recusandae ullam doloribus animi eius numquam dolorum deleniti neque dignissimos velit, illum quo rem corporis alias? Suscipit quo mollitia nam non sapiente sint nihil voluptatem deserunt harum. Architecto eveniet ipsum veniam quibusdam, nam, fugiat deserunt repellat, expedita delectus omnis dicta similique nostrum cum aut. Nostrum, alias, reiciendis. Commodi modi laboriosam expedita dolore, veniam ipsa suscipit laudantium aspernatur. Praesentium quisquam eveniet aliquam explicabo eius consequatur dolores dolore ipsam, enim deserunt placeat quibusdam, consectetur inventore architecto labore accusantium alias maxime sunt totam sequi! Quod qui quo ex eos recusandae magnam consectetur, delectus tempore nihil adipisci. Ipsam incidunt, unde nesciunt cumque natus eligendi quo odit quisquam. Eveniet cupiditate quidem harum, nisi dignissimos itaque veritatis repudiandae similique fugit magni ad nostrum nobis quis nulla ratione officia libero nihil incidunt, labore iure. Cumque eligendi nulla pariatur nihil sapiente dicta ullam doloribus, ab accusamus qui quo quae mollitia reiciendis. Accusantium, ex, ipsam. Voluptatem quaerat ea maxime dolore, aliquid esse mollitia natus praesentium repudiandae vel debitis eligendi labore beatae distinctio consequuntur nobis cupiditate, nesciunt, earum corporis quisquam eveniet. Cum autem, consequatur sapiente adipisci. Quibusdam, voluptatibus deleniti ad cum recusandae esse voluptas aut consequatur. Perspiciatis maiores tenetur illum repellendus quaerat voluptates vero sequi omnis vel molestias eaque facere nihil ducimus, reprehenderit, commodi, repellat alias facilis unde ipsam debitis dicta ea ullam qui. Necessitatibus totam id delectus consequuntur veritatis rerum cumque alias et consequatur quia eveniet, blanditiis corrupti, labore iure ratione. Rerum debitis consequuntur et similique provident modi sed eligendi, asperiores molestias recusandae reprehenderit beatae in iusto dolorum fugit accusantium sunt, nostrum aliquid nam. Eum, tempore assumenda asperiores ipsa, placeat cumque fugit, quia doloribus repellendus eos laudantium. Esse alias delectus rerum, ad praesentium laborum, facilis quas quae blanditiis dolore saepe quo doloremque architecto sequi quidem quod atque officia cupiditate eligendi illo. Omnis distinctio voluptate reprehenderit, ab ipsam modi tenetur officiis temporibus alias ad eum enim, totam mollitia quae facere, nesciunt impedit porro ipsa. Cumque laborum minus vel quia quae blanditiis quo, dolores ducimus culpa reprehenderit quos eaque excepturi officia harum nam. Iste iure, soluta, deserunt aliquam obcaecati officia alias asperiores vero illo perferendis ad recusandae laborum quisquam facere quia repudiandae quis molestiae assumenda similique. Sed et corrupti illum est suscipit accusantium, possimus. Omnis, tenetur ducimus placeat! Laborum commodi, cum maxime provident ab sed praesentium! Quibusdam in ipsam quos nam ex eveniet incidunt commodi rem unde atque ipsa officia, obcaecati optio eligendi, sunt vero consectetur minus neque quo. Adipisci similique, repudiandae atque nihil doloribus dolor fugiat quia assumenda ad inventore molestiae, eius iure distinctio! Ex, rem. Similique consectetur unde maxime distinctio praesentium quam est non assumenda velit officiis accusamus, eius explicabo fugiat delectus quae, asperiores! Tempora tempore sint quasi id ad maxime facilis asperiores a explicabo possimus, hic ducimus vero harum perspiciatis repellat officiis. Placeat harum, blanditiis doloremque fugiat nemo incidunt culpa quis aspernatur ex. Eveniet hic nobis dolores ullam eaque accusantium et vitae beatae iste ducimus, minus officiis dolore deleniti cumque omnis itaque consectetur est inventore nihil at quidem eum magni dolorem praesentium voluptate. Vitae repellendus minima delectus deserunt nemo ullam vel perspiciatis non ut molestias harum, consequatur aspernatur optio suscipit sunt hic magnam cum est, ipsa accusantium natus laboriosam facere quia blanditiis. Vitae officia possimus praesentium ipsam dolore provident deserunt illum rerum iure aspernatur, eos quasi similique blanditiis, iusto ipsum harum explicabo. Cupiditate unde, sequi voluptate voluptatem a velit minima odit non voluptates nam fugiat amet eius harum asperiores possimus. Reprehenderit deleniti hic eaque non ut consequatur a qui, quae doloribus aliquid. Ut magni rem mollitia culpa fugiat illum sapiente doloremque beatae nam itaque alias quasi necessitatibus, nesciunt voluptates sint praesentium blanditiis modi dolores. Tenetur magnam dolore eum perferendis, corrupti ea possimus modi. Quibusdam ex sit libero dicta minima eaque in ea nam consequuntur minus excepturi, rem, debitis praesentium. Dicta eligendi consequatur sed praesentium magni est placeat nulla, doloremque quae et beatae adipisci culpa maxime asperiores sint consequuntur voluptate facilis quia sapiente ad officiis quis. Eius ullam saepe blanditiis necessitatibus provident corrupti delectus, laboriosam facilis eos nulla aspernatur nobis officiis sed quis consectetur dicta nemo harum quae? Soluta pariatur, assumenda optio porro praesentium veritatis culpa tempora quisquam reprehenderit, temporibus et aspernatur corporis alias impedit quibusdam nobis atque velit ad! Officiis soluta nostrum perspiciatis mollitia dicta perferendis quas quo totam quod dolores. Sit, consectetur, beatae. Tempora maiores fuga minus dicta reprehenderit optio consectetur reiciendis error, impedit, doloremque perspiciatis ipsam aspernatur vel voluptas officiis accusamus. Deleniti, iure inventore magni? Impedit, fugiat, dolores. Beatae unde expedita, deserunt labore, nemo iste nam voluptatum ipsam maxime ea dolor quam tempora, qui molestiae mollitia blanditiis! Omnis inventore sequi modi eveniet debitis! Enim minus vel sit explicabo perspiciatis cum sint, rem, dolore officia autem sed perferendis. Ratione fuga, veritatis sint qui. Vero quos eaque iure mollitia distinctio rerum aliquam aperiam a debitis iste sapiente fugit provident maxime possimus veniam aut repellat nostrum sint voluptas sit optio laudantium similique, itaque repellendus. Impedit, consectetur. Laudantium placeat a voluptates consectetur cumque repellendus facilis, eveniet fugiat veritatis aut rerum, ut mollitia molestias eos ducimus quas voluptate blanditiis assumenda quia tenetur officiis labore eaque reiciendis. Accusantium fugiat, inventore! Maiores quasi, laboriosam veniam nesciunt voluptate ad ipsum. Rem dolores inventore aperiam iure possimus soluta, magnam fugiat id nisi illo ea deserunt, ratione optio consequatur facilis maiores esse sint ipsum obcaecati tenetur dolor sequi! Consequatur minus dolor eligendi nisi numquam reprehenderit est, in quidem quae, quis fuga fugiat vel consectetur magni rerum itaque labore explicabo beatae iusto voluptatum libero eos. Modi laboriosam, minima, quam tenetur, neque porro voluptas a asperiores nisi iusto quasi autem temporibus tempore amet delectus quo qui nihil et. Ut magnam hic dolor velit molestiae ipsa reiciendis excepturi commodi aspernatur, animi laboriosam repellendus delectus voluptatibus maxime fugit alias quo natus facilis molestias eum veritatis possimus expedita. Ut architecto nulla quasi nam repellat incidunt dignissimos iusto optio consectetur, facere laborum vel, ipsa dicta, atque libero quaerat doloribus natus quo earum aspernatur odit recusandae illo! Ex dolorem nulla, explicabo, corporis, optio nam quo nesciunt deleniti ea consequuntur esse temporibus excepturi placeat at qui maxime! Voluptate accusantium delectus accusamus reiciendis dignissimos, odit, quisquam inventore itaque aperiam iusto deleniti aliquam. Facilis quas laborum ducimus debitis tempora doloremque dicta cupiditate, eos alias, aspernatur nostrum consequuntur, id minima! Nobis velit, doloribus veritatis pariatur totam accusantium. Voluptas enim laboriosam debitis corporis, nesciunt rem odit vero magni explicabo voluptatibus aspernatur! Enim soluta ratione iure eum, dolor corrupti. Labore inventore est at esse, quibusdam fugiat blanditiis facere culpa facilis ex, iste rem a nam quidem quia ad iure magnam. Aspernatur expedita inventore aut odio voluptatum dignissimos voluptatem, corporis dolorum cum consectetur reprehenderit eligendi nihil in ab aliquam sed, iusto pariatur deserunt distinctio similique rem sequi est quo nulla beatae. Quia provident, incidunt voluptatum excepturi culpa corporis, earum modi consectetur officia at possimus illo. Expedita veritatis nam reiciendis aliquid, ab, vero, illo sunt ratione obcaecati praesentium quaerat vitae deleniti recusandae nesciunt harum doloribus optio architecto atque quia excepturi in similique! Quae illum, quo architecto voluptatem voluptates, dicta quasi accusamus veniam nam itaque ut excepturi impedit reiciendis vitae dignissimos animi cum, debitis totam maxime, iste perspiciatis omnis! Eligendi, ipsam est officia. Officia dignissimos repellat possimus iure eveniet. Et sequi, minima recusandae? Sit exercitationem quas, repellendus omnis provident sint soluta voluptas mollitia aliquid reprehenderit sapiente quo nobis quibusdam officiis autem vitae neque qui, culpa dolores molestias. Doloremque, error nostrum alias fugit ea explicabo vel exercitationem possimus, quam minus provident atque earum culpa dolorem, tempora veritatis? Eligendi necessitatibus, cum porro, velit officia hic, deserunt voluptatem aspernatur ut impedit alias quasi. Necessitatibus, qui molestias laudantium sunt consectetur nesciunt, itaque fugit! Totam reprehenderit, amet labore repellat soluta consequuntur. Placeat culpa accusamus ex, molestiae magnam similique repudiandae a quisquam perferendis voluptates? Omnis ducimus corporis aliquam quasi eligendi iusto in culpa accusamus velit consequatur enim quibusdam nesciunt impedit dolorum illo aliquid numquam rem, dignissimos totam dolor. Magnam error consequuntur quod, suscipit, est saepe modi culpa enim facere dolorum officiis consectetur temporibus neque! Accusantium quas, eaque quia nostrum dolorem dolorum quaerat quo, illum ratione eos! Facere vero, iure vitae. Expedita, illo vitae nihil asperiores, neque amet excepturi. Minima odit quidem neque molestiae placeat eum cumque veniam porro molestias tempore, alias ipsam necessitatibus pariatur. Quia odio praesentium perspiciatis maiores. Sequi error molestiae earum et beatae fugit recusandae labore a dolorum sit architecto ipsa, quo reiciendis odit consequatur quibusdam voluptates dolorem unde quasi, sapiente vero. Et eaque non repellat quasi corporis earum recusandae hic provident vel alias, quaerat reprehenderit incidunt repudiandae voluptatum? Ex odit magni incidunt eligendi, voluptates esse explicabo similique atque omnis adipisci cum impedit laborum voluptas consequuntur neque debitis officiis, hic temporibus culpa cumque accusantium laboriosam?</p>
</details>
<hr />
<details name="example">
<summary>Inventory</summary>
<ul>
<li>...</li>
<li>...</li>
</ul>
</details>
<hr />
<details name="example">
<summary>Spells</summary>
<ul>
<li>...</li>
<li>...</li>
</ul>
</details>
</div>
</body>
</html>
hr {
margin: 0 0 var(--pico-typography-spacing-vertical) 0;
}
details[open] {
flex: 1 1 auto;
overflow-y: auto;
}
html,
body,
.container {
height: 100%
}
.container {
display: flex;
flex-direction: column;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment