- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-swipe-card](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-swipe-card)
- Storybook: [Subcomponents > TeaserSwipeCard](https://designsystem.dn.se/?path=/docs/section-subcomponents-teaserswipecard--docs)
- Storybook (Latest): [Subcomponents > TeaserSwipeCard](https://designsystem-latest.dn.se/?path=/docs/section-subcomponents-teaserswipecard--docs)

----

# TeaserSwipeCard

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|title | text | yes | | | The title of the teaser |
|href | text | yes | | | The link of the teaser |
|highlight | text | no | | | The highlight text of the teaser |
|time | text | no | | | The timestamp text of the teaser |
|mediaHtml | html | no | | | The media to render |
|variant | text | no | default, insandare, direkt | default | The variant of the teaser |
|classNames | String | no | | | Ex. "my-special-class" |
|~forcePx~ | bool | no | true, false | false | Not supported |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/teaser-swipe-card/teaser-swipe-card.njk' import TeaserSwipeCard %}

{{ TeaserSwipeCard({
  title: "Nyheter händer"
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/teaser-swipe-card/teaser-swipe-card";
```
