Most Pico pages combine containers, semantic landmarks, and occasional grid or button variant classes. Below are recipes you will see in docs sites and internal tools.
Patterns
- Docs shell —
header+main.container+footer - Centered landing — single
main.containerwith heroheadergroup and CTAbutton - Card feed — stacked
articleelements (no grid required) - Split actions — primary
buttonplusclass="secondary outline"for cancel
Pair with data-theme="dark" on html for marketing or dev-tool aesthetics—see the theming chapter later in this track.
Important interview questions and answers
- Q: Where does
containergo?
A: Typically onmain(and sometimesheader/footer) to cap width while keeping landmarks semantic—avoid replacingmainwith a barediv.container. - Q: Pico vs Bootstrap for a dashboard?
A: Bootstrap’s grid and JS widgets fit dense apps; Pico excels at readable content pages with little markup noise.
Self-check
- Sketch the landmark order for a docs shell.
- Which button classes might represent a secondary vs high-contrast action?