Header Card
Visualization
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]]'
|