Title Card

Description¶

example-image

Titles (and optionally subtitles) are used to separate different areas in your design. You can use only a title, only a subtitle or both at once.

Variables¶

Variable	Default	Required	Notes
name			This is a main title (either title or subtitle is required)
label			This is a subtitle (either title or subtitle is required)

Usage¶

- type: 'custom:button-card'
  template: card_title
  name: My Title
  label: 'Subtitle'

Template Code

card_title.yaml

---
### Card Title ###
card_title:
  tap_action:
    action: "none"
  show_icon: false
  show_label: true
  show_name: true
  styles:
    card:
      - background-color: "rgba(0,0,0,0)"
      - box-shadow: "none"
      - height: "auto"
      - width: "auto"
      - margin-top: "6px"
      - margin-left: "18px"
      - margin-bottom: "0px"
      - padding: "6px"
    grid:
      - grid-template-areas: "'n' 'l'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content min-content"
    name:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "1.5rem"
    label:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "1rem"
      - opacity: "0.4"