Components
Components
Every component is CSS-only and built from the tokens. Each preview shows Light, then Dark, then Black.
Actions
Forms
- Auth cardThe card for the Cave account screens: sign in, register, forgot and reset password.
- Text fieldSingle-line and multi-line text entry with a label, helper text and an error line.
Data
- Add-on cardOne add-on a shop can buy on top of its plan: what it gives, what it costs for the chosen cycle, and either a way to add it or the reason it cannot be added.
- CardA bordered container for one group of content, and the stat tile that sits inside it for a single number.
- Data tableA table of records inside a card, with a pager.
- Status badgeA pill that states the status of a record in one or two words.
Feedback
- BannerA persistent notice at the top of a page or section about the state of the account or the connection.
- Empty stateWhat a list, table or page shows when it has nothing yet, and the placeholder shown while it loads.
- ToastA short message that confirms the result of an action and goes away on its own.
Overlays
Navigation
- FooterThe footer of a product's own page: the Cave POS website and the Cave pages of Cave Shops use it. It is the Cave POS website footer, which is the reference.
- NavigationThe main navigation: a sidebar on desktop and web, a bottom bar on mobile.
- Page headerThe title row at the top of a product page: what this page is, and what you can do on it.
- Powered by CaveThe line "Powered by [Cave mark] Cave" that every Cave product carries. It says the product comes from Cave and takes the person to www.cave.technology.
- TabsSwitches between views of the same data on one page.