Albatross

Abbreviation

This component is defined, but is not started on or does not contain any styleguide documentation.

AlternateVoice

This component is defined, but is not started on or does not contain any styleguide documentation.

Button

Beta

It's buttons! You click them.

Examples

<button type="button" class="button button--action">Action Look</button>
<button type="button" class="button">Default Look</button>
<button type="button" class="button button--alternate">Alternate Look</button>
<button type="button" class="button button--positive">Positive Look</button>
<button type="button" class="button button--negative">Negative Look</button>
<button type="button" class="button" disabled="">Disabled</button>
<button type="button" class="button button--infinity">With Icon</button>
<a href="https://telia.no/" class="button">Actually A Link</a> 
<a href="https://telia.no/" class="button button--infinity">Link With Icon</a> 

React component docs

text Required

The text shown inside the button

Type: string. Default: (none)

    url Optional

    If specified the button will be an anchor tag with this value as its `href` value. These buttons can't be disabled and don't have a `type`

    Type: string. Default: (none)

      look Optional

      `Button.looks.positive` like "Continue" or `Button.looks.negative` like "Abort"

      Type: enum. Default: (none)

      • Button.looks.action
      • Button.looks.default
      • Button.looks.alternate
      • Button.looks.positive
      • Button.looks.negative

      type Optional

      `Button.types.button` for regular buttons not submitting a form, or `Button.types.submit` when submitting a form

      Type: enum. Default: Button.types.button

      • Button.types.button
      • Button.types.submit

      for Optional

      If specified the button will be a label tag with this value as its `for` value

      Type: string. Default: (none)

        disabled Optional

        Adds the `disabled` attribute to the button

        Type: bool. Default: (none)

          icon Optional

          Type: enum. Default: (none)

          • icons.infinity
          • icons.menu

          onClick Optional

          Type: func. Default: () => {}

            Content

            Beta

            Wrapper that content can be put inside. All `children` are rendered as children.

            Examples

            <div class="content"></div>
            <div class="content content--background"></div>

            React component docs

            background Optional

            Use this to add a colored (white) background

            Type: bool. Default: false

              padded Optional

              Use this to add a small padding to the inside. Cannot be used with `pageWrapper`.

              Type: bool. Default: false

                pageWrapper Optional

                Use this as the wrapping container for the entire page content. Cannot be used with `padded`.

                Type: bool. Default: false

                  Disclaimer

                  This component is defined, but is not started on or does not contain any styleguide documentation.

                  Figure

                  This component is defined, but is not started on or does not contain any styleguide documentation.

                  Heading

                  Beta

                  Examples

                  Primary Heading

                  <h1 class="heading heading--primary">  <span class="heading__text">Primary Heading</span> </h1>

                  Primary Heading, Brand Color

                  <h1 class="heading heading--primary heading--brand">  <span class="heading__text">Primary Heading, Brand Color</span> </h1>

                  Primary Heading, Light Color

                  <h1 class="heading heading--primary heading--light">  <span class="heading__text">Primary Heading, Light Color</span> </h1>

                  Primary Heading With Lots of Text That Can Result in Multiple Lines of Long Text That Can Be Hard to Read in a Very Large Size

                  <h1 class="heading heading--primary heading--multi">  <span class="heading__text">Primary Heading With Lots of Text That Can Result in Multiple Lines of Long Text That Can Be Hard to Read in a Very Large Size</span> </h1>

                  Secondary Heading

                  <h2 class="heading heading--secondary">  <span class="heading__text">Secondary Heading</span> </h2>

                  Tertiary Heading

                  <h3 class="heading heading--tertiary">  <span class="heading__text">Tertiary Heading</span> </h3>

                  Quaternary Heading

                  <h4 class="heading heading--quaternary">  <span class="heading__text">Quaternary Heading</span> </h4>

                  LabelLabelled Heading

                  <h1 class="heading heading--primary heading--labelled"><span class="heading__label">Label</span>   <span class="heading__text">Labelled Heading</span> </h1>

                  LabelSpecial Labelled Heading

                  <h1 class="heading heading--primary heading--special heading--labelled"><span class="heading__label">Label</span>   <span class="heading__text">Special Labelled Heading</span> </h1>
                  <h1 class="heading heading--primary">
                    <a class="heading__link" href="#"> <span class="heading__text">Linked Heading</span>  </a> 
                  </h1>
                  <h1 class="heading heading--primary heading--labelled">
                    <a class="heading__link" href="#"><span class="heading__label">Label</span>  <span class="heading__text">Linked & Labelled Heading</span>  </a> 
                  </h1>

                  React component docs

                  text Required

                  The heading text

                  Type: string. Default: (none)

                    label Optional

                    If this is specified, the text will be shown as a label above the heading

                    Type: string. Default: (none)

                      url Optional

                      If this is specified, the heading will be wrapped in an anchor tag with this as the URL

                      Type: string. Default: (none)

                        level Optional

                        Inidicates the level of the heading. Use `primary` for the page heading and the rest where appropriate so the document outline makes sense

                        Type: enum. Default: Heading.levels.primary

                        • Heading.levels.primary
                        • Heading.levels.secondary
                        • Heading.levels.tertiary
                        • Heading.levels.quaternary

                        color Optional

                        Only to be used on primary and secondary headings

                        Type: enum. Default: (none)

                        • Heading.colors.brand
                        • Heading.colors.light

                        multiLine Optional

                        Only takes effect with primary headings so the text isn't both big and long at the same time

                        Type: bool. Default: (none)

                          special Optional

                          Turns off forcing uppercase. Only for special cases like 'iPhone'

                          Type: bool. Default: (none)

                            Image

                            This component is defined, but is not started on or does not contain any styleguide documentation.

                            Mark

                            This component is defined, but is not started on or does not contain any styleguide documentation.

                            Message

                            This component is defined, but is not started on or does not contain any styleguide documentation.

                            Paragraph

                            In Progress

                            Examples

                            Paragraph as ingress

                            <p class="paragraph paragraph--ingress">Paragraph as ingress</p>

                            A normal paragraph

                            <p class="paragraph">A normal paragraph</p>

                            React component docs

                            ingress Optional

                            Type: bool. Default: false

                              text Required

                              Type: string. Default: (none)

                                Quote

                                This component is defined, but is not started on or does not contain any styleguide documentation.

                                StressEmphasis

                                This component is defined, but is not started on or does not contain any styleguide documentation.

                                StylisticallyOffsetText

                                This component is defined, but is not started on or does not contain any styleguide documentation.

                                Time

                                This component is defined, but is not started on or does not contain any styleguide documentation.

                                Description List

                                In Progress

                                Examples

                                SMS
                                Fri bruk
                                MMS
                                Fri bruk
                                Data

                                20 GB inkludert datamengde. Hastighet opp til 100 mbit/s.

                                Fri bruk
                                Fri bruk gjelder ikke spesialnummer og utland utenfor EU, EØS of Sveits. Inntil 20.000 ringeminutter, 20.000 SMS og 20.000 MMS pr mnd. Les mer.
                                Utland
                                Se priser i utlandet
                                <dl class="description-list">
                                  <dt class="description-list__term">SMS</dt>
                                  <dd class="description-list__description">Fri bruk</dd>
                                  <dt class="description-list__term">MMS</dt>
                                  <dd class="description-list__description"><span>Fri bruk</span> </dd>
                                  <dt class="description-list__term">Data</dt>
                                  <dd class="description-list__description">
                                    <p>20 GB inkludert datamengde. Hastighet opp til 100 mbit/s.</p>
                                  </dd>
                                  <dt class="description-list__term">Fri bruk</dt>
                                  <dd class="description-list__description">Fri bruk gjelder ikke spesialnummer og utland utenfor EU, EØS of Sveits. Inntil 20.000 ringeminutter, 20.000 SMS og 20.000 MMS pr mnd.
                                    <a href='#'>Les mer</a> .</dd>
                                  <dt class="description-list__term">Utland</dt>
                                  <dd class="description-list__description"><span><a href='#'>Se priser i utlandet</a> </span> </dd>
                                </dl>

                                React component docs

                                definitions Optional

                                Type: arrayOf. Default: (none)

                                • An object with shape:
                                  • term (string, Required)
                                  • descriptionHtml (string, Required)

                                Hardware List Item

                                Beta

                                Examples

                                Apple iPhone 6S

                                Det eneste som er endret med den nye Apple iPhone 6s, er absolutt alt.

                                <div class="hardware-list-item hardware-list-item--background">
                                  <a href="#" class="hardware-list-item__image">
                                    <img class="image" src="/images/iphone-6s-plus-rosegold.png" alt="Apple iPhone 6S" />
                                  </a> 
                                  <div class="hardware-list-item__name">
                                    <h3 class="heading heading--tertiary heading--labelled">
                                      <a class="heading__link" href="#"><span class="heading__label">Apple</span>  <span class="heading__text">iPhone 6S</span>  </a> 
                                    </h3>
                                  </div>
                                  <div class="hardware-list-item__description">
                                    <p class="paragraph">Det eneste som er endret med den nye Apple iPhone 6s, er absolutt alt.</p>
                                  </div>
                                  <div class="hardware-list-item__action">
                                    <a href="#" class="button button--positive">Kjøp nå</a> 
                                  </div>
                                </div>

                                React component docs

                                url Required

                                URL the user is taken to when clicking on the image, label, name, and button

                                Type: string. Default: (none)

                                  image Required

                                  URL to the product image

                                  Type: string. Default: (none)

                                    label Required

                                    Usually the company producing the product, f.ex. Apple

                                    Type: string. Default: (none)

                                      name Required

                                      The product name, f.ex. iPhone SE

                                      Type: string. Default: (none)

                                        description Required

                                        A short description of, or blurb about, the product

                                        Type: string. Default: (none)

                                          actionText Required

                                          Text shown inside the call to action button

                                          Type: string. Default: (none)

                                            background Optional

                                            Turns on (white) or off (transparent) the background color

                                            Type: bool. Default: true

                                              Hero

                                              In Progress

                                              `children` are rendered under the heading.

                                              Examples

                                              Endelig her!

                                              iPhone 7 er dobbelt så bra som den forrige. Nå kan du lese mer og bestille.

                                              iPhone 7
                                              <div class="hero">
                                                <div class="hero__text">
                                                  <h1 class="heading heading--primary heading--brand">
                                                    <span class="heading__text">Endelig her!</span> 
                                                  </h1>
                                                  <p class="paragraph paragraph--ingress">iPhone 7 er dobbelt så bra som den forrige. Nå kan du lese mer og bestille.</p>
                                                </div>
                                                <div class="hero__image">
                                                  <img class="image" src="/images/iphone-7.png" alt="iPhone 7" />
                                                </div>
                                              </div>

                                              Endelig der!

                                              iPhone 7 er dobbelt så bra som den forrige. Nå kan du lese mer og bestille.

                                              iPhone 7 er dobbelt så bra som den forrige. Nå kan du lese mer og bestille.

                                              iPhone 7
                                              <div class="hero hero--flipped">
                                                <div class="hero__text">
                                                  <h1 class="heading heading--primary">
                                                    <span class="heading__text">Endelig der!</span> 
                                                  </h1>
                                                  <p class="paragraph">iPhone 7 er dobbelt så bra som den forrige. Nå kan du lese mer og bestille.</p>
                                                  <p class="paragraph">iPhone 7 er dobbelt så bra som den forrige. Nå kan du lese mer og bestille.</p>
                                                </div>
                                                <div class="hero__image">
                                                  <img class="image" src="/images/iphone-7.png" alt="iPhone 7" />
                                                </div>
                                              </div>

                                              React component docs

                                              flipped Optional

                                              Type: bool. Default: false

                                                heading Required

                                                The shape of `heading` is `Heading.propTypes`

                                                Type: shape. Default: (none)

                                                image Required

                                                The shape of `image` is `Image.propTypes`

                                                Type: shape. Default: (none)

                                                LegacyHeader

                                                In Progress

                                                Examples

                                                <div class="legacy-header">
                                                  <div class="legacy-header__ribbon legacy-header__ribbon--background">
                                                    <ul class="legacy-header__categories">
                                                      <li class="legacy-header__category">
                                                        <a href="#" class="legacy-header__category-link">Privat</a> 
                                                      </li>
                                                      <li class="legacy-header__category">
                                                        <a href="#" class="legacy-header__category-link">Bedrift</a> 
                                                      </li>
                                                      <li class="legacy-header__category">
                                                        <a href="#" class="legacy-header__category-link legacy-header__category-link--active">Nettbutikk</a> 
                                                      </li>
                                                    </ul>
                                                  </div>
                                                  <div class="legacy-header__ribbon">
                                                    <div class="legacy-header__main">
                                                      <div class="legacy-header__logo">
                                                        <a href="#" class="legacy-header__logo-link"> <span class="legacy-header__logo-text">Telia</span>  </a> 
                                                      </div>
                                                      <div class="legacy-header__actions">
                                                        <label for="legacy-header__menu-toggler" class="legacy-header__menu-trigger">Meny</label>
                                                      </div>
                                                      <input type="checkbox" class="legacy-header__menu-toggler" id="legacy-header__menu-toggler" />
                                                      <ul class="legacy-header__menu-items">
                                                        <li class="legacy-header__menu-item">
                                                          <div>
                                                            <a href="#" class="legacy-header__menu-item-link">Mobiltelefoner</a> 
                                                            <div class="legacy-header__menu-categories-wrapper">
                                                              <ul class="legacy-header__menu-categories">
                                                                <li class="legacy-header__menu-category">
                                                                  <div class="legacy-header__menu-category-content"><span class="legacy-header__menu-category-heading">Mobiltelefoner</span> 
                                                                    <ul class="legacy-header__menu-category-items">
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Alle mobiltelefoner</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Tilbehør</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Webdeal</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Kontanttelefoner</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Apple Watch</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Apple</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Samsung</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Sony</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">LG</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Huawei</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Microsoft</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Doro</a> 
                                                                      </li>
                                                                    </ul>
                                                                  </div>
                                                                </li>
                                                                <li class="legacy-header__menu-category">
                                                                  <div class="legacy-header__menu-category-content"><span class="legacy-header__menu-category-heading">Hos Telia</span> 
                                                                    <ul class="legacy-header__menu-category-items">
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">4G</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Få hjelp i våre butikker</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Ring uten tillegg i Norden</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">BankID på mobil</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">MobilPant</a> 
                                                                      </li>
                                                                    </ul>
                                                                  </div>
                                                                </li>
                                                                <li class="legacy-header__menu-category">
                                                                  <div class="legacy-header__menu-category-content"><span class="legacy-header__menu-category-heading">Valgfrie tjenester</span> 
                                                                    <ul class="legacy-header__menu-category-items">
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">HBO Nordic</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Storytel</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Spotify</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Ekstra DataSIM</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Mobilforsikring</a> 
                                                                      </li>
                                                                    </ul>
                                                                  </div>
                                                                </li>
                                                              </ul>
                                                            </div>
                                                          </div>
                                                        </li>
                                                        <li class="legacy-header__menu-item">
                                                          <div>
                                                            <a href="#" class="legacy-header__menu-item-link">Abonnement</a> 
                                                            <div class="legacy-header__menu-categories-wrapper">
                                                              <ul class="legacy-header__menu-categories">
                                                                <li class="legacy-header__menu-category">
                                                                  <div class="legacy-header__menu-category-content"><span class="legacy-header__menu-category-heading">Abonnement</span> 
                                                                    <ul class="legacy-header__menu-category-items">
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Telia SMART</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Telia Kontant</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">4G Bredbånd</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Priser</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Tidligere abonnement</a> 
                                                                      </li>
                                                                    </ul>
                                                                  </div>
                                                                </li>
                                                                <li class="legacy-header__menu-category">
                                                                  <div class="legacy-header__menu-category-content"><span class="legacy-header__menu-category-heading">Hos Telia</span> 
                                                                    <ul class="legacy-header__menu-category-items">
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">4G</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Roam Like Home</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Få hjelp i våre butikker</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">BankID på mobil</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">MobilPant</a> 
                                                                      </li>
                                                                    </ul>
                                                                  </div>
                                                                </li>
                                                                <li class="legacy-header__menu-category">
                                                                  <div class="legacy-header__menu-category-content"><span class="legacy-header__menu-category-heading">Valgfrie tjenester</span> 
                                                                    <ul class="legacy-header__menu-category-items">
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">HBO Nordic</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Storytel</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Spotify</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Ekstra DataSIM</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Mobilforsikring</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Alle tjenester</a> 
                                                                      </li>
                                                                    </ul>
                                                                  </div>
                                                                </li>
                                                              </ul>
                                                            </div>
                                                          </div>
                                                        </li>
                                                        <li class="legacy-header__menu-item">
                                                          <div>
                                                            <a href="#" class="legacy-header__menu-item-link">4G Bredbånd</a> 
                                                            <div class="legacy-header__menu-categories-wrapper">
                                                              <ul class="legacy-header__menu-categories">
                                                                <li class="legacy-header__menu-category">
                                                                  <div class="legacy-header__menu-category-content"><span class="legacy-header__menu-category-heading">Produkter</span> 
                                                                    <ul class="legacy-header__menu-category-items">
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Ruter og abonnement</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Nettbrett</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">4G Bredbånd Kontant</a> 
                                                                      </li>
                                                                    </ul>
                                                                  </div>
                                                                </li>
                                                                <li class="legacy-header__menu-category">
                                                                  <div class="legacy-header__menu-category-content"><span class="legacy-header__menu-category-heading">Mer</span> 
                                                                    <ul class="legacy-header__menu-category-items">
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">HBO Nordic</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Hvorfor velge 4G Bredbånd</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Hjelp og støtte</a> 
                                                                      </li>
                                                                      <li class="legacy-header__menu-category-item">
                                                                        <a class="link" href="#">Dekning</a> 
                                                                      </li>
                                                                    </ul>
                                                                  </div>
                                                                </li>
                                                              </ul>
                                                            </div>
                                                          </div>
                                                        </li>
                                                        <li class="legacy-header__menu-item">
                                                          <div>
                                                            <a href="#" class="legacy-header__menu-item-link">Kundeservice</a> 
                                                          </div>
                                                        </li>
                                                        <li class="legacy-header__menu-item">
                                                          <div>
                                                            <a href="#" class="legacy-header__menu-item-link">Tilbehør</a> 
                                                          </div>
                                                        </li>
                                                      </ul>
                                                    </div>
                                                  </div>
                                                </div>

                                                React component docs

                                                href Required

                                                The URL the logo points to

                                                Type: string. Default: (none)

                                                  categories Optional

                                                  The categories displayed at the top of the header, above the logo

                                                  Type: arrayOf. Default: []

                                                  • An object with shape:
                                                    • text (string, Required)
                                                    • href (string, Required)
                                                    • active (bool, Optional)

                                                  items Required

                                                  The main menu items displayed next to the logo

                                                  Type: arrayOf. Default: (none)

                                                  • An object with shape:
                                                    • 0 (undefined, Optional)
                                                    • 1 (undefined, Optional)
                                                    • 2 (undefined, Optional)
                                                    • 3 (undefined, Optional)
                                                    • 4 (undefined, Optional)
                                                    • 5 (undefined, Optional)

                                                  RadioButtonGroup

                                                  In Progress

                                                  Examples

                                                  <div class="radio-button-group">
                                                    <div class="radio-button-group__item">
                                                      <input type="radio" id="SOME_GROUP_ONE" name="SOME_GROUP" checked="" />
                                                      <label for="SOME_GROUP_ONE">First item</label>
                                                    </div>
                                                    <div class="radio-button-group__item">
                                                      <input type="radio" id="SOME_GROUP_TWO" name="SOME_GROUP" />
                                                      <label for="SOME_GROUP_TWO">Second item (with strikethrough look)</label>
                                                    </div>
                                                  </div>

                                                  React component docs

                                                  items Required

                                                  Type: array. Default: (none)

                                                    group Required

                                                    Type: string. Default: (none)

                                                      selectedValue Optional

                                                      Type: string. Default: (none)

                                                        onChange Optional

                                                        Type: func. Default: () => {}

                                                          TextList

                                                          In Progress

                                                          Examples

                                                          • First item
                                                          • Second item (with strikethrough look)
                                                          • An item with a super-duper long text to make it split onto two lines like this, you see? Am I on two lines yet? Am I? I should be on two lines right about now...
                                                          • Only valid for 14 days
                                                          • Invoice or money talking
                                                          • Data control for young people
                                                          • Cost control for kids
                                                          • Multiple links in a information line and a second link
                                                          • NYHET! Data Rollover - Ta med ubrukt data
                                                          <ul class="text-list">
                                                            <li class="text-list__item text-list__item--normal text-list__item--icon-infinity"><span class="text-list__item-inner">First item</span> </li>
                                                            <li class="text-list__item text-list__item--strikethrough text-list__item--icon-broadband"><span class="text-list__item-inner">Second item (with strikethrough look)</span> </li>
                                                            <li class="text-list__item text-list__item--normal text-list__item--icon-roam-like-home"><span class="text-list__item-inner">Roam like Home</span> </li>
                                                            <li class="text-list__item text-list__item--normal text-list__item--icon-infinity"><span class="text-list__item-inner">An item with a super-duper long text to make it split onto two lines like this, you see? Am I on two lines yet? Am I? I should be on two lines right about now...</span> </li>
                                                            <li class="text-list__item text-list__item--normal text-list__item--icon-calendar-14-days"><span class="text-list__item-inner">Only valid for 14 days</span> </li>
                                                            <li class="text-list__item text-list__item--normal text-list__item--icon-kroner"><span class="text-list__item-inner">Invoice or money talking</span> </li>
                                                            <li class="text-list__item text-list__item--normal text-list__item--icon-data-control"><span class="text-list__item-inner">Data control for young people</span> </li>
                                                            <li class="text-list__item text-list__item--normal text-list__item--icon-cost-control"><span class="text-list__item-inner">Cost control for kids</span> </li>
                                                            <li class="text-list__item text-list__item--normal text-list__item--icon-internet"><span class="text-list__item-inner">Multiple links in a <a href="https://telia.no/link1">information</a>  line and a <a href="https://telia.no/link2">second link</a> </span> </li>
                                                            <li class="text-list__item text-list__item--normal text-list__item--icon-data-rollover"><span class="text-list__item-inner">NYHET! <a href='https://telia.no/data-rollover'>Data Rollover</a>  - Ta med ubrukt data</span> </li>
                                                          </ul>

                                                          React component docs

                                                          items Required

                                                          Type: array. Default: (none)

                                                            WebDealBanner

                                                            In Progress

                                                            Examples

                                                            Telia Deal

                                                            Nå kan du få en høyttaler fra Harman Kardon eller en Fitbit til 1,- når du kjøper abonnement hos oss med 12 måneder binding.

                                                            Høyttaler fra Harman Kardon eller Fitbit Alta? Uansett hvilken du velger vil du få en topp partner til mobilen.

                                                            Tilbudet forutsetter 12 måneders binding til SMART Mini, Basis, Pluss, Super eller Total. Tilbudet kan ikke kombineres med mobiltelefon eller andre tilbud. Pris ved binding: 1,- ved tegning av SMART Pluss, SMART Super og SMART Total, 799,- for SMART Basis, 1299,- for SMART Mini.

                                                            Tilbehøret velges i kassen, etter at du har valgt abonnement.

                                                            Harman Kardon Onyx Studio 3
                                                            Harman Kardon Onyx Studio 3

                                                            Velger du høyttaler fra Harman Kardon kan du strømme musikk til rommets midtpunkt, via Bluetooth i opptil 5 timer på batteri.

                                                            Den har også innebygd høyttalertelefon med ekko- og støyreduksjon, samt en 3.5mm stereo minijack inngang. Verdi 3499,-

                                                            Fitbit Alta
                                                            Fitbit Alta

                                                            Velger du Fitbit Alta, får du det perfekte smartarmbåndet. Fitbit Alta fungerer som treningsarmbånd, som sporer all din aktivitet, også mens du sover.

                                                            Du får motivasjonen direkte fra armen, og minner deg på om du bør røre på deg, og gir deg skryt når du har gjort det. Treningsarmbåndet har mange smarte funksjoner, samt et stilrent design. Verdi 1499,-

                                                            <div class="web-deal-banner web-deal-banner--pebble-6">
                                                              <div class="web-deal-banner__teaser">
                                                                <div class="content content--padded">
                                                                  <h3 class="heading heading--tertiary heading--light">
                                                                    <span class="heading__text">Telia Deal</span> 
                                                                  </h3>
                                                                  <div class="web-deal-banner__teaser-text">
                                                                    <p>Nå kan du få en høyttaler fra Harman Kardon eller en Fitbit til 1,- når du kjøper abonnement hos oss med 12 måneder binding.</p>
                                                                  </div>
                                                                  <img class="web-deal-banner__teaser-image" src="/images/bundling.png" />
                                                                  <div class="web-deal-banner__see-details">
                                                                    <label for="web-deal-banner_details" class="button button--alternate">Se detaljer</label>
                                                                  </div>
                                                                </div>
                                                              </div>
                                                              <input type="checkbox" class="web-deal-banner__details-toggler" id="web-deal-banner_details" />
                                                              <div class="content content--background content--padded web-deal-banner__details">
                                                                <div class="web-deal-banner__details-area">
                                                                  <div class="web-deal-banner__details-description">
                                                                    <p><strong>Høyttaler fra Harman Kardon eller Fitbit Alta?</strong>  Uansett hvilken du velger vil du få en topp partner til mobilen.</p>
                                                                    <p>Tilbudet forutsetter 12 måneders binding til SMART Mini, Basis, Pluss, Super eller Total. Tilbudet kan ikke kombineres med mobiltelefon eller andre tilbud. Pris ved binding: 1,- ved tegning av SMART Pluss, SMART Super og SMART Total, 799,- for
                                                                      SMART Basis, 1299,- for SMART Mini.</p>
                                                                    <p><strong>Tilbehøret velges i kassen, etter at du har valgt abonnement.</strong> </p>
                                                                  </div>
                                                                  <div class="web-deal-banner__item">
                                                                    <div class="web-deal-banner__item-details-image">
                                                                      <img src="//d260lbykd2otas.cloudfront.net/231P9VPeQMMyo0c0MoCu0a/d3d71debc52a37aeaed8d27b1717061c/OnyxStudio3_Black_small.png" alt="Harman Kardon Onyx Studio 3" />
                                                                      <div class="web-deal-banner__item-details-image-text">Harman Kardon Onyx Studio 3</div>
                                                                    </div>
                                                                    <div class="web-deal-banner__item-details-content">
                                                                      <div>
                                                                        <p>Velger du høyttaler fra Harman Kardon kan du strømme musikk til rommets midtpunkt, via Bluetooth i opptil 5 timer på batteri.</p>
                                                                        <p>Den har også innebygd høyttalertelefon med ekko- og støyreduksjon, samt en 3.5mm stereo minijack inngang. <strong>Verdi 3499,-</strong> </p>
                                                                      </div>
                                                                    </div>
                                                                  </div>
                                                                  <div class="web-deal-banner__item">
                                                                    <div class="web-deal-banner__item-details-image">
                                                                      <img src="//d260lbykd2otas.cloudfront.net/6BMAZcaXjGSKuO4Ia4uSOo/4c85eb41b217643b61c7e43c47b23188/Fitbit-alta-01.png" alt="Fitbit Alta" />
                                                                      <div class="web-deal-banner__item-details-image-text">Fitbit Alta</div>
                                                                    </div>
                                                                    <div class="web-deal-banner__item-details-content">
                                                                      <div>
                                                                        <p>Velger du Fitbit Alta, får du det perfekte smartarmbåndet. Fitbit Alta fungerer som treningsarmbånd, som sporer all din aktivitet, også mens du sover.</p>
                                                                        <p>Du får motivasjonen direkte fra armen, og minner deg på om du bør røre på deg, og gir deg skryt når du har gjort det. Treningsarmbåndet har mange smarte funksjoner, samt et stilrent design. <strong>Verdi 1499,-</strong> </p>
                                                                      </div>
                                                                    </div>
                                                                  </div>
                                                                </div>
                                                              </div>
                                                            </div>

                                                            React component docs

                                                            title Required

                                                            Type: string. Default: (none)

                                                              ingressDescriptionHtml Required

                                                              Type: string. Default: (none)

                                                                teaserImageUrl Required

                                                                Type: string. Default: (none)

                                                                  teaserButtonText Required

                                                                  Type: string. Default: (none)

                                                                    detailsDescriptionHtml Required

                                                                    Type: string. Default: (none)

                                                                      items Optional

                                                                      Type: arrayOf. Default: (none)

                                                                      • An object with shape:
                                                                        • imageUrl (string, Required)
                                                                        • imageDescriptionText (string, Required)
                                                                        • descriptionHtml (string, Required)

                                                                      pebbleType Optional

                                                                      Type: number. Default: pebbleTypes[1]

                                                                        Comparison

                                                                        In Progress

                                                                        Examples

                                                                        Apple iPhone 6S

                                                                        Det eneste som er endret med den nye Apple iPhone 6s, er absolutt alt.

                                                                        Apple iPhone 6S

                                                                        Det eneste som er endret med den nye Apple iPhone 6s, er absolutt alt.

                                                                        These are the main features

                                                                        5.5"5.3"
                                                                        7 timer standby5 timer standby
                                                                        200 megapiksler150 megapiksler
                                                                        200 gram198 gram
                                                                        Nisser og trollKun nisser
                                                                        30 apper28 apper
                                                                        <div class="comparison">
                                                                          <div class="comparison__primary">
                                                                            <div class="hardware-list-item">
                                                                              <a href="#" class="hardware-list-item__image">
                                                                                <img class="image" src="/images/iphone-6s-plus-rosegold.png" alt="Apple iPhone 6S" />
                                                                              </a> 
                                                                              <div class="hardware-list-item__name">
                                                                                <h3 class="heading heading--tertiary heading--labelled">
                                                                                  <a class="heading__link" href="#"><span class="heading__label">Apple</span>  <span class="heading__text">iPhone 6S</span>  </a> 
                                                                                </h3>
                                                                              </div>
                                                                              <div class="hardware-list-item__description">
                                                                                <p class="paragraph">Det eneste som er endret med den nye Apple iPhone 6s, er absolutt alt.</p>
                                                                              </div>
                                                                              <div class="hardware-list-item__action">
                                                                                <a href="#" class="button button--positive">Kjøp nå</a> 
                                                                              </div>
                                                                            </div>
                                                                          </div>
                                                                          <div class="comparison__secondary">
                                                                            <div class="hardware-list-item">
                                                                              <a href="#" class="hardware-list-item__image">
                                                                                <img class="image" src="/images/iphone-6s-plus-rosegold.png" alt="Apple iPhone 6S" />
                                                                              </a> 
                                                                              <div class="hardware-list-item__name">
                                                                                <h3 class="heading heading--tertiary heading--labelled">
                                                                                  <a class="heading__link" href="#"><span class="heading__label">Apple</span>  <span class="heading__text">iPhone 6S</span>  </a> 
                                                                                </h3>
                                                                              </div>
                                                                              <div class="hardware-list-item__description">
                                                                                <p class="paragraph">Det eneste som er endret med den nye Apple iPhone 6s, er absolutt alt.</p>
                                                                              </div>
                                                                              <div class="hardware-list-item__action">
                                                                                <a href="#" class="button button--positive">Kjøp nå</a> 
                                                                              </div>
                                                                            </div>
                                                                          </div>
                                                                          <div class="comparison__info">
                                                                            <div class="comparison__heading">
                                                                              <h2 class="heading heading--secondary heading--brand">
                                                                                <span class="heading__text">These are the main features</span> 
                                                                              </h2>
                                                                            </div>
                                                                            <table class="comparison__table">
                                                                              <tbody>
                                                                                <tr>
                                                                                  <td class="comparison__item">5.5"</td>
                                                                                  <td class="comparison__item">5.3"</td>
                                                                                </tr>
                                                                                <tr>
                                                                                  <td class="comparison__item">7 timer standby</td>
                                                                                  <td class="comparison__item">5 timer standby</td>
                                                                                </tr>
                                                                                <tr>
                                                                                  <td class="comparison__item">200 megapiksler</td>
                                                                                  <td class="comparison__item">150 megapiksler</td>
                                                                                </tr>
                                                                                <tr>
                                                                                  <td class="comparison__item">200 gram</td>
                                                                                  <td class="comparison__item">198 gram</td>
                                                                                </tr>
                                                                                <tr>
                                                                                  <td class="comparison__item">Nisser og troll</td>
                                                                                  <td class="comparison__item">Kun nisser</td>
                                                                                </tr>
                                                                                <tr>
                                                                                  <td class="comparison__item">30 apper</td>
                                                                                  <td class="comparison__item">28 apper</td>
                                                                                </tr>
                                                                              </tbody>
                                                                            </table>
                                                                          </div>
                                                                        </div>

                                                                        React component docs

                                                                        primary Required

                                                                        The shape of `primary` is `HardwareListItem.propTypes`

                                                                        Type: shape. Default: (none)

                                                                        secondary Required

                                                                        The shape of `secondary` is `HardwareListItem.propTypes`

                                                                        Type: shape. Default: (none)

                                                                        heading Required

                                                                        The shape of `heading` is `Heading.propTypes`

                                                                        Type: shape. Default: (none)

                                                                        items Required

                                                                        Type: arrayOf. Default: (none)

                                                                        • An object with shape:
                                                                          • primary (string, Required)
                                                                          • secondary (string, Required)

                                                                        Subscription

                                                                        In Progress

                                                                        Examples

                                                                        KAMPANJE: 100 kr rabatt i 6 måneder

                                                                        SMART Total

                                                                        40GB
                                                                        Se detaljer
                                                                        • Fri bruk av tale, SMS og MMS
                                                                        • 3 GB data / fri fart
                                                                        • You must be at least 21 years old
                                                                        • NYHET! Telia Music Freedom
                                                                        • Koster deg 23 Kr per dag
                                                                        Månedspris699,-Pris etter 6 mnd: 799,-
                                                                        <div class="subscription subscription--pebble-35">
                                                                          <div class="content content--background content--padded">
                                                                            <div class="subscription__main">
                                                                              <div class="subscription__highlight">
                                                                                <b>KAMPANJE:</b> 100 kr rabatt i 6 måneder</div>
                                                                              <div class="subscription__overview-section">
                                                                                <h2 class="heading heading--secondary">
                                                                                  <span class="heading__text">SMART Total</span> 
                                                                                </h2>
                                                                                <div class="subscription__data-included">40<span class="subscription__data-unit">GB</span> </div>
                                                                                <a href="#" class="button button--alternate">Se detaljer</a> 
                                                                              </div>
                                                                              <div class="subscription__characteristics-section">
                                                                                <ul class="text-list">
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-infinity"><span class="text-list__item-inner">Fri bruk av tale, SMS og MMS</span> </li>
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-broadband"><span class="text-list__item-inner">3 GB data / fri fart</span> </li>
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-u21"><span class="text-list__item-inner">You must be at least 21 years old</span> </li>
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-music-freedom"><span class="text-list__item-inner">NYHET! Telia Music Freedom</span> </li>
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-roam-like-home"><span class="text-list__item-inner">Roam like home</span> </li>
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-cost-control"><span class="text-list__item-inner">Koster deg 23 Kr per dag</span> </li>
                                                                                </ul>
                                                                              </div>
                                                                              <div class="subscription__price-section">
                                                                                <div class="subscription__price"><span class="subscription__price-label">Månedspris</span> <span class="subscription__price-amount">699,-</span> <span class="subscription__price-info">Pris etter 6 mnd: 799,-</span> </div>
                                                                                <div class="subscription__buy">
                                                                                  <a href="#" class="button button--positive">Fortsett</a> 
                                                                                </div>
                                                                              </div>
                                                                            </div>
                                                                          </div>
                                                                        </div>

                                                                        SMART Total

                                                                        40GB
                                                                        Se detaljer
                                                                        • Fri bruk av tale, SMS og MMS
                                                                        • 3 GB data / fri fart
                                                                        • Du kan bruke 1.3 GB hver dag
                                                                        • Koster deg 23 Kr per dag
                                                                        Månedspris699,-
                                                                        <div class="subscription subscription--pebble-8">
                                                                          <div class="content content--background content--padded">
                                                                            <div class="subscription__main">
                                                                              <div class="subscription__overview-section">
                                                                                <h2 class="heading heading--secondary">
                                                                                  <span class="heading__text">SMART Total</span> 
                                                                                </h2>
                                                                                <div class="subscription__data-included">40<span class="subscription__data-unit">GB</span> </div>
                                                                                <a href="#" class="button button--alternate">Se detaljer</a> 
                                                                              </div>
                                                                              <div class="subscription__characteristics-section">
                                                                                <ul class="text-list">
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-infinity"><span class="text-list__item-inner">Fri bruk av tale, SMS og MMS</span> </li>
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-broadband"><span class="text-list__item-inner">3 GB data / fri fart</span> </li>
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-info"><span class="text-list__item-inner">Du kan bruke 1.3 GB hver dag</span> </li>
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-roam-like-home"><span class="text-list__item-inner">Roam like home</span> </li>
                                                                                  <li class="text-list__item text-list__item--normal text-list__item--icon-cost-control"><span class="text-list__item-inner">Koster deg 23 Kr per dag</span> </li>
                                                                                </ul>
                                                                              </div>
                                                                              <div class="subscription__price-section">
                                                                                <div class="subscription__price"><span class="subscription__price-label">Månedspris</span> <span class="subscription__price-amount">699,-</span> </div>
                                                                                <div class="subscription__buy">
                                                                                  <a href="#" class="button button--positive">Fortsett</a> 
                                                                                </div>
                                                                              </div>
                                                                            </div>
                                                                          </div>
                                                                        </div>

                                                                        React component docs

                                                                        name Required

                                                                        Type: string. Default: (none)

                                                                          characteristics Required

                                                                          Type: arrayOf. Default: (none)

                                                                          • An object with shape:
                                                                            • icon (string, Required)
                                                                            • textHtml (string, Required)

                                                                          price Required

                                                                          Type: shape. Default: (none)

                                                                          dataIncluded Required

                                                                          Type: shape. Default: (none)

                                                                          pebbleType Optional

                                                                          Type: number. Default: pebbleTypes[35]

                                                                            linkUrl Required

                                                                            Type: string. Default: (none)