home-assistant.io/source/_dashboards/markdown.markdown

type, title, sidebar_label, description

type	title	sidebar_label	description
card	Markdown card	Markdown	The Markdown card is used to render Markdown

The Markdown card is used to render Markdown.

Screenshot of the Markdown card.

The renderer uses Marked.js, which supports several specifications of Markdown, including CommonMark, GitHub Flavored Markdown (GFM) and markdown.pl.

{% include dashboard/edit_dashboard.md %}

YAML configuration

The following YAML options are available when you use YAML mode or just prefer to use YAML in the code editor in the UI.

{% configuration %} type: required: true description: "markdown" type: string content: required: true description: "Content to render as Markdown. May contain templates." type: string title: required: false description: The card title. type: string default: none card_size: required: false type: integer default: none description: The algorithm for placing cards aesthetically may have problems with the Markdown card if it contains templates. You can use this value to help it estimate the height of the card in units of 50 pixels (approximately 3 lines of text in default size). (e.g., 4) entity_id: required: false type: [string, list] default: none description: "A list of entity IDs so a template in content: only reacts to the state changes of these entities. This can be used if the automatic analysis fails to find all relevant entities." theme: required: false description: Override the used theme for this card with any loaded theme. For more information about themes, see the frontend documentation. type: string {% endconfiguration %}

Example

type: markdown
content: >
  ## Dashboards

  Starting with Home Assistant 0.72, we're experimenting with a new way of defining your interface.

Template variables

A special template variable - config is set up for the content of the card. It contains the configuration of the card.

For example:

{% raw %}

type: entity-filter
entities:
  - light.bed_light
  - light.ceiling_lights
  - light.kitchen_lights
state_filter:
  - 'on'
card:
  type: markdown
  content: |
    The lights that are on are:
    {% for l in config.entities %}
      - {{ l.entity }}
    {%- endfor %}

    And the door is {% if is_state('binary_sensor.door', 'on') %} open {% else %} closed {% endif %}.

{% endraw %}

A special template variable - user is set up for the content of the card. It contains the currently logged in user.

For example:

{% raw %}

type: markdown
content: |
  Hello, {{user}}

{% endraw %}

Icons

You can use Material Design Icons icons in the content of the card.

For example:

{% raw %}

type: markdown
content: |
  <ha-icon icon="mdi:home-assistant"></ha-icon>

{% endraw %}

ha-alert

You can also use our `ha-alert` component in the Markdown card.

Example:

Screenshot of the ha-alert elements in a markdown card.

type: markdown
content: |
  <ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
  <ha-alert alert-type="warning">This is a warning alert — check it out!</ha-alert>
  <ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
  <ha-alert alert-type="success">This is a success alert — check it out!</ha-alert>
  <ha-alert title="Test alert">This is an alert with a title</ha-alert>