Svelte template
Components you can use
You want graphics? We've got plenty! There are a few components, and the list continues to grow, that come 'out of the box' and ready for you to use. Here is a list of them, along with reference implementations.
Dropdown
Timeline
Timelines live in their own routeTo configure the timeline:
- Make a copy of the timeline template spreadsheet. This is where the data lives. Link to sheet
- Make the spreadsheet public as a csv, copy the provided url
- Go to the timeline.js store and replace the url located on line 12 in the url variable with the copied url of the publicly shared spreadsheet
Buttons
Buttons are styled according to two props: size and variant. You can use any combination of the two to get the button style you want.
Sizes
Variants
Fancy List
A type of electrode that causes electrical current to leave a device.
In EV batteries, they are usually sheets of metal that store lithium oxide — lithium mixed with other metals — before the lithium is charged and travels to the anode.
Seven companies make up 55% of global cathode production, predominantly in China but also in Japan. Although likely outdated, a U.S. International Trade Commission report from 2019 ranked the world's top cathode producers: China (324,200 tons), Japan (168,900 tons) and South Korea (51,200 tons).
Ranked Bar
Address lookup
Component allows for looking up addresses and getting back a latitude/longitude pair.
We do not store your address. Privacy Policy →
Call To Action Box
Note Box
Bar chart
County level map
Some descriptive text, if you want.
- Marin County
- Imperial County
- Neither Marin nor Imperial County
Line chart
Try out some different options for the line chart
Potentially useful links
- Svelte docs
- SvelteKit docs
- SvelteKit Netlify adapter docs
- CalMatters design system
- CalMatters style guide on Confluence (partially outdated)