Skip to content

Functional card examples

Example Functional Cards I made

I made a bunch of functional cards with two goals in mind:

  • To show the possibilities of the Swiss Army Knife with small visual examples.
  • As the YAML template definition and usage is included per card, you get see how to use these cards in a view, how these cards are made, how animations are done, styling and tool usage.

This should help you to create your own visualizations, or you can just use these examples!

Version RC.3 has been released as of July 24th, 2022 with full support for these layout templates!

Card Description
AirVisual Card Two (#1 and #2) variants for displaying AirVisual data
Battery Card Card showing the battery state, including 24 hour history. Several variants. Uses sensor layout template
Binary Sensor Card Card showing the on/of state of a Binary Sensor
Binary Sensor Card with Alert Same as above, but now four (#1, #2, #3 and #4) variations with an alert icon
Environment Card Card showing inside environment data
Header Card Card that can display header text above other cards
Input Boolean Card Card that shows how to display and use the input_boolean.toggle service call
Light Card Card that can switch/toggle a Light switch
Light Card with Slider Card that can also control the brightness of a light
Navigate Card Navigate to other Lovelace View. Shows how to use the navigate user action
Person Card Card showing the location status of a Person. Also shows the power of some JavaScript
Power Outlet Card Four (#1, #2, #3 and #4) variations of a card showing both status (on/off) and power usage
Scene Card Card showing how to call a scene
Sensor Card Two (#1 and #2) variations of showing sensor data, without and with 24 hour history, icon or background animations and with or without secondary info.
Server Statistics Card Card showing the main server sensors like CPU, Memory, Disk, etc.
Switch Card Three (#1, #2 and #3) variations of a card controlling a switch
Tomorrow Pollen Card A card showing a single pollen status on a card
Tomorrow Pollen All Card A card showing all the three pollen statuses on a card

The YAML definition for all cards is included in the examples, so you can copy/use them and learn from them!

Overview of Tools used

Most tools are used in the example functional cards. Only 3 are not used.

Used? Tool Type Description
badge basic A badge. Not yet Documented!
circle basic A circle
ellipse basic An ellipse
line basic A vertical, horizontal or oblique line
rectangle basic A rectangle with and w/o rounded corners
rectex basic A more advanced rectangle with independent rounded corners
regpoly basic A regular poly using the Schläfli symbol math
text basic A text display
circslider advanced Circular Slider input tool. Not yet documented. Alpha
horseshoe advanced TBD
segarc advanced A segmented arc: shows progress data in an arc
slider advanced Slider input tool. Used for brightness for example
switch advanced A basic on/off switch
usersvg advanced For fetching user defined, external SVG files
area HA specific Represents an Entity Area
icon HA specific Represents an Entity Icon
name HA specific Represents an Entity Name
state HA specific Represents an Entity State & Unit of Measurement
bar HA specific Represents an simple state history (horizontal or vertical bars)

Overview of Templates, Animations and Styling used

Used? What Type Description
SAK Templates template Used in the Server Statistics card
JavaScript Snippets template Used in for instance the Person card, but also in the Light with slider card
User Interactions interaction Tap and Drag actions, but also service usage for navigating, triggering scenes, etc.
CSS Classes styling Not used in these cards. All inline styles
CSS Styles styling In all cards
CSS Animations animations Used in some of the cards that use blinking (battery)
Colorlists animations Used in many cards with the segmented arc
Colorstop Animations animations Used in many cards with the segmented arc
State Operator Animations animations Used in for instance the Person card

Example Screenshot

AmoebeLabs Swiss Army Knife Functional Card Examples All Screenshot

Back to top