tabler — Cursor Rules

Cards • Use card class for main containers • Use card-body for content areas • Use card-header for card headers • Use card-title for card title Buttons • Use btn class for all buttons • Use btn-primary for primary actions • Use btn for secondary actions, don't use btn-outline-secondary • Use btn-sm for smaller buttons • Use w-100 for full-width buttons Forms • Use form-control for input fields • Use form-label for labels • Use form-check for checkboxes/radio buttons • Use form-select for dropdowns Layout • Use Bootstrap grid system (row, col-*) • Use container-xl for main containers • Use page-wrapper for page structure • Use page-body for main content area Badges • Use badge class for badges • Don't use badge-outline for badges, use badge class instead • Don't use badge-primary for badges, use badge class instead • Don't change the text color of badges Markdown • Use markdown class for markdown content • Apply to containers that render markdown content • Example: <div class="markdown">...</div> Rest of the rules • Read the rest of the rules in the docs/content/ui/ folder

When you need to use an icon, always use the Tabler icon include syntax: `html {% include "ui/icon.html" icon="ICON_NAME" %} ` Examples: • {% include "ui/icon.html" icon="home" %} • {% include "ui/icon.html" icon="building-community" %} • {% include "ui/icon.html" icon="map-pin" %}

When linking to other pages, always use the relative page syntax: `html href="{{ page | relative }}/url.html" ` Examples: • href="{{ page | relative }}/job-post.html" • href="{{ page | relative }}/job-listing.html" • href="{{ page | relative }}/marketing/index.html"

All pages are statically generated to HTML using Eleventy (11ty). Keep this in mind when: • Writing frontmatter (must be static YAML, no Liquid templating) • Creating dynamic content (use Liquid templating in the body, not frontmatter) • Linking between pages (use relative paths)