Skip to content

Header Card

Visualization

Swiss Army Knife Functional Header D06 Light
Swiss Army Knife Functional Header D06 Dark

This card uses the Material 3 theme D06, TealBlue

Description Aspect Ratio Target Size
A card that displays header text 1/0.05 Grid with 1 column
SAK Tool Used for
Text The content of the header

Interaction

Part Description
N/A No interaction available

Usage

1.0.0-rc.3

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
- type: custom:swiss-army-knife-card
  disable_card: true
  layout:
    template:
      name: sak_layout_fce_header
      variables:
        - sak_layout_header_content: 'Livingroom'
        - sak_layout_header_font_color: var(--secondary-text-color)
        - sak_layout_header_font_size: 5em

########################################################################

- type: custom:swiss-army-knife-card
  disable_card: true
  layout:
    template:
      name: sak_layout_fce_header
      variables:
        - sak_layout_header_content: 'All those beautiful lights'
        - sak_layout_header_font_color: var(--theme-sys-color-tertiary)
        - sak_layout_header_font_size: 3em    
        - sak_layout_header_font_text_transform: none
Data Default Required Description
entities The single entity on the card
sak_layout_header_content 'Your Header comes here' The header content
sak_layout_header_font_color var(--primary-text-color) The text color
sak_layout_header_font_size 3.5em Font size in em preferably
sak_layout_header_font_transform uppercase The text transform. Can be capitalize, uppercase, lowercase, none, full-widthand full-size-kana
sak_layout_header_aspectratio 1/0.05 The aspectratio of the card. Depending on the selected font size, this one must be altered
sak_layout_header_position_cy 2.5 The y position of the header text. Default is centered for default aspectratio. You can change this if required

YAML Template Definition

1.0.0-rc.3

Full definition of layout template
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
sak_layout_fce_header:
  template:
    type: layout
    defaults: 
      - sak_layout_header_content: 'Your Header comes here'
      - sak_layout_header_font_color: var(--primary-text-color)
      - sak_layout_header_font_size: 3.5em
      - sak_layout_header_font_text_transform: uppercase
      - sak_layout_header_aspectratio: 1/0.05
      - sak_layout_header_position_cy: '2.5'

  layout:
    aspectratio: '[[sak_layout_header_aspectratio]]'
    toolsets:
      # ==============================================================================
      - toolset: header
        position:
          cx: 2.5
          cy: '[[sak_layout_header_position_cy]]'
        tools:
          - type: text
            position:
              cx: 50
              cy: 50
            text: '[[sak_layout_header_content]]'
            styles:
              text:
                fill: '[[sak_layout_header_font_color]]'
                letter-spacing: 0.1em
                text-transform: '[[sak_layout_header_font_text_transform]]'
                text-anchor: start
                font-size: '[[sak_layout_header_font_size]]'
Back to top