UI Elements — Street Trees

Buttons

Variants and sizes. The warm gradient is scarce on purpose — save it for the one action that matters.

Primary Outline Ghost

Small Default Large Large Outline

Badges

Little rounded labels for categories, tiers and friendly status notes.

Default Accent Gold

Cards

The base surface. Hover for a little lift and a warm border.

Basic

A simple card

Cards are the trusty container. Give them padding and tuck any content inside.

With action

Card with a button

Mix any pieces together — text, badges, and a friendly call to action.

Learn more

Review card

The friendliest template I have dropped into a project in years.

Alerts

Inline messages with a colored left rule for quick, friendly scanning.

Heads up. This template ships with a required footer badge on the free tier.

All set. Your changes have been saved and the page rebuilt cleanly.

Careful. Removing the Ventus badge needs a paid license from shop.ventus.works.

Forms

Form controls

Inputs, textareas, selects and checkboxes — all driven by tokens.

Table

Plan comparisons, feature matrices, and any tidy tabular data.

Feature	Sapling	Grove	Orchard
All six framework ports	✓	✓	✓
Design tokens	✓	✓	✓
Remove Ventus badge	✕	✓	✓
Priority support	✕	✕	✓
Commercial resale	✕	✕	✓

Stars rating

Golden-fill stars with a soft, muted empty state.

Pagination

Numbered pages with a warm active state.

Accordion

Click a question to expand. Driven by the shared main.js.

Is Street Trees really free?

Yes. The HTML/CSS template is free for personal and commercial use, as long as the "Made by Ventus" footer badge stays visible. Want it gone? Grow into Grove.

Which components are included?

Everything on this page: buttons, badges, cards, alerts, form controls, tables, tags, star ratings, pagination and this accordion — plus blog, portfolio and shop layouts.

Do I need a build step?

No. Open the HTML and it just works. No Node, no bundler, no compile step. Just edit and deploy.