flatcard

Flatcard is a user interface component that combines a card layout with flat design principles. It is typically a rectangular container that groups related information and actions in a compact, self-contained unit.

While not a formal standard, the term emerged from the broader flat design movement of the 2010s and from card-based interfaces popularized by Material Design. Flatcards emphasize solid color fields, simple typography, and minimal chrome, with little to no gradients or ornate textures.

Common characteristics include rounded corners, a solid fill or image at the top, a title, optional subtitle or description, and action areas with buttons. Elevation is implied through shadows or layering, but the emphasis remains on flat surfaces and clear typographic hierarchy. Cards are often responsive and arranged in grids or masonry layouts.

Use cases include dashboards, product catalogs, news feeds, and profile summaries. Designers adapt flatcards for accessibility by ensuring sufficient color contrast, readable font sizes, and keyboard-friendly interactions.

Variants and related terms: media cards, info cards, and product cards are common flavors. Related concepts include material design cards and neumorphism, which explores soft shadows and raised surfaces. Flatcards are a foundational element of modern responsive UI design.