Examples¶
Use the examples to compare visual results and find a card close to what you want to build.
Featured examples¶
| Example | What it demonstrates |
|---|---|
| Pollen cards | State-based horseshoes, labels, icons, and reusable layouts |
| Electricity cards | Horseshoe geometry, scales, ticks, groups, and palettes |
| Awair card | Select controls, browser-local inputs, dynamic entities, and history |
The complete demo pages include the required entities or integrations and links to their YAML definitions.
Template catalog¶
Use this catalog to find a visual starting point without searching through the individual example pages. Each template link opens the complete system-template YAML on GitHub. The linked card pages contain the corresponding view configuration, requirements, and explanation.
| Card | Preview | GitHub system template |
|---|---|---|
| Pollen 34 |  | fhs-card-034-horseshoe-pollen.yaml |
| Pollen 55 |  | fhs-card-055-horseshoe-pollen.yaml |
| Pollen 54 |  | fhs-card-054-horseshoe-pollen.yaml |
| Pollen 53 |  | fhs-card-053-horseshoe-pollen.yaml |
| Pollen 52 |  | fhs-card-052-horseshoe-pollen.yaml |
| Electricity 20 |  | fhs-card-020-horseshoe-power.yaml |
| Electricity 22 |  | fhs-card-022-horseshoe-power.yaml |
| Electricity 23 |  | fhs-card-023-horseshoe-power.yaml |
| Electricity 24 |  | fhs-card-023-horseshoe-power.yaml |
| Electricity 26 |  | fhs-card-026-horseshoe-power.yaml |
| Electricity 27 |  | fhs-card-027-horseshoe-power.yaml |
| Electricity 30 |  | fhs-card-030-horseshoe-power.yaml |
| Electricity 32 |  | fhs-card-032-horseshoe-power.yaml |
| Electricity 33 |  | fhs-card-033-horseshoe-power.yaml |
| Awair 40 |  | fhs-card-040-awair-interactive.yaml |
| Awair 41 |  | fhs-card-041-awair-interactive.yaml |
Showcases¶
Showcase cards let you change options directly on the card. Use them to compare horseshoe styles, chart types, controls, periods, bins, axes, colors, and other settings before adding them to your own YAML.