Skip to content
Swiss Army Knife Card for Home Assistant
Blog
Initializing search
Swiss Army Knife Card
Home
Getting started
How to design/create cards
Basics
Tools
10 Step Tutorials
Example Mix
Functional Card Examples
Helpers
Swiss Army Knife Card for Home Assistant
Swiss Army Knife Card
Home
Getting started
Getting started
Preface
What is this card, for whom is it?
Installation
Changelog
How to design/create cards
How to design/create cards
How to design your card
The step to Functional Cards
The step to Functional Cards
How to create functional cards
Functional card examples
Basics
Basics
Tools and Entities
Tools and Toolsets
Coordinate system
Card structure
Templates and Snippets
Templates and Snippets
Overview
YAML built-in
SAK templates
Javascript snippets
User Interactions
Entity State Converters
Localization and Formatters
Haptic Feedback
Styling
Styling
Overview
CSS Classes
CSS Styles
Animations
Animations
CSS Animations
Colorstop Animations
State Operator Animations
Theming
Theming
Overview
Per card Theming
Swatches and Palettes
Tools
Tools
Basic tools
Basic tools
Circle
Ellipse
Line
Rectangle
RectangleEx
Regular Poly
Text
Advanced tools
Advanced tools
Circular Slider
Horse Shoe
Progress Path *(new)*
Segmented Arc
Slider
Sparkline *(new)*
Switch
User SVG
HA Entity tools
HA Entity tools
Entity Area
Entity Icon
Entity Name
Entity State
Entity History
10 Step Tutorials
10 Step Tutorials
10 step or less tutorials
Tutorial #1
Tutorial #1
From simple card to template
Part 1 - One Sensor/1
Part 2 - Two Sensors/1
Part 3 - One Sensor/2
Part 4 - Two Sensors/2
Tutorial #2
Tutorial #2
Wide cards Example 12
Part 1 - Server Card
Tutorial #3
Tutorial #3
Simple card Example 4
Part 1 - Sensor Card
Example Mix
Example Mix
Introduction
1. Airvisual & Weather forecast
2. Lights
3. Sensors
4. More sensors
5. Car dashboard alike
6. Weather on SVG background
7. Servers
8. Homekit alike
9. High Contrast
10. Colorful mix
11. Boiler and electricity (m3)
12. Wide cards (m3)
99. Material 3 converter and theme viewer (m3)
Functional Card Examples
Functional Card Examples
Series 1
Series 1
Functional card examples
Examples
Examples
Airvisual Card #1
Airvisual Card #2
Battery Card
Binary Card
Binary Card with Alert #1
Binary Card with Alert #2
Binary Card with Alert #3
Binary Card with Alert #4
Environment Card
Header Card
Input Boolean Card
Light Card
Light Card with slider
Navigate Card
Person Card
Power Outlet Card #1
Power Outlet Card #2
Power Outlet Card #3
Power Outlet Card #4
Scene Card
Sensor Card #1
Sensor Card #2
Server Card
Switch Card #1
Switch Card #2
Switch Card #3
Tomorrow Pollen Card
Tomorrow Pollen All Card
Tomorrow Pollen All with AQI Card
Series 2
Series 2
Overview
Examples
Examples
Awair Element Cards #1
Awair Element Cards #3
Binary Card with Alert #1
Electricity Cards (Big!)
Person Card
Sensor Card #4
Helpers
Helpers
Pallette generators
Gradient generator / converter
Blog
¶
Back to top