Components, patterns, templates.
The library is every part a kit is made of, and many more, one item at a time.
Three kinds
- Components: one thing with props, such as a card, a header, a button or a counter.
- Patterns: a whole section built from components, such as a pricing table or a testimonials wall.
- Templates: a whole page in one paste.
Ten families
The library is ten pages, one per family: Buttons, Texts, Cards, Navigation, Backgrounds, Media, Sections, Pages, Showpieces and Widgets. The sidebar stays beside you: pick a family, search the open page, or show only free items.
The cards are the items
A card shows the element itself, running: move your pointer over a button and it answers, drag the before-and-after and it follows, because it is the item, not a picture of it. Items whose motion needs a scroll or a page load play a short clip instead: an endless effect loops while it is on screen, a one-shot scene plays once when it comes into view and its badge replays it. A small new word marks anything released in the last seven days.
Docs, beside the grid
Every card has a Docs button. It opens a panel over the grid with what the item is, what to build with it and its props, and a link to the item page. Close it and you are exactly where you were.
Copy and paste
On WordPress with the EtchPress Runtime plugin, the same item inserts from the panel inside Etch, with your prefix remembered and its version tracked (The panel in Etch). The steps below are the copy route, and what Etch Studio uses.
- Open the itemTry it in the playground first: every variant, light and dark, at desktop, tablet and phone width.
- Press CopyCopy gives you the variant you picked in the playground. Free items copy for everyone; the rest copy once you are signed in with lifetime access.
- Paste onto the Etch canvasClick where it should go and paste. The classes, the component and any script it needs arrive with it.
- Fill the propsSelect the component and change its content in the settings panel. Repeated rows are a repeater.
Your client's class names
Type a prefix in the Class prefix box above the Copy button, such as your client's name, and the item arrives with its classes renamed: acme-hero instead of hero. The box remembers your prefix in this browser, so every Copy button on the site uses it until you change it or clear it.
- Your Automatic.css classes, such as btn–primary, keep their names.
- So do a showpiece's own classes, because the runtime finds them by name.
- The components get the prefix too, as Section intro (acme). A site that already has the item without a prefix keeps both.
Changing how it looks
Colour, type, spacing and radius come from your Automatic.css settings, so most changes happen there and reach every item at once. For anything specific to one item, edit its classes in Etch's Style Manager. Each item page names the class to start with.
What each item page tells you
- What you can build with it.
- Its props, and the states the playground shows.
- The ACSS tokens it uses and anything it needs switched on.
- Its version history, and the Etch and ACSS versions it was tested with.
Motion
Some items animate. They respect the visitor's reduce motion setting and show their finished state instead. On WordPress the EtchPress Runtime plugin carries the Motion stylesheet they need, so there is nothing to add. In Etch Studio, or on a site without the plugin, add the Motion stylesheet item from the library.