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

----

# TeaserFooter

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|variant | String | yes | "informationText" or "podcast" | | The variant to render |
|publicationTime | String | no | | | |
|sectionName | String | no | | | Name of section the teaser is connected to |
|duration | String | no | | | The length of the podcast |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|~forcePx~ | | | | | Not supported |

## 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-footer/teaser-footer.njk' import TeaserFooter %}

  {{ TeaserFooter({
    variant: 'informationText',
    publicationTime: '09:45',
    sectionName; 'Nyheter'
  }) }}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/assets/teaser-footer/teaser-footer";
```