/* Custom Class-less version for React */ + +// Set the root element +$semantic-root-element: "#root"; + +// Enable <header>, <main>, <footer> inside $semantic-root-element as containers +$enable-semantic-container: true; + +// Enable .classes +$enable-classes: false; + +// Import Pico +@import "@picocss/pico/scss/pico";

Device	Extra small	Small	Medium	Large	Extra large
Breakpoint	<576px	≥576px	≥768px	≥992px	≥1200px
Viewport	100%	540px	720px	960px	1140px

Device

Extra small

Small

Medium

Large

Extra large

Breakpoint

<576px

≥576px

≥768px

≥992px

≥1200px

Viewport

100%

540px

720px

960px

1140px

/* Light scheme (Default) */ +/* Can be forced with data-theme="light" */ +[data-theme="light"], +:root:not([data-theme="dark"]) { + --primary: …; + --primary-hover: …; + --primary-focus: …; + --primary-inverse: …; +} + +/* Dark scheme (Auto) */ +/* Automatically enabled if user has Dark mode enabled */ +@media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme]) { + --primary: …; + --primary-hover: …; + --primary-focus: …; + --primary-inverse: …; + } +} + +/* Dark scheme (Forced) */ +/* Enabled if forced with data-theme="dark" */ +[data-theme="dark"] { + --primary: …; + --primary-hover: …; + --primary-focus: …; + --primary-inverse: …; +} + +/* (Common styles) */ +:root { + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); +} +

/* Custom version */ + +// Custom theme +@import "path/themes/custom"; + +// Import needed components +@import "@picocss/pico/scss/pico/layout/document"; +@import "@picocss/pico/scss/pico/layout/sectioning"; +… +

+ ${require('./_sidebar.html') active=`dropdowns-link`} + +

+ +

Dropdowns

Dropdown menus and custom selects without JavaScript.

+ +

Dropdowns are built with <details role="list"> as a wrapper and <summary> and <ul> as direct children.

For style consistency with the form elements, dropdowns are styled like a <select> by default.

+ + +

+ +

<!-- Dropdown -->
+<details role="list">
+  <summary aria-haspopup="listbox">Dropdown</summary>
+  <ul role="listbox">
+    <li><a>Action</a></li>
+    <li><a>Another action</a></li>
+    <li><a>Something else here</a></li>
+  </ul>
+</details>
+
+<!-- Select -->
+<select>
+  <option value="" disabled selected>Select</option>
+  <option>…</option>
+</select>
+

+ +

<summary role="button"> transforms the dropdown into a button.

+ + +

+ +

<!-- Primary -->
+<details role="list">
+  <summary aria-haspopup="listbox" role="button">
+    Dropdown as a button 1
+  </summary>
+  <ul role="listbox">
+    <li><a>Action</a></li>
+    <li><a>Another action</a></li>
+    <li><a>Something else here</a></li>
+  </ul>
+</details>
+
+<!-- Secondary -->
+<details role="list">
+  <summary aria-haspopup="listbox" role="button" class="secondary">
+    Dropdown as a button 2
+  </summary>
+  <ul role="listbox">
+    <li><a>Action</a></li>
+    <li><a>Another action</a></li>
+    <li><a>Something else here</a></li>
+  </ul>
+</details>
+
+<!-- Contrast -->
+<details role="list">
+  <summary aria-haspopup="listbox" role="button" class="contrast">
+    Dropdown as a button 3
+  </summary>
+  <ul role="listbox">
+    <li><a>Action</a></li>
+    <li><a>Another action</a></li>
+    <li><a>Something else here</a></li>
+  </ul>
+</details>
+

+ +

Dropdowns can be used as custom selects with <input type="radio"> or <input type="checkbox">

+ + +

+ +

<!-- With radio buttons -->
+<details role="list">
+  <summary aria-haspopup="listbox">Dropdown</summary>
+  <ul role="listbox">
+    <li>
+      <label for="small">
+        <input type="radio" id="small" name="size" value="small">
+        Small
+      </label>
+    </li>
+    <li>
+      <label for="medium">
+        <input type="radio" id="medium" name="size" value="medium">
+        Medium
+      </label>
+    </li>
+    <li>
+      <label for="large">
+        <input type="radio" id="large" name="size" value="large">
+        Large
+      </label>
+    </li>
+  </ul>
+</details>
+
+<!-- With checkboxes -->
+<details role="list">
+  <summary aria-haspopup="listbox">Dropdown</summary>
+  <ul role="listbox">
+    <li>
+      <label>
+        <input type="checkbox">
+        Banana
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox">
+        Watermelon
+      </label>
+    </li>
+    <li>
+      <label>
+        <input type="checkbox">
+        Apple
+      </label>
+    </li>
+  </ul>
+</details>
+              
+


+          Dropdowns can be used inside a <nav> with a nested <details role="list">
+          Example with a dropdown as a link:
+          
+            
+              
+                Brand
+              
+              
+                Link
+                
+                  
+                    Dropdown
+                    
+                      Action
+                      Another action
+                      Something else here
+                    
+                  
+                
+              
+            
+            
+
+<nav>
+  <ul>
+    <li><strong>Brand</strong></li>
+  </ul>
+  <ul>
+    <li><a href="#">Link</a></li>
+    <li>
+      <details role="list" dir="rtl">
+        <summary aria-haspopup="listbox" role="link">Dropdown</summary>
+        <ul role="listbox">
+          <li><a>Action</a></li>
+          <li><a>Another action</a></li>
+          <li><a>Something else here</a></li>
+        </ul>
+      </details>
+    </li>
+  </ul>
+</nav>
+
+             
+          
+          Example with a default dropdown and a dropdown as a button:
+          
+            
+              
+                
+                  
+                    Dropdown
+                    
+                      Action
+                      Another action
+                      Something else here
+                    
+                  
+                
+                
+                  
+                    Dropdown
+                    
+                      Action
+                      Another action
+                      Something else here
+                    
+                  
+                
+              
+            
+            
+
+<nav>
+  <ul>
+    <li>
+      <details role="list">
+        <summary aria-haspopup="listbox">Dropdown</summary>
+        <ul role="listbox">
+          <li><a>Action</a></li>
+          <li><a>Another action</a></li>
+          <li><a>Something else here</a></li>
+        </ul>
+      </details>
+    </li>
+    <li>
+      <details role="list">
+        <summary aria-haspopup="listbox" role="button">Dropdown</summary>
+        <ul role="listbox">
+          <li><a>Action</a></li>
+          <li><a>Another action</a></li>
+          <li><a>Something else here</a></li>
+        </ul>
+      </details>
+    </li>
+  </ul>
+</nav>
+
+             
+          
+          You can also use  <li role="list"> as a nested wrapper to render a list as a dropdown.
+          ℹ️ This syntax is experimental. In this version, the dropdown menu is triggered on hover.
+          
+            
+              
+                Brand
+              
+              
+                Link
+                Link
+                
+                  Dropdown
+                  
+                    Action
+                    Another action
+                    Something else here
+                  
+                
+              
+            
+            
+
+<nav>
+  <ul>
+    <li><strong>Brand</strong></li>
+  </ul>
+  <ul>
+    <li><a href="#">Link</a></li>
+    <li><a href="#">Link</a></li>
+    <li role="list" dir="rtl">
+      <a href="#" aria-haspopup="listbox">Dropdown</a>
+      <ul role="listbox">
+        <li><a>Action</a></li>
+        <li><a>Another action</a></li>
+        <li><a>Something else here</a></li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+
+             
+          
+


+
+        ${require('./_footer.html')}
+
+

+ ${require('./_sidebar.html') active=`forms-link`} + +

+ +

Forms

All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

+ +

Inputs are width: 100%; by default. You can use .grid inside a form.

All native form elements are fully customizable and themeable with CSS variables.

+ +

<form>
+
+  <!-- Grid -->
+  <div class="grid">
+
+    <!-- Markup example 1: input is inside label -->
+    <label for="firstname">
+      First name
+      <input type="text" id="firstname" name="firstname" placeholder="First name" required>
+    </label>
+
+    <label for="lastname">
+      Last name
+      <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
+    </label>
+
+  </div>
+
+  <!-- Markup example 2: input is after label -->
+  <label for="email">Email address</label>
+  <input type="email" id="email" name="email" placeholder="Email address" required>
+  <small>We'll never share your email with anyone else.</small>
+
+  <!-- Button -->
+  <button type="submit">Submit</button>
+
+</form>

+ +

Disabled and validation states:

+ +

<input type="text" placeholder="Valid" aria-invalid="false">
+<input type="text" placeholder="Invalid" aria-invalid="true">
+<input type="text" placeholder="Disabled" disabled>
+<input type="text" value="Readonly" readonly>

+ +

<fieldset> is unstyled and acts as a container for radios and checkboxes, providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

+ Fruit + +

+ Size + + + Small + + + + Medium + + + + Large + + + + Extra Large + +

+ + + I agree to the Terms and Conditions + + + + I agree to share my information with partners + +

+ + + Publish on my profile + + + + User must change password at next logon + +

+ +

<!-- Select -->
+<label for="fruit">Fruit</label>
+<select id="fruit" required>
+  <option value="" selected>Select a fruit…</option>
+  <option>…</option>
+</select>
+
+<!-- Radios -->
+<fieldset>
+  <legend>Size</legend>
+  <label for="small">
+    <input type="radio" id="small" name="size" value="small" checked>
+    Small
+  </label>
+  <label for="medium">
+    <input type="radio" id="medium" name="size" value="medium">
+    Medium
+  </label>
+  <label for="large">
+    <input type="radio" id="large" name="size" value="large">
+    Large
+  </label>
+  <label for="extralarge">
+    <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
+    Extra Large
+  </label>
+</fieldset>
+
+<!-- Checkboxes -->
+<fieldset>
+  <label for="terms">
+    <input type="checkbox" id="terms" name="terms">
+    I agree to the Terms and Conditions
+  </label>
+  <label for="terms_sharing">
+    <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
+    I agree to share my information with partners
+  </label>
+</fieldset>
+
+<!-- Switches -->
+<fieldset>
+  <label for="switch">
+    <input type="checkbox" id="switch" name="switch" role="switch">
+    Publish on my profile
+  </label>
+  <label for="switch_disabled">
+    <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch_disabled" disabled checked>
+    User must change password at next logon
+  </label>
+</fieldset>

+ +

You can change a checkbox to an indeterminate state by setting the indeterminate property to true

+ + + Select all + + +

+ +

<script>
+  document.getElementById('indeterminate-checkbox').indeterminate = true;
+</script>

+ +

Others input types:

+ + File browser + + + Range slider + + + Date + + + Time + + + Color + + +

+ +

<!-- Search -->
+<input type="search" id="search" name="search" placeholder="Search">
+
+<!-- File browser -->
+<label for="file">File browser
+  <input type="file" id="file" name="file">
+</label>
+
+<!-- Range slider -->
+<label for="range">Range slider
+  <input type="range" min="0" max="100" value="50" id="range" name="range">
+</label>
+
+<!-- Date -->
+<label for="date">Date
+  <input type="date" id="date" name="date">
+</label>
+
+<!-- Time -->
+<label for="time">Time
+  <input type="time" id="time" name="time">
+</label>
+
+<!-- Color -->
+<label for="color">Color
+  <input type="color" id="color" name="color" value="#0eaaaa">
+</label>

+ +

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`grid-link`} + +

+ +

Grid

`.grid` enable a minimal grid system with auto-layout columns.

+ +

<div class="grid">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>

+ +

Columns intentionally collapses below large devices (992px)

To go further, discover how to merge Pico with the Bootstrap grid system.

+ + More about grids +

As Pico focuses on native HTML elements, we kept this grid system very minimalist.

A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.

If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.

If you need a light and custom grid, you can look at CSS Grid Generators. For example, CSS Grid Generator, Layoutit! or Griddy.

Alternatively, you can learn about CSS Grid.

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`start-link`} + +

+ +

Usage

Works without package manager or dependencies 🙂!

+ +

There are 4 ways to get started with Pico CSS:

Install manually

Download Pico and link /css/pico.min.css in the <head> of your website.

<link rel="stylesheet" href="css/pico.min.css">

Install from CDN

Alternatively, you can use jsDelivr CDN to link pico.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

Install with NPM

npm install @picocss/pico

Install with Composer

composer require picocss/pico

Starter HTML template:

+ +

<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/pico.min.css">
+    <title>Hello, world!</title>
+  </head>
+  <body>
+    <main class="container">
+      <h1>Hello, world!</h1>
+    </main>
+  </body>
+</html>

+ +

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`loading-link`} + +

+ +

Loading

`aria-busy="true"` enable a loading indicator.

+ +

+ + +

+ +

<button aria-busy="true">Please wait…</button>
+<button aria-busy="true" class="secondary"></button>

+ +

It can be applied to any block:

<article aria-busy="true"></article>

Or any text element:

+ Generating link, please wait… +

<a href="#" aria-busy="true">Generating link, please wait…</a>

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`modal-link`} + +

+ +

Modal

The classic modal element with graceful spacings across devices and viewports.

+ + +

Modals are built with <dialog> as a wrapper and <article> as a content container.

Inside <header>, <a class="close"> is defined to float: right; allowing a close icon to be top aligned with a title.

+ + + +

<dialog open>
+  <article>
+    <header>
+      <a href="#close" aria-label="Close" class="close"></a>
+      Modal title
+    </header>
+    <p>
+      Nunc nec ligula a tortor sollicitudin dictum in vel enim. 
+      Quisque facilisis turpis vel eros dictum aliquam et nec turpis. 
+      Sed eleifend a dui nec ullamcorper. 
+      Praesent vehicula lacus ac justo accumsan ullamcorper.
+    </p>
+  </article>
+</dialog>

+ +

Inside <footer>, the content is right aligned by default.

+ + + +

<dialog open>
+  <article>
+    <h3>Confirm your action!</h3>
+    <p>
+      Mauris non nibh vel nisi sollicitudin malesuada. 
+      Donec ut sagittis erat. Praesent eu eros felis. 
+      Ut consectetur placerat pulvinar.
+    </p>
+    <footer>
+      <a href="#cancel" role="button" class="secondary">Cancel</a>
+      <a href="#confirm" role="button">Confirm</a>
+    </footer>
+  </article>
+</dialog>

+ + +

Live demo

Toggle a modal by clicking the button below.

+ + +

+ +

<!-- Button to trigger the modal -->
+<button class="contrast"
+  data-target="modal-example"
+  onClick="toggleModal(event)">
+  Launch demo modal
+</button>
+
+<!-- Modal -->
+<dialog id="modal-example">
+  <article>
+    <a href="#close"
+      aria-label="Close"
+      class="close"
+      data-target="modal-example"
+      onClick="toggleModal(event)">
+    </a>
+    <h3>Confirm your action!</h3>
+    <p>
+      Cras sit amet maximus risus. 
+      Pellentesque sodales odio sit amet augue finibus pellentesque. 
+      Nullam finibus risus non semper euismod.
+    </p>
+    <footer>
+      <a href="#cancel"
+        role="button"
+        class="secondary"
+        data-target="modal-example"
+        onClick="toggleModal(event)">
+        Cancel
+      </a>
+      <a href="#confirm"
+        role="button"
+        data-target="modal-example"
+        onClick="toggleModal(event)">
+        Confirm
+      </a>
+    </footer>
+  </article>
+</dialog>

+ +

Pico does not include JavaScript code. You will need to implement your JS to interact with modals.

As a starting point, you can look at this example: modal.js.

To make a modal appear, add the open attribute to the <dialog> container.

+ +

<!-- Open modal-->
+<dialog open>
+  <article>
+  …
+  </article>
+</dialog>
+
+<!-- Modal closed -->
+<dialog>
+  <article>
+    …
+  </article>
+</dialog>
+

+ +

Utilities

Modals come with 3 utility classes.

ℹ️ These classes are not available in the class-less version.

.modal-is-open prevents any scrolling and interactions below the modal.

+ +

<!doctype html>
+<html class="modal-is-open">
+  …
+</html>

+ +

.modal-is-opening brings an opening animation.

+ +

<!doctype html>
+<html class="modal-is-open modal-is-opening">
+  …
+</html>

+ +

.modal-is-closing brings a closing animation.

+ +

<!doctype html>
+<html class="modal-is-open modal-is-closing">
+  …
+</html>

+ +

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`navs-link`} + +

+ +

Navs

The essential navbar component in pure semantic HTML.

+ +

<nav>
+  <ul>
+    <li><strong>Brand</strong></li>
+  </ul>
+  <ul>
+    <li><a href="#">Link</a></li>
+    <li><a href="#">Link</a></li>
+    <li><a href="#" role="button">Button</a></li>
+  </ul>
+</nav>

+ +

<ul> are automatically distributed horizontally.

<li> are unstyled and inlined.

+ +

<nav>
+  <ul>
+    <li><a href="#" class="secondary">…</a></li>
+  </ul>
+  <ul>
+    <li><strong>Brand</strong></li>
+  </ul>
+  <ul>
+    <li><a href="#" class="secondary">…</a></li>
+  </ul>
+</nav>

+ +

Inside <aside>, navs are stacked vertically.

+ +

<aside>
+  <nav>
+    <ul>
+      <li><a href="#">Link</a></li>
+      <li><a href="#">Link</a></li>
+      <li><a href="#">Link</a></li>
+    </ul>
+  </nav>
+</aside>

+ +

With aria-label="breadcrumb", you can turn a nav into a breadcrumb.

+ +

+ + +

+ +

<nav aria-label="breadcrumb">
+  <ul>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Category</a></li>
+    <li>Page</li>
+  </ul>
+</nav>

+ +

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`progress-link`} + +

+ +

Progress

Progress bar element in pure HTML, without JavaScript.

+ +

<progress value="25" max="100"></progress>

+ +

A progress bar without a value attribute is indeterminate.

+ +

<progress></progress>

+ +

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`rtl-link`} + +

+ +

RTL

Support for right-to-left text in Pico.

+ +

To enable RTL in Pico you need to set dir="rtl"on the <html> element (example).

+ +

<!doctype html>
+<html dir="rtl" lang="ar">
+  ...
+</html>

+ +

ℹ️ The RTL feature is still experimental and will probably evolve.

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`scroller-link`} + +

+ +

Horizontal scroller

`<figure>` acts as a container to make any content scrollable horizontally.

+ +

Useful to have responsive <table>

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

+ + +

<figure>
+  <table>
+    …
+  </table>
+</figure>

+ +

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`tables-link`} + +

+ +

Tables

Default styles for tables without `.classes`

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

#	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell
#	Total	Total	Total	Total	Total

+ + +

<table>
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="col">#</th>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+      <td scope="col">Total</td>
+    </tr>
+  </tfoot>
+</table>

+ +

role="grid" enable striped rows.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

#	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

+ + +

<table role="grid">
+  …
+</table>

+ +

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`themes-link`} + +

+ +

Themes

Pico is shipped with 2 consistent themes: Light & Dark.

+ +

The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme: dark

+ +

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">

Light theme

+ +

<article data-theme="light">
+  …
+</article>

+ +

Dark theme

+ +

<article data-theme="dark">
+  …
+</article>

+ +

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`tooltips-link`} + +

+ +

Tooltips

Enable tooltips everywhere in pure HTML, without JavaScript.

+ +

Tooltip on a link

Tooltip on inline element

+ +

<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
+<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
+<p><button data-tooltip="Tooltip">Tooltip on a button</button></p>
+

+ +

data-placement with the values top, right, bottom or left is used to control the position of the tooltip.

+ +

<button data-tooltip="Top" data-placement="top">Top</button>
+<button data-tooltip="Right" data-placement="right">Right</button>
+<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
+<button data-tooltip="Left" data-placement="left">Left</button>
+

+ +

+ + ${require('./_footer.html')} + +

+ ${require('./_sidebar.html') active=`typography-link`} + +

+ +

Typography

+ All typographic elements are responsive, allowing text to scale + gracefully across devices and viewports. +

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Device	Extra small	Small	Medium	Large	Extra large
Base font	16px	17px	18px	19px	20px
`<h1>`	32px	34px	36px	38px	40px
`<h2>`	28px	29px	31.5px	33.25px	35px
`<h3>`	24px	25.5px	27px	28.5px	30px
`<h4>`	20px	21.25px	22.5px	23.75px	25px
`<h5>`	18px	19.125px	20.25px	21.375px	22.5px
`<h6>`	16px	17px	18px	19px	20px
`<small>`	14px	14.875px	15.75px	16.625px	17.5px

+ +

Headings:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>

+ Inside a <hgroup> or a + <div class="headings"> all + margin-bottom are collapsed and the + :last-child is muted. +

Heading 2

Subtitle for heading 2

<hgroup>
+  <h2>Heading 2</h2>
+  <p>Subtitle for heading 2</p>
+</hgroup>

+ +

Inline text elements:

Abbr. abbr

Bold strong b

+ Italic i em + cite +

~~Deleted~~ del

Inserted ins

Ctrl + S kbd

Highlighted mark

~~Strikethrough~~ s

Small small

Text _Sub sub

Text ^Sup sup

Underline u

Links come with .secondary and .contrast styles.

ℹ️ These classes are not available in the class-less version.

+ Primary
+ Secondary
+ Contrast
+

<a href="#">Primary</a>
+<a href="#" class="secondary">Secondary</a>
+<a href="#" class="contrast">Contrast</a>

Blockquote:

+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit + non. Nam at dui sit amet ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+

<blockquote>
+  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. 
+  Nam at dui sit amet ipsum cursus ornare."
+  <footer>
+    <cite>- Phasellus eget lacinia</cite>
+  </footer>
+</blockquote>

+ + ${require('./_footer.html')} +

+ ${require('./_sidebar.html') active=`we-love-classes-link`} + +

We love `.classes`

As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes

But of course, .classes are not a bad practice at all.

Feel free to use modifiers.

<button class="warning">Action</button>

Just try to keep your HTML clean and semantic to keep the Pico spirit.

<button class="button-red margin-large padding-medium">Action</button>

+ + ${require('./_footer.html')} + +

Accordions

Toggle sections of content in pure HTML, without JavaScript.

Buttons

The essential button in pure HTML, without .classes for the default style.

Cards

A flexible container with graceful spacings across devices and viewports.

Class-less version

For wild HTML purists!

Containers

+ .container enable a centered viewport. + .container-fluid enable a 100% layout. +

Customization

You can customize themes with SCSS or, you can edit the CSS variables.

Custom theme

Overriding CSS variables

Importing Pico SASS library

Dropdowns

Dropdown menus and custom selects without JavaScript.

Forms

All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.

Grid

.grid enable a minimal grid system with auto-layout columns.

Usage

Works without package manager or dependencies 🙂!

Install manually

Install from CDN

Install with NPM

Install with Composer

Loading

aria-busy="true" enable a loading indicator.

Modal

The classic modal element with graceful spacings across devices and viewports.

Live demo

Toggle a modal by clicking the button below.

Utilities

Navs

The essential navbar component in pure semantic HTML.

Progress

Progress bar element in pure HTML, without JavaScript.

RTL

Support for right-to-left text in Pico.

Horizontal scroller

<figure> acts as a container to make any content scrollable horizontally.

Tables

Default styles for tables without .classes

Themes

Pico is shipped with 2 consistent themes: Light & Dark.

Light theme

Dark theme

Tooltips

Enable tooltips everywhere in pure HTML, without JavaScript.

Typography

+ All typographic elements are responsive, allowing text to scale + gracefully across devices and viewports. +

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 2

We love .classes

The essential button in pure HTML, without `.classes` for the default style.

+ `.container` enable a centered viewport.
+ `.container-fluid` enable a `100%` layout. +

`.grid` enable a minimal grid system with auto-layout columns.

`aria-busy="true"` enable a loading indicator.

`<figure>` acts as a container to make any content scrollable horizontally.

Default styles for tables without `.classes`

We love `.classes`