Examples
Modal Patterns
A focused gallery of 19 modern modal compositions built from official TicFrame modal primitives, forms, buttons, lists, progress, switches, accordions, and UID-only Ticons.
These examples are intentionally application-flavored. For component contracts, options, events, and accessibility tables, use the Modal reference.
Pattern Gallery
Open each pattern to test the interaction. Source blocks show the relevant TicFrame-only structure and can be copied as a starting point.
Pattern shell
<button type="button" class="tf-btn" data-tf-toggle="modal" data-tf-target="#premium-modal">Premium upgrade</button>
<dialog id="premium-modal" class="tf-modal tf-modal-md" aria-labelledby="premium-modal-title">
<button type="button" class="tf-btn tf-btn-icon tf-btn-ghost tf-modal-close" data-tf-dismiss="modal" aria-label="Close premium modal">
<i class="ti ti-028069" aria-hidden="true"></i>
</button>
<div class="tf-modal-hero">
<span class="tf-modal-icon"><i class="ti ti-007892" aria-hidden="true"></i></span>
<h2 id="premium-modal-title" class="tf-text-2xl tf-font-semibold">Upgrade to premium</h2>
<ul class="tf-modal-check-list"><li class="tf-modal-check-item">Advanced components</li></ul>
<button type="button" class="tf-btn tf-btn-primary" data-tf-dismiss="modal">Upgrade for $9/mo</button>
</div>
</dialog>Source Notes
All patterns on this page use documented TicFrame classes and data attributes. The visual building blocks are reusable modal primitives, not website-specific CSS.
| Pattern group | Main TicFrame primitives |
|---|---|
| Upgrade, coupon, destructive, permission | tf-modal-hero, tf-modal-icon, tf-modal-center |
| FAQ and legal | tf-modal-scrollable, tf-accordion, sticky header/footer primitives |
| Product, billing, login | tf-modal-split, tf-input-group, tf-input-addon |
| Paywall, plans, changelog | tf-modal-mobile, tf-modal-timeline, selectable plan primitives |
| Share and integration chooser | tf-modal-share-grid, tf-modal-action-list, data-tf-copy-target |