<!-- AUTO-GENERATED from the @riverty/web-components custom elements manifest. Do not edit by hand. -->

# r-card

A flexible content container supporting portrait and landscape layouts with image, headline, description, badge, and optional button.

Example:
```
<!-- Portrait card -->
<r-card variant="portrait">
  <r-image slot="image" src="photo.jpg" alt="Card image"></r-image>
  <span slot="headline">Card title</span>
  <span slot="description">Supporting description text.</span>
  <r-button slot="button" variant="primary">Learn more</r-button>
</r-card>

<!-- Landscape card -->
<r-card variant="landscape">
  <r-icon slot="leading" name="info" size="m"></r-icon>
  <span slot="headline">Landscape card</span>
  <span slot="description">Description text.</span>
</r-card>
```

## class: `RCard`, `r-card`

### Fields

| Name                    | Privacy | Type                                         | Default      | Description                                                                                                               | Inherited From |
| ----------------------- | ------- | -------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `headingAriaLevel`      |         | `number`                                     | `3`          | Defines the heading level for the headline.                                                                               |                |
| `href`                  |         | `string`                                     |              | Defines href for the interactive card                                                                                     |                |
| `leadingSlotAlignment`  |         | `"bottom" \| "center" \| "top"`              | `'center'`   | Defines the vertical alignment of the leading slot content (e.g. image or icon).                                          |                |
| `size`                  |         | `"medium" \| "small"`                        | `'medium'`   | Defines the size of the component. Only applies in portrait variant                                                       |                |
| `target`                |         | `"_blank" \| "_parent" \| "_self" \| "_top"` |              | Defines the target for the linked URL when `href` is provided.<br>Options: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. |                |
| `trailingSlotAlignment` |         | `"bottom" \| "center" \| "top"`              | `'center'`   | Defines the vertical alignment of the trailing slot.                                                                      |                |
| `truncateDescription`   |         | `boolean`                                    | `false`      | Truncates the description text with an ellipsis if it exceeds the available space.                                        |                |
| `truncateHeadline`      |         | `boolean`                                    | `false`      | Truncates the headline text with an ellipsis if it exceeds the available space.                                           |                |
| `truncateSubtext`       |         | `boolean`                                    | `false`      | Truncates the subtext with an ellipsis if it exceeds the available space.                                                 |                |
| `variant`               |         | `"landscape" \| "portrait"`                  | `'portrait'` | Defines the layout of the component *                                                                                     |                |

### Attributes

| Name                      | Field                 | Inherited From |
| ------------------------- | --------------------- | -------------- |
| `heading-aria-level`      | headingAriaLevel      |                |
| `href`                    | href                  |                |
| `leading-slot-alignment`  | leadingSlotAlignment  |                |
| `size`                    | size                  |                |
| `target`                  | target                |                |
| `trailing-slot-alignment` | trailingSlotAlignment |                |
| `truncate-description`    | truncateDescription   |                |
| `truncate-headline`       | truncateHeadline      |                |
| `truncate-subtext`        | truncateSubtext       |                |
| `variant`                 | variant               |                |

### CSS Parts

| Name      | Description                                                       |
| --------- | ----------------------------------------------------------------- |
| `body`    | The container for the badge and content elements.                 |
| `card`    | The card container element.                                       |
| `content` | The container for the headline, description, and subtext content. |

### Slots

| Name            | Description                                                    |
| --------------- | -------------------------------------------------------------- |
| `badge`         | Badge element placed above the headline                        |
| `button`        | Call-to-action button (portrait cards only)                    |
| `description`   | Secondary descriptive text below the headline                  |
| `headline`      | Card headline text                                             |
| `icon`          | Icon placed at the top of a portrait card                      |
| `image`         | Image placed at the top of a portrait card                     |
| `leading`       | Leading visual element for landscape cards (for image or icon) |
| `subtext`       | Tertiary text below the description                            |
| `trailing-icon` | Trailing icon placed at the end of landscape cards             |

<hr/>

## Exports

| Kind                        | Name     | Declaration | Module | Package |
| --------------------------- | -------- | ----------- | ------ | ------- |
| `js`                        | `RCard`  | RCard       |        |         |
| `custom-element-definition` | `r-card` | RCard       |        |         |