{
  "id": 12315957,
  "title": "Custom Cards in Home Assistant: Mushroom and button-card",
  "url": "https://urgent.news/2026/10/06/custom-cards-in-home-assistant-mushroom-and-button-card",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-06T06:19:41.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/cloudapp_dev/custom-cards-in-home-assistant-mushroom-and-button-card-2ohk"
  },
  "original_language": "en",
  "account": "Home Assistant's stock cards, while functional, lack control over typography, number display, and battery level indicators. Custom cards are necessary for these features, and this post covers four such cards: card-mod (CSS injection), Mushroom (compact tile cards), mini-graph-card (line charts), and button-card (JavaScript rendering).\n\nThe setup was reproducible without HACS, with custom card bundles placed under www/cards and loaded from configuration.yaml. Fonts are crucial for readability, and a theme cannot declare fonts directly. Instead, a tiny ES module enforces the typography by appending @font-face rules to the document head. This approach allows using Archivo for labels and IBM Plex Mono for values.\n\nThe Mushroom template cards are used for values, with primary and secondary text, icons, and icon colors. Card-mod enforces the typography for these cards, ensuring consistent styling across eleven template cards in the dashboard. The battery status is displayed as an SVG ring, showing charge level and switching colors at 60% and 25%. The custom field in button-card handles the computation based on the sensor state.",
  "summary": "The stock cards in Home Assistant get you a working dashboard in an afternoon. I wrote that one up in five build steps and left it there for a while. What they do not give you is control over typography, over how a number is drawn, or over a ring that shows a battery level. For that you need custom cards, and this post is about the four I ended up with, the theme that holds them together, and the…",
  "key_points": [
    "Mushroom cards provide compact tile cards with customizable typography and icons",
    "Button-card enables JavaScript rendering for custom field computations based on sensor states"
  ],
  "editors_take": "Custom cards in Home Assistant fill gaps in the stock offering, enabling control over typography, number display, and battery level indicators for a more tailored user experience.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}