Cookie-inställningar

Vi använder cookies för att ge dig en bättre användarupplevelse och personlig service. Genom att samtycka till användningen av cookies kan vi utveckla en ännu bättre tjänst och tillhandahålla innehåll som är intressant för dig. Du har kontroll över dina cookiepreferenser och kan ändra dem när som helst. Läs mer om våra cookies.

Hoppa till innehåll

Design system

Use this page to discover the blocks, styles and variations available in the JNT theme.

Typography

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Large paragraph (l-body): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere semper est, ut rhoncus velit sagittis sit amet. Quisque pellentesque erat sit amet commodo dictum.

Medium / default paragraph (m-body): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit sed tortor vel dictum. Aliquam ut orci sapien. Pellentesque fermentum porta nibh tincidunt congue.

Small paragraph (s-body): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim purus eget eleifend ultrices. Aliquam quis tellus orci. Fusce dictum sodales bibendum.

  • Unordered list item one
  • Unordered list item two
    • Nested item
    • Nested item
  • Unordered list item three
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three

Spacious list style

  • Spacious item one
  • Spacious item two
  • Spacious item three

Decorative list style

  • Decorative item one
  • Decorative item two
  • Decorative item three

Heading styles

Huge heading style

Body-font heading style

Inside-group heading style

The inside-group style keeps the heading spaced from the content that follows it inside a group.

Buttons

Styles — Default (fill) and Outline

Sizes — S, M, L

Colours — Teal (default) and Secondary

Width options

On dark background (outline flips to white)

Buttons ”Extended” style (full-width grid)

Group & Columns

Group block with a mint-cream background.

Group ”Paragraph” style — constrains the group to the content width like a paragraph.

Column one

Column two

Column three

Media & Text columns style

Image & text side by side

The ”Media & Text” columns style pairs an image column with a text column using the media-text gutter.

Inline link on a light background — this is a link within body text.

Inline link on a dark background — this is a link within body text.

Quote & Pullquote

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system.

Author of quote

A pullquote drawing attention to a key statement on the page.

Author of quote

Image

Center aligned
Wide width

Embeds

YouTube embed
Local video

Table

PlanSpeedPrice
Basic100/100 Mbit/s29 €/mo
Plus250/250 Mbit/s39 €/mo
Max1000/1000 Mbit/s49 €/mo

Media & Text

Media & Text

Default media & text with the image cropped to fill its column.

Uncropped style

The ”Uncropped” style lets the image keep its natural aspect ratio instead of filling the column.

Cover

Cover with image and overlay

Cover ”Hero” style

Cover ”No margin” style

Gallery ”Grid” style

Gallery ”Logos” style

Separator

Text above the separator.

Text below the separator.

Media Card

Card heading

A media card with an image, heading, text and a call to action.

Card on teal

A media card with a teal background.

Accordion

What is the JNT design system?

A shared set of blocks, styles and tokens used to build pages consistently.

Can items contain any blocks?

Yes — each accordion item accepts any inner blocks, including lists and buttons.

Does it support multiple open items?

The accordion can be configured to allow multiple items open at once.

Details

Click to expand

Hidden content revealed by the native details block.

Share

Query loop & Post teaser

Service messages