Pack style
lvgl:
pages:
- id: component_preview
bg_color: 0x08142D
bg_opa: 100%
widgets:
- obj:
id: grid_screen
x: 0
y: 0
width: 320
height: 320
bg_color: 0x08142D
bg_opa: 100%
border_width: 0
radius: 0
scrollbar_mode: "OFF"
widgets:
- obj:
id: hdr_shb_bar
x: 6
y: 6
width: 308
height: 36
scrollbar_mode: "OFF"
bg_color: 0x070E1B
bg_opa: 95%
border_width: 0
radius: 0
widgets:
- label:
id: hdr_shb_title
x: 14
y: 8
width: 188
height: 20
text: 'Square Demo'
text_color: 0xF1F5F9
text_font: montserrat_16
long_mode: CLIP
text_align: LEFT
- label:
id: hdr_shb_batt
x: 274
y: 10
width: 20
height: 20
text: "\uF241"
text_color: 0x10B981
text_font: montserrat_14
long_mode: CLIP
text_align: CENTER
- label:
id: hdr_shb_wifi
x: 250
y: 10
width: 20
height: 20
text: "\uF1EB"
text_color: 0x10B981
text_font: montserrat_14
long_mode: CLIP
text_align: CENTER
- obj:
id: c1_ic_card
x: 6
y: 48
width: 151
height: 130
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 11
shadow_width: 0
shadow_color: 0xF59E0B
shadow_opa: 0%
widgets:
- label:
id: c1_ic_icon
x: 13
y: 11
width: 20
height: 20
text: "\uF0E7"
text_color: 0xF59E0B
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: c1_ic_label
x: 39
y: 11
width: 101
height: 12
text: 'Temp'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: c1_ic_value
x: 11
y: 57
width: 88
height: 26
text: '23.5'
text_color: 0xF1F5F9
text_font: montserrat_22
text_align: LEFT
long_mode: CLIP
- label:
id: c1_ic_unit
x: 104
y: 94
width: 36
height: 18
text: '°C'
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: c1_ic_accent
x: 11
y: 117
width: 129
height: 2
points:
- 0, 0
- 129, 0
line_color: 0xF59E0B
line_width: 2
line_rounded: true
- obj:
id: c2_ic_card
x: 163
y: 48
width: 151
height: 130
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 11
shadow_width: 0
shadow_color: 0x06B6D4
shadow_opa: 0%
widgets:
- label:
id: c2_ic_icon
x: 13
y: 11
width: 20
height: 20
text: "\uF043"
text_color: 0x06B6D4
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: c2_ic_label
x: 39
y: 11
width: 101
height: 12
text: 'Humidity'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: c2_ic_value
x: 11
y: 57
width: 88
height: 26
text: '58'
text_color: 0xF1F5F9
text_font: montserrat_22
text_align: LEFT
long_mode: CLIP
- label:
id: c2_ic_unit
x: 104
y: 94
width: 36
height: 18
text: '%'
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: c2_ic_accent
x: 11
y: 117
width: 129
height: 2
points:
- 0, 0
- 129, 0
line_color: 0x06B6D4
line_width: 2
line_rounded: true
- obj:
id: c3_ic_card
x: 6
y: 184
width: 151
height: 130
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 11
shadow_width: 0
shadow_color: 0x10B981
shadow_opa: 0%
widgets:
- label:
id: c3_ic_icon
x: 13
y: 11
width: 20
height: 20
text: "\uF241"
text_color: 0x10B981
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: c3_ic_label
x: 39
y: 11
width: 101
height: 12
text: 'Battery'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: c3_ic_value
x: 11
y: 57
width: 88
height: 26
text: '87'
text_color: 0xF1F5F9
text_font: montserrat_22
text_align: LEFT
long_mode: CLIP
- label:
id: c3_ic_unit
x: 104
y: 94
width: 36
height: 18
text: '%'
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: c3_ic_accent
x: 11
y: 117
width: 129
height: 2
points:
- 0, 0
- 129, 0
line_color: 0x10B981
line_width: 2
line_rounded: true
- obj:
id: c4_ic_card
x: 163
y: 184
width: 151
height: 130
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 11
shadow_width: 0
shadow_color: 0x8B5CF6
shadow_opa: 0%
widgets:
- label:
id: c4_ic_icon
x: 13
y: 11
width: 20
height: 20
text: "\uF021"
text_color: 0x8B5CF6
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: c4_ic_label
x: 39
y: 11
width: 101
height: 12
text: 'Uptime'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: c4_ic_value
x: 11
y: 57
width: 88
height: 26
text: '3d 14h'
text_color: 0xF1F5F9
text_font: montserrat_22
text_align: LEFT
long_mode: CLIP
- label:
id: c4_ic_unit
x: 104
y: 94
width: 36
height: 18
text: ''
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: c4_ic_accent
x: 11
y: 117
width: 129
height: 2
points:
- 0, 0
- 129, 0
line_color: 0x8B5CF6
line_width: 2
line_rounded: true320 × 320
Presets2
Dimensions
Width
px
Height
px
Padding
px
Gap
px
Square 1:1 free demo scene using Header Bar and four Info Cards. Made for 320x320 round/square demos and quick landing-page previews.
Built from
header-bar