Card

Card-style container with optional title and semantic tone.

Usage Notes

• Use for grouped metrics, settings blocks, and information summaries.
• Not suitable for page-level section headers (use section) or pure layout containers (use column or grid).
• Related components: section provides a complete page block structure (title + subtitle + action), while card is more lightweight.
• Child components arrange naturally inside a card; nest row, column, or grid.
• Use tone only for semantic state, not as an arbitrary style picker.

Tone variants

namespace: "doc_card_tone_diff",
  layout: {
    "row:tones": {
      "card:info": {
        title: "Info",
        tone: "info",
        "text:body": {
          text: "Information card."
        }
      },
      "card:success": {
        title: "Success",
        tone: "success",
        "text:body": {
          text: "Success card."
        }
      },
      "card:warning": {
        title: "Warning",
        tone: "warning",
        "text:body": {
          text: "Warning card."
        }
      }
    }
  }
}

API Reference