diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/font-families.js b/packages/dnb-design-system-portal/src/pages/quickguide-designer/font-families.js index 9cd5b8dfbcc..9e77489d005 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer/font-families.js +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/font-families.js @@ -6,9 +6,9 @@ import React from 'react' const Syntax = () => ( <> +
Fedra Sans Book
-

This is the Fedra Sans Book

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites @@ -17,7 +17,7 @@ const Syntax = () => ( "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

-

Here are some numbers:

+
Here are some numbers:

Lining: 123456789 @@ -28,9 +28,10 @@ const Syntax = () => (

+ +
Fedra Sans Book Italic
-

This is the Fedra Sans Book Italic

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites @@ -39,7 +40,7 @@ const Syntax = () => ( "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

-

Here are some numbers:

+
Here are some numbers:

Lining: 123456789 @@ -50,9 +51,10 @@ const Syntax = () => (

+ +
Fedra Sans Medium
-

This is the Fedra Sans Medium

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites @@ -61,7 +63,7 @@ const Syntax = () => ( "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

-

Here are some numbers:

+
Here are some numbers:

Lining: 123456789 @@ -72,9 +74,10 @@ const Syntax = () => (

+ +
Fedra Sans Medium Italic
-

This is the Fedra Sans Medium Italic

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites @@ -83,7 +86,7 @@ const Syntax = () => ( "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

-

Here are some numbers:

+
Here are some numbers:

Lining: 123456789 @@ -94,9 +97,10 @@ const Syntax = () => (

+ +
Fedra Sans Light
-

This is the Fedra Sans Light

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites @@ -105,7 +109,7 @@ const Syntax = () => ( "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

-

Here are some numbers:

+
Here are some numbers:

Lining: 123456789 @@ -116,9 +120,10 @@ const Syntax = () => (

+ +
Fedra Sans Light Italic
-

This is the Fedra Sans Light Italic

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites @@ -127,7 +132,7 @@ const Syntax = () => ( "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

-

Here are some numbers:

+
Here are some numbers:

Lining: 123456789 @@ -138,9 +143,10 @@ const Syntax = () => (

+ +
This is the Fedra Sans Bold
-

This is the Fedra Sans Bold

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites @@ -149,7 +155,7 @@ const Syntax = () => ( "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

-

Here are some numbers:

+
Here are some numbers:

Lining: 123456789 @@ -160,9 +166,9 @@ const Syntax = () => (

+
Fedra Sans Bold Italic
-

This is the Fedra Sans Bold Italic

Here is a paragraph with some nonsense lipsum text. Contrary to popular belief, Lorem Ipsum passage, and going through the cites @@ -171,7 +177,7 @@ const Syntax = () => ( "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.

-

Here are some numbers:

+
Here are some numbers:

Lining: 123456789 diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/line-height.md b/packages/dnb-design-system-portal/src/pages/quickguide-designer/line-height.md index 89e18e6a73b..9db159291ee 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer/line-height.md +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/line-height.md @@ -11,31 +11,29 @@ When line heights are multiples of 8px (0.5rem), they will cause the content blo #### These break _*neatly*_ on the grid (line heights 1rem, 1.5rem and 2rem) Because their line-height **is** evenly divisible by 8. +
+ +##### Line height = 1rem (16px)

-
    -
  • Line height = 1rem (16px)
    • -

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

+##### Line height = 1.5rem (24px) +
-
    -
  • Line height = 1.5rem (24px)
    • -

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

+##### Line height = 2rem (32px) +
-
    -
  • Line height = 2rem (32px)
    • -

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an. @@ -45,31 +43,29 @@ ne primis intellegat. Dico purto nullam sea an. #### These break alternatively on/off the grid (line heights 0.75rem, 1.25rem and 1.75rem) Because their line-height **is not** evenly divisible by 8. +
+ +##### Line height = 0.75rem (12px)

-
    -
  • Line height = 0.75rem (12px)
    • -

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

+##### Line height = 1.25rem (20px) +
-
    -
  • Line height = 1.25rem (20px)
    • -

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an.

+##### Line height = 1.75rem (28px) +
-
    -
  • Line height = 1.75rem (28px)
    • -

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an. diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/typographic-elements.md b/packages/dnb-design-system-portal/src/pages/quickguide-designer/typographic-elements.md index 2120a3488a7..7f10c454acc 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer/typographic-elements.md +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/typographic-elements.md @@ -7,17 +7,25 @@ draft: true This is an overview of the default, basic typographic elements such as **headings, sub-headings, body text etc.** Note, the following have a 16px (1 rem) default bottom margin. This can be adjusted to suite the context. Increase or decrease in Eufemia space units (4,8,16...etc,). +

+ +#### H1 heading + +##### Use when: + +You wish to...... + +##### Specs: -

-

-H1 heading -

-Use when: You wish to......
    -
  • font-size: 3em (48px)
    • -
  • line-height: 3.5rem (56px)
    • -
  • margin-bottom: 1rem (16px)
    • +
  • font-size: 3em (48px)
    • +
  • line-height: 3.5rem (56px)
    • +
  • margin-bottom: 1rem (16px)
+ +##### Example: + +

Quem facilisi moderatius id eam, id tamquam albucius per.

@@ -26,32 +34,49 @@ This is a regular paragraph following the text above. Quem facilisi moderatius i

-
-

-H1 small heading -

-Use when: You wish to...... +#### H1 small heading + +##### Use when: + +You wish to...... + +##### Specs: +
    -
  • font-size: 2rem (32px)
    • -
  • line-height: 3rem (48px)
    • -
  • margin-bottom: 1rem (16px)
    • +
  • font-size: 2rem (32px)
    • +
  • line-height: 3rem (48px)
    • +
  • margin-bottom: 1rem (16px)
-

-Testing Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro. + +##### Example: + +
+

+This part is small facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire

This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

-
-

H2 - Heading

-Use when: You wish to...... +#### Heading + +##### Use when: + +You wish to..... + +##### Specs: +
    -
  • font-size: 1.5em (24px)
    • -
  • line-height: 2rem (32px)
    • -
  • margin-bottom: 1rem (16px)
    • +
  • font-size: 1.5em (24px)
    • +
  • line-height: 2rem (32px)
    • +
  • margin-top: 1.5rem (24px)
    • +
  • margin-bottom: 1rem (16px)
+ +##### Example: + +

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro.

@@ -60,88 +85,75 @@ This is a regular paragraph following the text above. Quem facilisi moderatius i

-
-

H3 - Heading

-Use when: You wish to...... +#### H3 - Heading + +##### Use when: + +You wish to...... + +##### Specs: +
    -
  • font-size: 1.25em (20px)
    • -
  • line-height: 2rem (32px)
    • -
  • margin-bottom: 1rem (16px)
    • +
  • font-size: 1.25em (20px)
    • +
  • line-height: 2rem (32px)
    • +
  • margin-bottom: 1rem (16px)
-

-Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea -ne primis intellegat. Dico purto nullam sea an. -

-

-This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. -

-
+ +##### Example:
-

H3 small - Heading

-Use when: You wish to...... -
    -
  • font-size: 1.25em (20px)
    • -
  • line-height: 2rem (32px)
    • -
  • margin-bottom: 1rem (16px)
    • -

- Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an. -

This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

-
-

Lead - Block of text

-Use when: You wish to...... +#### Lead - Block of text + +##### Use when: + +You wish to...... + +##### Specs: +
    -
  • font-size: 1.25em (20px)
    • -
  • line-height: 2rem (32px)
    • -
  • margin-bottom: 1rem (16px)
    • +
  • font-size: 1.25em (20px)
    • +
  • line-height: 2rem (32px)
    • +
  • margin-bottom: 1rem (16px)
-

-Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea -ne primis intellegat. Dico purto nullam sea an. -

-

-This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. -

-
+ +##### Example:
-

Lead small - Block of text

-Use when: You wish to...... -
    -
  • font-size: 1em (16px)
    • -
  • line-height: 1.5rem (24px)
    • -
  • margin-bottom: 1rem (16px)
    • -

-First some ordinary p.lead text - Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an. - -Followed by some more ordinary p.lead text.

This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.

-
-

Body

-Use when: You wish to...... +#### Body text (paragraph) + +##### Use when: + +You wish to...... + +##### Specs: +
    -
  • font-size: 1em (16px)
    • -
  • line-height: 1.5rem (24px)
    • -
  • margin-bottom: 1rem (16px)
    • +
  • font-size: 1em (16px)
    • +
  • line-height: 1.5rem (24px)
    • +
  • margin-bottom: 1rem (16px)
+ +##### Example: + +

Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea ne primis intellegat. Dico purto nullam sea an. @@ -151,61 +163,43 @@ This is a regular paragraph following the text above. Quem facilisi moderatius i

-
-

Small Text

-Use when: You wish to...... +#### Small Text + +##### Use when: + +You wish to...... + +#### Specs: +
    -
  • font-size: 0.875em (14px)
    • -
  • line-height: 1.375rem (22px)
    • +
  • font-size: 0.875em
    • +
  • line-height: 1.375rem
- -Lorem ipsum this has no p tag. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea -ne primis intellegat. Dico purto nullam sea an. - -

-This is a regular paragraph following the text above. This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. -

-
-## Heading combinations +##### Note: -#### Headings with 'small' tags within them +There are two methods to create 'small' text. One, is to use the 'dnb-small' class which can be used on paragraphs etc. and allows you to use a bottom margin. The other method is to just use a 'small' tag which is inline and cannot have a margin. -NB! Decide if the 'small' part of the header should display as a block or run-in to the rest of the header content. The examples below show the small content running into the regulat header content. +##### Example #1:
-

This is an H1 on it's own

-

-This is a small tag wrapping part of the H1 content.This is the rest of the H1 -

-Use when: You wish to...... +

+This is a 'dnb-small' class on a paragraph tag. Lorem ipsum this has no p tag. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. +

-
-

-This is a H2 on it's own -

-

-This is a small tag wrapping part of the H2 content. This is the rest of the H2 -

-Use when: You wish to...... -
+##### Example #2:
-

-This is a H3 on it's own -

-

-This is a small tag wrapping part of the H3 content. This is the rest of the H3 -

-Use when: You wish to...... +

+This is a paragraph with a small tag inserted here: this is the small content. This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. +

-## Simulations +##### Example #3:
-

-This is a p with class 'lead'.It looks the same as an H3 and can be used for ingress and introductive texts. -

-Use when: You need a type element to look like another and remain semantically correct. + +This is just with a small tag. This is a regular paragraph following the text above. Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. +
diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js index 3851368f94f..23e837178eb 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js +++ b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js @@ -180,22 +180,22 @@ export default css` ul { margin: 0; - margin-bottom: calc(1rem - 2px); padding: 0; font-size: 1em; line-height: 1rem; list-style: none; - + /* border-top: 1px solid rgba(219, 0, 255, 0.25); border-bottom: 1px solid rgba(219, 0, 255, 0.25); + */ } li { margin: 0; padding: 0; - font-size: 1em; + font-size: 1rem; font-family: monospace; line-height: 1rem; } diff --git a/packages/dnb-ui-lib/src/components/button/assets/button-label-wrap.svg b/packages/dnb-ui-lib/src/components/button/assets/button-label-wrap.svg new file mode 100644 index 00000000000..9f2491f8d39 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/button/assets/button-label-wrap.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/dnb-ui-lib/src/components/button/assets/space-between-button-groups.svg b/packages/dnb-ui-lib/src/components/button/assets/space-between-button-groups.svg new file mode 100644 index 00000000000..d27b922be75 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/button/assets/space-between-button-groups.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/dnb-ui-lib/src/components/button/assets/space-between-buttons.svg b/packages/dnb-ui-lib/src/components/button/assets/space-between-buttons.svg new file mode 100644 index 00000000000..0ada0b8a0ac --- /dev/null +++ b/packages/dnb-ui-lib/src/components/button/assets/space-between-buttons.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/dnb-ui-lib/src/components/button/assets/stacking-buttons.svg b/packages/dnb-ui-lib/src/components/button/assets/stacking-buttons.svg new file mode 100644 index 00000000000..e4206b22811 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/button/assets/stacking-buttons.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/dnb-ui-lib/src/patterns/article/Example.js b/packages/dnb-ui-lib/src/patterns/article/Example.js index 63abced7095..6bf6d72d498 100644 --- a/packages/dnb-ui-lib/src/patterns/article/Example.js +++ b/packages/dnb-ui-lib/src/patterns/article/Example.js @@ -11,14 +11,302 @@ class Example extends PureComponent { return (
-

- My small H1 -

-

My H2

-

- Vivamus litora imperdiet placerat aenean venenatis congue nec - porttitor risus -

+
+

Article header patterns

+

+ The following header pattern consists of an H1 with the first + part wrapped in a 'small' tag. The small tag is displaying as + a block. Following the h1 is a paragarph tag with class + 'dnb-lead' which is used here as an ingress or intro + paragraph. +

+

+ The default bottom margin is removed from elements (H1, H2, p + etc.) placed inside a 'header'. +

+
+
+

+ Ha finansieringsbeviset klart + Det tar bare noen minutter å søke og få svar på hvor mye + du kan låne +

+

+ Vivamus litora imperdiet placerat aenean venenatis congue + nec porttitor risus +

+
+

+ Spare er appen som samler alt om sparing på ett sted. + Opprett sparemål og spar til de gode opplevelsene som du + kan dele med de du er glad i. Last ned appen på mobilen din + nå! +

+
+ +

+ In these examples pattern, note the custom margin between the + header and the last paragraph +

+
+
+

+ Ha finansieringsbeviset klart + + Det tar bare noen minutter å søke og få svar på hvor + mye du kan låne + +

+

+ Vivamus litora imperdiet placerat aenean venenatis congue + nec porttitor risus +

+
+

+ Spare er appen som samler alt om sparing på ett sted. + Opprett sparemål og spar til de gode opplevelsene som du + kan dele med de du er glad i. Last ned appen på mobilen din + nå! +

+
+

An example subheader

+
+

A sub header (h2 with default margin bottom.)

+

+ Spare er appen som samler alt om sparing på ett sted. + Opprett sparemål og spar til de gode opplevelsene som du + kan dele med de du er glad i. Last ned appen på mobilen din + nå! +

+
+ +
+
+

h1 HTML5 Kitchen Sink

+

+ h2 Back in my quaint garden +

+

+ h3 Jaunty zinnias vie with + flaunting phlox +

+

+ h4 Five or six big jet planes zoomed quickly by the new + tower. +

+
+ h5 Expect skilled signwriters to use many jazzy, quaint + old alphabets effectively. +
+
h6 Pack my box with five dozen liquor jugs.
+
+
+
+
+
+ +
+ +
+

+ This paragraph is nested inside an article. It contains + many different, sometimes useful,{' '} + HTML5 tags. + Of course there are classics like emphasis,{' '} + strong, and small but + there are many others as well. Hover the following text + for abbreviation tag:{' '} + abbr. Similarly, you + can use acronym tag like this:{' '} + ftw. You can + define deleted text which often gets replaced + with inserted text. +

+

+ You can also use keyboard text, which + sometimes is styled similarly to the{' '} + <code> or samp tags. Even + more specifically, there is a tag just for{' '} + variables. Not to be mistaken with blockquotes + below, the quote tag lets you denote something as{' '} + quoted text. Lastly don't forget the sub (H + 2O) and sup (E = MC2) tags.{' '} +

+
+ +
This is footer for this section
+
+
+
+
+

+ Blockquote: I quickly explained that many big jobs + involve few hazards +

+
+
+

+ This is a mult-line blockquote with a cite reference. + People think focus means saying yes to the thing you’ve + got to focus on. But that’s not what it means at all. It + means saying no to the hundred other good ideas that + there are. You have to pick carefully. I’m actually as + proud of the things we haven’tdone as the things I have + done. Innovation is saying no to 1,000 things. + + Steve Jobs – Apple Worldwide Developers’ Conference, + 1997 + +

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tables can have captions now.
PersonNumberThird Column
Someone Lastname900 + Nullam quis risus eget urna mollis ornare vel eu leo. +
+ Person Name + 1200 + Vestibulum id ligula porta felis euismod semper. + Donec ullamcorper nulla non metus auctor fringilla. +
Another Person1500 + Vivamus sagittis lacus vel augue laoreet rutrum + faucibus dolor auctor. Nullam id dolor id nibh + ultricies vehicula ut id elit. +
Last One2800 + Morbi leo risus, porta ac consectetur ac, vestibulum + at eros. Cras mattis consectetur purus sit amet + fermentum. +
+
+
+
+
+
Definition List Title
+
Definition list division.
+
Kitchen Sink
+
+ Used in expressions to describe work in which all + conceivable (and some inconceivable) sources have been + mined. In this case, a bunch of markup. +
+
aside
+
Defines content aside from the page content
+
blockquote
+
+ Defines a section that is quoted from another source +
+
+
+
+
+
    +
  • + Unordered List item one +
      +
    • + Nested list item +
        +
      • Level 3, item one
        • +
      • Level 3, item two
        • +
      • Level 3, item three
        • +
      • Level 3, item four
        • +
      +
      • +
    • List item two
      • +
    • List item three
      • +
    • List item four
      • +
    +
    • +
  • List item two
    • +
  • List item three
    • +
  • List item four
    • +
+
+
    +
  1. + List item one +
      +
    1. + List item one +
        +
      1. List item one
        2. +
      2. List item two
        3. +
      3. List item three
        4. +
      4. List item four
        5. +
      +
      2. +
    2. List item two
      3. +
    3. List item three
      4. +
    4. List item four
      5. +
    +
    2. +
  2. List item two
    3. +
  3. List item three
    4. +
  4. List item four
    5. +
+
+
+
+
+ 1 Infinite Loop +
+ Cupertino, CA 95014 +
+ United States +
+
+
+ +
+ dnb +
+ Fig1. A picture of Bill Murray from{' '} + fillmurray.com +
+
+
) diff --git a/packages/dnb-ui-lib/src/patterns/article/style/_article.scss b/packages/dnb-ui-lib/src/patterns/article/style/_article.scss index cc63959af30..9262512165c 100644 --- a/packages/dnb-ui-lib/src/patterns/article/style/_article.scss +++ b/packages/dnb-ui-lib/src/patterns/article/style/_article.scss @@ -6,27 +6,13 @@ .dnb-article { --border-color: #dfe2e5; - p { - margin-bottom: 1em; + header { + margin-bottom: 5rem; } - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 1em 0; - } - - h1 { - margin-top: 1.5em; - margin-bottom: 1em; - } - - h2 { - margin-top: 1.5em; - margin-bottom: 1em; + header h1, + header p { + margin: 0; } *:not([class^='dnb-']) + { diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/FormSpacingDetails.svg b/packages/dnb-ui-lib/src/patterns/form/assets/FormSpacingDetails.svg new file mode 100644 index 00000000000..4ad2d7f4c2a --- /dev/null +++ b/packages/dnb-ui-lib/src/patterns/form/assets/FormSpacingDetails.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing-details.svg b/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing-details.svg new file mode 100644 index 00000000000..4ad2d7f4c2a --- /dev/null +++ b/packages/dnb-ui-lib/src/patterns/form/assets/form-spacing-details.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/dnb-ui-lib/src/patterns/form/assets/form-summary-pattern.svg b/packages/dnb-ui-lib/src/patterns/form/assets/form-summary-pattern.svg new file mode 100644 index 00000000000..8c339715b4b --- /dev/null +++ b/packages/dnb-ui-lib/src/patterns/form/assets/form-summary-pattern.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/dnb-ui-lib/src/patterns/form/description.md b/packages/dnb-ui-lib/src/patterns/form/description.md index 06b603edda7..d7f63144b1d 100644 --- a/packages/dnb-ui-lib/src/patterns/form/description.md +++ b/packages/dnb-ui-lib/src/patterns/form/description.md @@ -3,6 +3,7 @@ status: 'wip' --- import FormSpacing from './assets/form-spacing.svg' +import FormSpacingDetails from './assets/form-spacing-details.svg' import LabelStack from './assets/label-stack.svg' import FormDivision from './assets/form-division.svg' import ProgressSteps from './assets/progress-steps.svg' @@ -23,7 +24,7 @@ Forms in Eufemia are regarded as patterns because of their unpredictable and var Use Eufemia's spatial system to lay out forms. -Form spacing +Form spacing Break up sections using a heading, light background color and space. Form division diff --git a/packages/dnb-ui-lib/src/style/core/dnb-theme.scss b/packages/dnb-ui-lib/src/style/core/dnb-theme.scss index b4b4b507c65..fd3d8804b29 100644 --- a/packages/dnb-ui-lib/src/style/core/dnb-theme.scss +++ b/packages/dnb-ui-lib/src/style/core/dnb-theme.scss @@ -63,7 +63,7 @@ .dnb-style { small { font-size: 0.875rem; // 14px - line-height: 1rem; // 16px + line-height: 1.5rem; } h1, @@ -72,7 +72,7 @@ h4, h5, h6 { - margin: 1em 0; + margin: 1rem 0; padding: 0; font-family: var(--font-family-demi); @@ -83,20 +83,22 @@ } h1 { - margin: 1.5em 0 1em; + margin: 1.5rem 0 1rem; font-size: 3rem; // 48px line-height: 3.5rem; // 56px font-weight: 400; } + h1.small, h1 small { + display: block; font-size: 2rem; // 32px line-height: 3rem; // 48px } h2 { - margin: 1.5em 0 1em; + margin: 1.5rem 0 1rem; font-size: 1.5rem; // 24px line-height: 2rem; // 32px @@ -117,7 +119,7 @@ h3.small, p.dnb-lead > small, p.dnb-lead > .small { - font-size: 1em; // 16px + font-size: 1rem; // 16px line-height: 1.5rem; // 24px } @@ -176,10 +178,10 @@ border-bottom: 1px solid transparent; font-size: 1em; - line-height: 1.5rem; + line-height: 1.5em; } table th { - padding: 3rem 1rem 0.5rem; + padding: 3em 1em 0.5em; font-weight: 600; text-align: left; @@ -189,10 +191,10 @@ border-bottom: 1px solid var(--color-mint-green); } table td { - padding: 1.0625rem 1rem; + padding: 1.0625em 1em; border-bottom: 1px solid transparent; - line-height: 1.5rem; + line-height: 1.5em; } table tr { background-color: #fff; @@ -232,12 +234,12 @@ ul li, ol li { - margin-top: 1rem; - margin-bottom: 1rem; + margin-top: 1em; + margin-bottom: 1em; } li > p { - margin-top: 1rem; + margin-top: 1em; } li + li { @@ -282,20 +284,20 @@ dl dt { padding: 0; - margin-top: 1rem; - font-size: 1rem; + margin-top: 1em; + font-size: 1em; font-style: italic; font-weight: 600; } dl dd { - padding: 0 1rem; - margin-bottom: 1rem; + padding: 0 1em; + margin-bottom: 1em; } blockquote { margin: 0; - padding: 0 1rem; + padding: 0 1em; color: #666; border-left: 0.25em solid #dfe2e5; } @@ -326,7 +328,7 @@ code, * code { margin: 0; - padding: 0.2em 0.4em; + padding: 0.2rem 0.4rem; font-size: 0.875em; background-color: var(--color-mint-green-25);