SKINKIT FIELD GUIDE / COMPONENTS
Shared component classes
A reference for the stable navigation, hero, button, card, form, listing, and footer classes shared by SkinKit themes.
Same structure, different skin
Every theme styles a shared set of classes. Write semantic HTML and use these names for the pieces you want styled. Extra site-specific classes are welcome.
| Component | Class names | Use it for |
|---|---|---|
| Navigation | .nav .brand .brand-mark .nav-links .nav-actions | Site identity, primary links, and account actions. |
| Hero | .hero .hero-inner .hero-badge .hero-title .hero-sub .hero-cta | A page introduction with one clear heading and optional links. |
| Buttons | .btn .btn-primary .btn-ghost .btn-sm .btn-lg | Anchors for navigation; buttons for actions. |
| Cards | .card .card-media .card-body .card-eyebrow .card-title .card-desc .card-actions | Products, projects, services, or articles. |
| Testimonials | .testimonial .ts-quote .ts-body .ts-text .ts-author | A quote and its attribution. |
| Forms | .field .field-label .input .select | Visible labels paired with their controls. |
| Listings | .listing .listing-row .listing-thumb .listing-body .listing-title .listing-sub | Related links, updates, services, or products. |
| Footer | .footer .footer-grid .footer-brand .footer-col .footer-bottom | Supporting links and site details. |
A card you can adapt
<article class="card">
<div class="card-media" aria-hidden="true"></div>
<div class="card-body">
<p class="card-eyebrow">Selected work</p>
<h2 class="card-title">A project with purpose</h2>
<p class="card-desc">A short description in your own voice.</p>
<div class="card-actions">
<a class="btn btn-primary" href="/work/">See the work</a>
</div>
</div>
</article>Some samples use additional helper classes for their artwork. Core component classes are the portable contract; inspect a theme's README for sample-specific details.