Services

cards with a number, the text and a link: three to six services told equally; the merchant’s own only

role: story pages: about, home motion: reveal

Install

npx shadcn-vue@latest add @trame/content-services   # Vue
npx shadcn@latest add @trame/content-services       # React

cards

@trame/content-services--cards

cards with a number, the text and a link: three to six services told equally; the merchant’s own only

accordion

@trame/content-services--accordion

stacked titles that open to the detail, the first open: services that need more words each; the merchant’s own only

icon-list

@trame/content-services--icon-list

two columns of compact rows with an arrow: seven services or more, quickly scanned; the merchant’s own only

split-feature

@trame/content-services--split-feature

the heading and the picture left, every service as a checklist line in one card right: a short offer shown at once; the merchant’s own only

price-ledger

@trame/content-services--price-ledger

one row per service, the words left and its delay and price in aligned columns right: services the merchant quotes, compared at a glance; the merchant’s own only

lead-and-list

@trame/content-services--lead-and-list

the main service large on a tinted panel, the others as a numbered list beside it: one flagship service and a few lesser ones; the merchant’s own only

package-cards

@trame/content-services--package-cards

equal cards with the points as chips, the words, then the scope as ruled lines aligned across the row (for whom, delay, starting price) and the action: a studio or workshop selling two to four fixed packages, not a subscription; the merchant’s own only

big-type-rows

@trame/content-services--big-type-rows

one ruled row per service, the name set at display size on the left and its points as small lines in two columns on the right, the action at the foot: four to six services for an agency or a studio that wants a typographic, confident list; the merchant’s own only