Styling in Trap Kit

  • Use design tokens and utility classes
  • Three levels:
    • Component (include)
    • Layout (div container)
    • Page (body)
  • Example template: Create account
  • Add custom CSS if needed

Component (single)

{% include components/icon.html icon="info" size="4" style="text-info-dark float-left margin-right-1" %}

Component (multiple)

---
layout: centered-column
text-input-style: radius-lg padding-3 border-2px border-base
---

Layout and page

---
layout: centered-column
body-style: bg-base-lightest
layout-style: tablet:width-tablet bg-white margin-top-6 padding-5 radius-lg shadow-3
---
Back to agenda | Next: Styling activity