@bonniernews/dn-design-system-web 3.0.0-alpha.8 → 3.0.0-alpha.81

package/components/teaser-large/README.md

@@ -0,0 +1,52 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-large](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-large)
+- Storybook (PROD): [TeaserLarge > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserlarge-web)
+- Storybook (LATEST): [TeaserLarge > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserlarge-web)
+
+----
+
+# teaser-large
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|variant | String | no | "default" or "podd" | "default" | |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|highlight | String | no | | | Text before the heading |
+|sticker | String | no | | | Red text before the text |
+|grade | String | no | | | zero, one, two, three, four, five, none |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|bylineHtml | HTML String | no | | | Side image of the author |
+|isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
+|isLargeHeadline | bool | no | true, false | false | If the headline should be large. Only has an effect if  `isItalicHeadline` is true. |
+|isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |
+|isLocked | bool | no | true, false | false | If the paywall indicator should be shown. It is only shown if the teaser has an image. |
+|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-large/teaser-large.njk' import TeaserLarge %}
+
+{{ TeaserLarge({
+  title: "Upp på börsen",
+  text: "Det ser ganska normalt ut på Stockholmsbörsen.",
+  highlight: "Ekonominytt:"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-large/teaser-large" as *;
+```

package/components/teaser-large/teaser-large.njk

@@ -0,0 +1,93 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/vip-badge/vip-badge.njk' import VipBadge %}
+{% from '@bonniernews/dn-design-system-web/assets/teaser/dot-or-grade.njk' import getDotOrGrade %}
+
+{% macro TeaserLarge(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--large"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.variant %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.variant), additionalClasses) %}
+  {% endif %}
+
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
+  {% endif %}
+
+  {% if params.areaType %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
+  {% endif %}
+
+  {% if params.isLocked and not params.mediaHtml and not params.bylineHtml and params.isItalicHeadline %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + "quote-badge"), additionalClasses) %}
+  {% endif %}
+
+  {% if params.mediaHtml %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + 'top-img'), additionalClasses) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% if params.isItalicHeadline and params.isLargeHeadline and params.areaType !== "right" %}
+    {% set additionalClasses = (additionalClasses.push("ds-teaser--large-big-italic"), additionalClasses) %}
+  {% elif params.isItalicHeadline %}
+    {% set additionalClasses = (additionalClasses.push("ds-teaser--large-italic"), additionalClasses) %}
+  {% endif %}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {{- attributes | safe }}>
+
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+        {% if params.isLocked %}
+          {{ VipBadge({
+            showText: true,
+            forcePx: true
+          }) }}
+        {% endif %}
+      </div>
+    {% elif params.isItalicHeadline and params.isLocked %}
+      {{ VipBadge({
+        showText: false,
+        forcePx: true
+      }) }}
+    {% endif %}
+
+    <div class="{{ componentClassName + '__content'}}">
+      {% if params.vignette %}
+        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
+      {% endif %}
+      <h2 class="ds-teaser__title">
+        {% if params.highlight %}
+          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+        {% endif %}
+        {{ params.title | safe }}
+      </h2>
+
+      {% if params.text and params.areaType !== "right" %}
+        <p class="{{ componentClassName + '__text' }}">
+          {{ getDotOrGrade({ flashing: params.isFlashingDot, grade: params.grade }) }}
+          {% if params.sticker %}
+            <span class="ds-teaser__sticker">
+              {{ params.sticker }}
+            </span>
+          {% endif %}
+          {{ params.text | safe }}
+        </p>
+      {% endif %}
+      {% if params.bylineHtml %}
+        <div class="{{ componentClassName + '__byline'}}">
+          {{ params.bylineHtml | safe }}
+        </div>
+      {% endif %}
+    </div>
+  </a>
+{% endmacro %}

package/components/teaser-large/teaser-large.scss

@@ -0,0 +1,165 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--large {
+  display: block;
+  position: relative;
+
+  .ds-teaser__media {
+    video {
+      max-width: 100%;
+    }
+  }
+
+  .ds-teaser__content {
+    flex: 1;
+    display: grid;
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr auto;
+    @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+
+    // Special case for large teaser, should be replaced with dynamic spacing layout token when available
+    @include ds-mq-only-breakpoint(mobile) {
+      padding-bottom: ds-spacing-component($ds-sc-x3);
+    }
+    @include ds-mq-smallest-breakpoint(tablet) {
+      padding-bottom: ds-spacing-component($ds-sc-x4);
+    }
+  }
+
+  &:focus-visible {
+    outline: none !important;
+
+    .ds-teaser__content {
+      @include ds-teaser-focus(-8px, false);
+    }
+  }
+
+  .ds-teaser__vignette {
+    grid-column: 1;
+  }
+
+  .ds-teaser__title {
+    grid-row: 1;
+    grid-column: 1 / span 1;
+    @include ds-typography($ds-typography-expressive-heading04bold);
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline(3px);
+    }
+  }
+
+  .ds-teaser__vignette + .ds-teaser__title {
+    grid-row: 2;
+  }
+
+  .ds-teaser__text {
+    grid-row: 3;
+  }
+
+  &.ds-teaser--large-big-italic {
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-expressive-heading04italicregular);
+    }
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      .ds-teaser__title {
+        grid-column-end: span 2;
+      }
+
+      .ds-teaser__byline {
+        grid-row: 3;
+        margin-top: ds-spacing-component($ds-sc-x2);
+      }
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      .ds-teaser__title {
+        grid-column-end: span 1;
+      }
+    }
+  }
+
+  &.ds-teaser--large-italic {
+    .ds-teaser__title {
+      @include ds-typography($ds-typography-expressive-heading03italicregular);
+    }
+
+    @include ds-hover(true) {
+      .ds-teaser__title {
+        @include ds-underline();
+      }
+    }
+  }
+
+  .ds-teaser__byline {
+    grid-column: 2;
+    grid-row: 1 / span 3;
+    overflow: hidden;
+    position: relative;
+    margin-left: ds-spacing-component($ds-sc-x4);
+    // margin-bottom needs to be the negative value of padding-bottom on .ds-teaser__content
+    @include ds-mq-only-breakpoint(mobile) {
+      margin-bottom: ds-spacing-component($ds-sc-x3, "px", true);
+    }
+    @include ds-mq-smallest-breakpoint(tablet) {
+      margin-bottom: ds-spacing-component($ds-sc-x4, "px", true);
+    }
+
+    .picture {
+      position: absolute;
+      top: 0;
+      right: 0;
+      @include ds-spacing-layout($ds-sl-teaser-vertical, bottom, "px", true);
+      width: 100%;
+      min-width: 104px;
+      margin: 0;
+
+      > .picture__img {
+        margin: 0;
+        top: unset;
+        max-height: unset;
+      }
+    }
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      width: 104px;
+      min-height: 85px;
+      margin-left: ds-spacing-component($ds-sc-x2);
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      width: 156px;
+      // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
+      min-height: 110px;
+    }
+  }
+
+  @include ds-mq-smallest-breakpoint(tablet) {
+    &.ds-teaser--right {
+      .ds-teaser__title {
+        @include ds-typography($ds-typography-expressive-heading02bold);
+      }
+
+      &.ds-teaser--large-italic .ds-teaser__title {
+        @include ds-typography(
+          $ds-typography-expressive-heading02italicregular
+        );
+
+        @include ds-hover(true) {
+          .ds-teaser__title {
+            @include ds-underline(2px, 1px);
+          }
+        }
+      }
+
+      .ds-teaser__byline {
+        width: 104px;
+        min-height: 85px;
+        margin-left: ds-spacing-component($ds-sc-x2);
+      }
+    }
+  }
+}

package/components/teaser-onsite/README.md

@@ -0,0 +1,53 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-onsite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-onsite)
+- Storybook (PROD): [TeaserOnSite > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaseronsite-web)
+- Storybook (LATEST): [TeaserOnSite > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaseronsite-web)
+
+----
+
+# teaser-onsite
+
+Also known as "På Plats-puffen".
+
+In the CMS title will be set to a location like "Kiev, Ukraina" or "USA" and text is usually set to some author names like "Jan Banan och Kalle Kula"
+
+The worldMap has to be set by the parent page as a CSS variable. This is done in the StoryBook and will have to be done from the production website codebase.
+
+```
+:root {
+  --ds-onsite-background-image-url: url("https://i.imgur.com/GJh7Fbl.png");
+}
+```
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|areaType | String | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|text | String | no | | | Teaser subtext |
+|mediaHtml | HTML String | no | | | Main image or other media |
+|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-onsite/teaser-onsite.njk' import TeaserOnSite %}
+
+{{ TeaserOnSite({
+  title: 'Kiev, Ukraina',
+  text: 'Henrik Brandão Jönsson och Eduardo Leal'
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-onsite/teaser-onsite" as *;
+```

package/components/teaser-onsite/teaser-onsite.njk

@@ -0,0 +1,45 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+
+{% macro TeaserOnSite(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+  {% set additionalClasses = ["ds-teaser--onsite"] %}
+  {% set attributes = getAttributes(params.attributes) %}
+
+  {% if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
+  {% endif %}
+
+  {% if params.areaType %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
+  {% endif %}
+
+  {% if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {% set classes = componentClassName + " " + additionalClasses | join(" ") %}
+
+  <a href="{{ params.targetLink }}"
+    class="{{ classes }}"
+    {{- attributes | safe }}>
+
+    {% if params.mediaHtml %}
+      <div class="{{ componentClassName + '__media'}}">
+        {{ params.mediaHtml }}
+      </div>
+    {% endif %}
+
+    <div class="{{ componentClassName + '__content'}}">
+      <h2 class="ds-teaser__title">
+        PÅ PLATS | {{ params.title | safe }}
+      </h2>
+
+      {% if params.text %}
+        <p class="{{ componentClassName + '__text'}}">
+          {{ params.text | safe }}
+        </p>
+      {% endif %}
+    </div>
+  </a>
+{% endmacro %}

package/components/teaser-onsite/teaser-onsite.scss

@@ -0,0 +1,35 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--onsite {
+  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
+  background-image: var(
+    --ds-onsite-background-image-url
+  ); //Set by parent context (like Storybook or Bang)
+  background-position: 100%;
+  background-repeat: no-repeat;
+  overflow: hidden;
+
+  .ds-teaser__title {
+    color: $ds-theme-color;
+    @include ds-typography($ds-typography-detailarticle-label);
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline(2px, 1px);
+    }
+  }
+
+  .ds-teaser__text {
+    margin-top: 0;
+    @include ds-typography($ds-typography-functional-heading01bold);
+  }
+
+  .ds-teaser__media {
+    float: left;
+    margin-right: ds-spacing-component($ds-sc-x4);
+    width: 56px;
+    height: 56px;
+  }
+}

package/components/teaser-package/README.md

@@ -0,0 +1,42 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-package](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-package)
+- Storybook (PROD): [TeaserPackage > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserpackage-web)
+- Storybook (LATEST): [TeaserPackage > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserpackage-web)
+
+----
+
+# teaser-package
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|teasersHtml | HTML String | yes | | | HTML teaser output |
+|vignetteText | String | yes | | | Heading of the teaser |
+|vignetteTargetUrl | String | no | | | Target URL for the teaser |
+|areaType | String | no | "bauta" or "bautaxl" | | The area where the column is rendered |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|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-package/teaser-package.njk' import TeaserPackage %}
+
+{{ TeaserPackage({
+  teasersHtml: "",
+  areaType: "bauta",
+  vignetteText: "Svensk politik",
+  vignetteTargetUrl: "/om/svensk-politik/"
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-package/teaser-package" as *;
+```

package/components/teaser-package/teaser-package.njk

@@ -0,0 +1,36 @@
+{% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
+{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
+
+{% macro TeaserPackage(params) %}
+  {%- set componentClassName = "ds-teaser-package" %}
+  {%- set classNamePrefix = componentClassName + "--" %}
+  {%- set additionalClasses = [] %}
+  {%- set attributes = getAttributes(params.attributes) %}
+
+  {%- if params.areaType %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.theme %}
+    {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
+  {% endif %}
+
+  {%- if params.classNames %}
+    {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
+  {% endif%}
+
+  {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
+  <div class="{{ classes }}">
+    {%- if params.vignetteTargetUrl %}
+      <a href="{{ params.vignetteTargetUrl }}"
+        class="{{ componentClassName + '__vignette'}}"
+        {{- attributes | safe }}>
+        <span>{{ params.vignetteText }}</span>
+        {{ IconUse({ icon: "arrow_forward", attributes: {"aria-hidden": true} }) }}
+      </a>
+    {% elif params.vignetteText %}
+      <div class="{{ componentClassName + '__vignette'}}">{{ params.vignetteText }}</div>
+    {% endif %}
+    {{ params.teasersHtml | safe }}
+  </div>
+{% endmacro %}

package/components/teaser-package/teaser-package.scss

@@ -0,0 +1,119 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss";
+
+.ds-teaser-package {
+  position: relative;
+  background-color: $ds-color-background-primary;
+
+  & > .ds-teaser {
+    position: relative;
+  }
+
+  > .ds-teaser::after,
+  > .ds-teaser + .ds-split-container::after {
+    content: "";
+    height: ds-metrics-border-width(x1);
+    background-color: $ds-color-border-primary;
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    right: 0;
+    @include ds-spacing-layout(0 $ds-sl-teaser-horizontal, margin);
+    box-sizing: border-box;
+    z-index: 5;
+  }
+
+  .ds-teaser-package__vignette + .ds-teaser::after,
+  .ds-teaser--top-img::after,
+  > .ds-teaser:first-child:after {
+    display: none;
+  }
+
+  .ds-teaser--onsite {
+    background-position-y: 1px;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 4px;
+    top: 0;
+    background-color: $ds-theme-color;
+    z-index: 5;
+  }
+
+  .ds-teaser-package__vignette {
+    padding: ds-spacing-component($ds-sc-x3);
+    @include ds-spacing-layout($ds-sl-teaser-horizontal, padding-left);
+    @include ds-spacing-layout($ds-sl-teaser-horizontal, padding-right);
+    @include ds-typography($ds-typography-functional-body02bold);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $ds-color-component-secondary;
+
+    @include ds-hover(true) {
+      @include ds-underline(1px, 2px);
+    }
+
+    @include ds-teaser-focus(-8px);
+  }
+
+  a.ds-teaser-package__vignette {
+    @include ds-link($ds-link-list);
+  }
+
+  .ds-teaser-package__vignette,
+  a.ds-teaser-package__vignette {
+    color: $ds-color-text-primary;
+  }
+
+  &.ds-teaser-package--bauta {
+    .ds-teaser-package__vignette {
+      color: $ds-color-static-white;
+      background-color: $ds-theme-color;
+    }
+  }
+
+  &.ds-teaser-package--bautaxl {
+    &::after {
+      background-color: transparent;
+    }
+
+    .ds-teaser-package__vignette {
+      color: $ds-color-static-white;
+      background-color: #2b2b2b; // @todo change to token when available
+    }
+
+    .ds-teaser-package__vignette
+      + .ds-teaser--large:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
+      @include ds-mq-smallest-breakpoint(desktop) {
+        .ds-teaser__title {
+          font-size: 80px; // special case, will not have a token
+          line-height: 88px;
+        }
+      }
+      @include ds-mq-only-breakpoint(mobile) {
+        background-color: #2b2b2b; // @todo change to token when available
+        .ds-teaser__title,
+        .ds-teaser__text {
+          color: $ds-color-static-white;
+        }
+
+        & + .ds-teaser::after,
+        & + .ds-split-container::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .ds-icon {
+    width: ds-px-to-rem(24px);
+    height: ds-px-to-rem(24px);
+    color: currentColor;
+    display: inline-flex;
+  }
+}

package/components/teaser-right-now/README.md

@@ -0,0 +1,37 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-right-now](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-right-now)
+- Storybook (PROD): [TeaserRightNow > Web](https://designsystem.dn.se/?path=/story/components-app-web-section-components-teaserrightnow-web--right-now)
+- Storybook (LATEST): [TeaserRightNow > Web](https://designsystem-latest.dn.se/?path=/story/components-app-web-section-components-teaserrightnow-web--right-now)
+
+----
+
+# teaser-right-now
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
+|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-right-now/teaser-right-now.njk' import TeaserRightNow %}
+
+{{ TeaserRightNow({
+  title: "Tågtrafiken är avstängd mellan Malmö och Göteborg",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-right-now/teaser-right-now" as *;
+```