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

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)
  • rest (:global)

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)
  • rest (:global)

Renders card content component.

examples

Examples

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

attributes

Attributes

  • element (:string) - Defaults to "div".
  • extend_class (:string)
  • rest (:global)

Renders card header component.

examples

Examples

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

attributes

Attributes

  • element (:string) - Defaults to "div".
  • extend_class (:string)
  • rest (:global)

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)
  • rest (:global)