View Source Phoenix.UI.Components.Card (Phoenix UI v0.1.9)

Provides card component.

Link to this section Summary

Functions

Renders card component.

Renders card actions component.

Renders card content component.

Renders card header component.

Renders card media component.

Link to this section Functions

Renders card component.

examples

Examples

```
<.card
  elevation={3}
  square={true}
  variant="elevated"
>
  content
</.card>
```

attributes

Attributes

  • element (:string) - Defaults to "div".
  • extend_class (:string)
  • Global attributes are accepted.

slots

Slots

  • inner_block (required)

Renders card actions component.

examples

Examples

```
<.card>
  ...
  <.card_action>
    content
  </.card_action>
  ...
</.card>
```

attributes

Attributes

  • element (:string) - Defaults to "div".
  • extend_class (:string)
  • Global attributes are accepted.

Renders card content component.

examples

Examples

```
<.card>
  ...
  <.card_content>
    content
  </.card_content>
  ...
</.card>
```

attributes

Attributes

  • element (:string) - Defaults to "div".
  • extend_class (:string)
  • Global attributes are accepted.

Renders card header component.

examples

Examples

```
<.card>
  <.card_header>
    header
  </.card_header>
  ...
</.card>
```

attributes

Attributes

  • element (:string) - Defaults to "div".
  • extend_class (:string)
  • Global attributes are accepted.

slots

Slots

  • action
  • avatar_group
  • avatar
  • subtitle
  • title

Renders card media component.

examples

Examples

```
<.card>
  ...
  <.card_media/>
  ...
</.card>
```

attributes

Attributes

  • element (:string) - Defaults to "img".
  • extend_class (:string)
  • Global attributes are accepted.