Byline
======

*   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)

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/byline/byline.scss'`

### [](#javascript)Javascript

```javascript
import { initModalByline } from '@bonniernews/dn-design-system-web/components/byline/byline-interaction.js'
const articleElement = document.querySelector('.some-article-class');
initModalByline(articleElement);
```

| Name | Description | Default |
|:--- | :--- | :--- |
| largeByline | boolean | false |
| bylineTitle | string | \- |
| bylines\* | BylineData\[\] | \- |
| hideBylineImages | boolean | false |
| hideBorder | boolean | false |
| renderBylineModal | boolean | false |
| showNameAsLink | boolean | false |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<Byline
  bylineTitle="Text"
  bylines={[
    {
      authorId: '123',
      authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
      bylineImage: <ExamplePicture alt="Wolo" sizes="44px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
      followable: true,
      name: 'Peter Wolodarski',
      role: 'Text',
      variant: 'link'
    }
  ]}
/>
```