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
---