- GitHub: [BonnierNews/dn-design-system/../web/src/components/byline](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline)
- Storybook: [Byline](https://designsystem.dn.se/?path=/docs/article-byline--docs)

----

# Byline

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|largeByline | Boolean | no | true, false | false | Specify if web should render a large byline, used for profile articles |
|bylineTitle | String | yes | | | The titles of the bylines, supplied by the api |
|bylines | Array | yes | | | Array of bylines from api |
|authorImages | Array[HTML] | no | | | Array with html image from bang. The component only makes the image round. Scaling is up to the user. Should be 44px for non retina screens. |
|hideBylineImages | Boolean | no | true, false | true | Specify if byline images should be renderd or not |
|renderBylineModal | Boolean | false | true, false | false | Specify if byline sheet should be renderd. Should be true for bottomByline |
|showNameAsLink | Boolean | false | true, false | false | If true, author names will be renders as link and sheet will not load. Used for desktop |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |

## 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/byline/byline.njk' import Byline %}

{{ Byline({
  largeByline: largeByline,
  bylineTitle: bylineTitle,
  bylines: bylines,
  authorImages: [imageHtml(), imageHtml(), imageHtml()],
  hideBylineImages: hideBylineImages,
  renderBylineModal: renderBylineModal,
  attributes: attributes,
  classNames: classNames
  variant: variant,
})}}
```

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

### Javascript

```javascript
import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button-interactions.js'
const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
dsButtonToggle(toggleElements);
```