# Picture card

> The picture card shows one image, and can do something when you select it, like open another view.

Source: https://contributors.home-assistant.io/design/dashboards/picture-card/

## Usage

The picture card shows a single image, edge to edge, with rounded corners and nothing else: no title, no name, no state. It is the simplest card there is. Use it to give a dashboard some character, like a photo of a room above its section, or to make a big, visual link to another view.

This page has no live example. The demo home on this site has no pictures or cameras to show.

By default, selecting the picture does nothing. Give it a `tap_action` to make it a link or a button, like `navigate` to open the view of a room. Only then does the card get a pointer cursor and become reachable with the keyboard.

When the picture needs to show something about an entity, pick another card:

- The [picture entity card](https://contributors.home-assistant.io/design/dashboards/picture-entity-card/) shows the name and state of one entity on top of the image.
- The [picture glance card](https://contributors.home-assistant.io/design/dashboards/picture-glance-card/) adds a row of entity icons at the bottom.
- The [picture elements card](https://contributors.home-assistant.io/design/dashboards/picture-elements-card/) places icons, labels, and buttons anywhere on the image, like on a floor plan.

### Image entity

Instead of a fixed image, the card can take its picture from an entity with `image_entity`. That works for an image entity, which a lot of integrations provide, and for a person, whose profile picture the card shows. The picture follows the entity: when the image entity gets a new image, the card shows it. With an image entity, selecting the card opens its more-info dialog, unless you set another `tap_action`.

### Content

- Always set `alt_text` when the picture means something, or acts as a link. A screen reader has nothing else to go on. With an `image_entity`, the name of the entity is the fallback.
- Pick images that work in both the light and the dark theme. The card shows the image as it is.
- The picture takes the full width of its section, and its height follows from the image. A very tall image pushes everything below it down, so crop it before you use it.

## Configuration

- `image` (string or media): the image to show, as a URL or a media source item. Required, unless you set `image_entity`.
- `image_entity` (string): an image or person entity to take the picture from.
- `alt_text` (string): the alternative text of the image. Defaults to the name of the `image_entity`, if there is one.
- `theme` (string): a theme to apply to the card.
- `tap_action` (action): what happens when you select the card. Defaults to `more-info` with an `image_entity`, and to `none` without one.
- `hold_action`, `double_tap_action` (action): what happens on hold or double tap. Default to `none`.

```yaml
type: picture
image: "/local/living_room.jpg"
alt_text: "Living room"
tap_action:
  action: navigate
  navigation_path: "/lovelace/living-room"
```

## In code

The card lives in [`src/panels/lovelace/cards/hui-picture-card.ts`](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/hui-picture-card.ts), and the element is `<hui-picture-card>`. It is a plain `<img>` inside an `<ha-card>`, with `overflow: hidden` for the rounded corners. Unlike the other picture cards, it does not use `<hui-image>`, so it has no state images, filters, or aspect ratio.

The card has no grid options of its own. In the sections view, it takes all 12 columns, and its height follows the image.

[Source](https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/hui-picture-card.ts)