Welcome to the pattern library for the T Capital front end build.
The vendor JS file must be included in your site before the app.js file
Filters are only functional on non paginated components. The filters on paginated components will need to be handled by whatever CMS the site is built on. Non paginated components like the portfolio and team components are using JS Isotope for filtering.
This build uses Bootstrap for layout as well as for components like modals.
This library is build on Fractal JS and may well be cached ion your browser if you've visited the site previosly. Please make sure your browser cache is cleared to see up to date components.
In this library everything you browse in the UI is just a “collection” of patterns—under the hood these are all handled by the same API, but it’s often helpful to split your patterns up into logical groups. In your case you’ve defined three top-level collections—Global, Components and Templates.
Global The “Global” collection is typically where you put your site-wide design foundations and utilities. Think design tokens (colours, spacing, typography scale), CSS/Sass mixins, utility classes, helper components (e.g. a grid wrapper or icon helper), or even shared context data that every component can consume.
Components This is your core library of reusable UI building blocks: buttons, form elements, cards, navigation items—anything you break out as a standalone piece of markup with its own variants, assets and documentation. Fractal treats every piece of your markup as a “component,” whether it’s a tiny atom or a larger molecule or organism.
Templates While “Components” are your individual bits and pieces, “Templates” are full-page or layout patterns—think your page shells, article layouts, listing pages—where you stitch components together in a real-world context. They let you preview what an assembled page looks like, with its own context data.
When you browse a component in Fractal’s UI, you get a row of panels (or “tabs”) that let you explore everything about that component in one place. By default you’ll see six panels in this order:
HTML The raw template source for that variant—your .hbs, .twig, .njk or plain-HTML file, including any template tags.
View A live preview of the component rendered with the current context and, if you choose, wrapped in your preview layout.
Context The JSON or YAML data that’s being passed into the template—i.e. the sample data that drives this variant.
Resources Any static assets tied to the component (SCSS, JS, images, etc.), with links to view/download each one.
Info Metadata about the component: its handle, any tags you’ve assigned, filesystem path, references/referenced-by, statuses, etc.
Notes Markdown-flavored documentation you’ve written (from a notes property or a notes.md file in the component folder), for usage guidelines, accessibility notes, etc.
Bladonmore 2025