Small pieces.
Endless possibilities.
Explore the essentials, see them in action, and take the HTML with you. Styled with StyloftCSS, ready for your next idea.
Framework primitives use sl- classes. Branded illustrations and hover effects use a separate demo extension stylesheet ↓, keeping the core small.
Essentials
08 patternsButtons
Clear actions, comfortable targets, and visible keyboard focus.
Cards
Composable surfaces for ideas, projects, plans, and everyday content.
Forms
Real labels, native controls, helpful descriptions, and clear error states.
Accordions
Native disclosures with familiar keyboard interaction. No state library required.
Links
Clear destinations with underline, icon, and hover treatments.
Sliders & carousels
Swipeable scroll-snap galleries, card rails, vertical slides, and native range controls. CSS only.
WYSIWYG editor
Rich-text editor styling with a wrapping toolbar, native editable canvas, and clear focus and validation states.
Tabs & accordions
CSS-only tab layouts, including desktop tabs that become native accordions in narrow containers.
Page sections
04 patternsHeaders
Navigation that wraps gracefully and lets native HTML do the work.
Hero sections
Give an idea a strong introduction with responsive type and clear next steps.
Footers
Close the page with a clear path to the next useful place.
Testimonials
Quote cards, responsive grids, and swipeable testimonial sliders. Ready to compose with CSS only.