# gds-card-pattern-01

**Class**: `GdsCardPattern01`

**Tag**: `<gds-card-pattern-01>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `-` | The main title of the card |
| `excerpt` | `string` | `-` | A brief description or summary text |
| `label` | `string` | `-` | Optional label text used on the linked card footer decorative element. |
| `variant` | `'neutral-01' \| 'neutral-02'` | `-` | Card background variant |
| `outlined` | `boolean` | `-` | Enables border styling Designed to work with neutral-02 variant |
| `tag` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `-` | HTML tag for the card title Controls heading level for accessibility |
| `ratio` | `'landscape' \| 'square'` | `-` | Aspect ratio/format of the card's media section - landscape: 16:9 or similar horizontal format - square: 1:1 square format |
| `category` | `string` | `-` | Category |
| `date` | `string` | `-` | Date |
| `dateFormat` | `DateTimeFormat` | `-` | Date format to use for displaying the date. Check the GdsFormattedDate component for more details on accepted formats. |
| `locale` | `string` | `-` | Locale for date formatting (e.g., 'sv-SE', 'en-GB', 'en-US') |
| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
| `href` | `string \| undefined` | `-` | URL that the link points to Can be absolute, relative, or fragment identifier |
| `target` | `'_self' \| '_blank' \| '_parent' \| '_top' \| undefined` | `-` | Specifies where to open the linked document |
| `rel` | `string \| undefined` | `-` | Specifies the relationship between the current document and the linked document Automatically adds security-related values when target="_blank" |
| `download` | `string \| boolean \| undefined` | `-` | When present, indicates that the linked resource should be downloaded |
| `ping` | `string \| undefined` | `-` | Specifies a space-separated list of URLs to which, when the link is followed, POST requests with the body ping will be sent by the browser. |
| `src` | `string \| undefined` | `-` | The URL of the image |
| `srcset` | `string \| undefined` | `-` | The srcset attribute for responsive images Format: "image.jpg 1x, image-2x.jpg 2x" or "image-320.jpg 320w, image-640.jpg 640w" |
| `sizes` | `string \| undefined` | `-` | The sizes attribute for responsive images Format: "(max-width: 320px) 280px, (max-width: 640px) 580px, 800px" |
| `alt` | `string \| undefined` | `-` | Alternative text description of the image Required for accessibility. Should be empty string if image is decorative. |
| `loading` | `'lazy' \| 'eager' \| undefined` | `-` | Loading strategy for the image |
| `decoding` | `'auto' \| 'sync' \| 'async' \| undefined` | `-` | Decoding strategy for the image |


## Slots

| Name | Description |
|------|-------------|
| `header` | Custom header content |
| `footer` | Action items (buttons, links) |


## Routing Support

This component supports routing via the `href` property.
