Insert reference
Every insert that ships with FEWD Studio, by category, with what each one gives you.
Everything below is typed as /name followed by Enter. How they work is on the
Inserts page.
A -c suffix means the version carrying BEM classes, with a stylesheet to match.
The name without it is the bare structure.
HTML
Widgets — each with real focus management, keyboard handling and ARIA:
/accordion · /accordion-c
/modal · /modal-c
/tabs · /tabs-c
/form · /form-c
/nav · /nav-c
/range · /range-c
/carousel · /carousel-c
/select · /select-c
Sections:
/hero · /hero-c
/section · /section-c
/card-c
/footer-c
/review-section-template
CSS
Widget stylesheets — the partner to each -c widget above:
/accordion · /modal · /tabs · /form · /nav · /range · /carousel ·
/select
Layout:
/flex-c · /flex-c-center · /flex-r
/flex-between · /flex-between-wrap
/grid-2 · /grid-3 · /grid-auto
Pieces:
/card · /media · /overlay-dark · /overlay-light
Note that /card, /flex-between and a few others are bare declaration blocks
meant to be pasted inside a rule, not appended to a stylesheet. FEWD will not
offer those for one-click install, for that reason.
JavaScript
Widget behaviour — binds by data- attribute, so it drives both variants:
/accordion · /modal · /tabs · /form · /nav · /range · /carousel
Basics:
/dom-ready · /click-class · /add-class · /remove-class · /scroll-to ·
/button-test
Astro
Structure:
/layout · /layout-with-nav
/component
/page · /page-with-data
/dynamic-route
Images:
/image-import · /image-tag · /image-public
Composition:
/slot-named · /slot-provide
/conditional · /loop
/fetch-json
Content collections:
/content-collection-config · /content-collection-page
Shopify
Storefront API patterns:
/storefront-client
/product-card · /products-list · /product-by-handle
/collections-list · /collection-products
/cart-create · /cart-add-item
/search-products
SEO
Meta:
/meta-basic · /meta-full · /open-graph · /twitter-card
JSON-LD:
/jsonld-organization · /jsonld-website · /jsonld-article ·
/jsonld-product · /jsonld-event · /jsonld-profile-page ·
/jsonld-breadcrumb · /jsonld-localbusiness · /jsonld-faq
Forms
A form is a page and somewhere for it to post. Which pair you need depends on where the site is hosted, not on what generated it — so these live in a tab of their own. Setting one up end to end is in Astro or in a static site.
Astro with an adapter — one file, it handles its own POST:
/astro-contact
A static site on a host that runs functions — Hugo, 11ty, Jekyll, or Astro with no adapter. Two files:
/static-contact · /api-contact
No server at all — a third party receives it:
/hosted-contact
The credential is never in any of these. On a static site nothing runs in the
browser, so /api-contact is built into a function by the host and the key
lives in that host’s settings.
Your own
Anything you save appears under Custom in the insert modal, alongside these, and is available in every project.