# gds-card-pattern-01

**Class**: `GdsCardPattern01`

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


## Properties

> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.

| 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` | `Variant` | `-` | Card background 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 |
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |


## Slots

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


## Routing Support

This component supports routing via the `href` property.