Skip to content

Commit

Permalink
Merge pull request #34 from dnbexperience/develop
Browse files Browse the repository at this point in the history 
Portal content update
  • Loading branch information
@kgmurphy
kgmurphy authored Dec 19, 2018
2 parents b9b29a6 + 78bac6c commit 51a8075
Show file tree
Hide file tree
Showing 19 changed files with 943 additions and 221 deletions.
38 changes: 22 additions & 16 deletions packages/dnb-design-system-portal/src/pages/quickguide-designer/font-families.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import React from 'react'

const Syntax = () => (
<>
<h5>Fedra Sans Book</h5>
<div className="typography-box">
<div className="typo-book">
<h2>This is the Fedra Sans Book</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -17,7 +17,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -28,9 +28,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>Fedra Sans Book Italic</h5>
<div className="typography-box">
<div className="typo-book-italic">
<h2>This is the Fedra Sans Book Italic</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -39,7 +40,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -50,9 +51,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5 className="typo-medium">Fedra Sans Medium</h5>
<div className="typography-box">
<div className="typo-medium">
<h2 className="typo-medium">This is the Fedra Sans Medium</h2>
<p className="typo-medium">
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -61,7 +63,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -72,9 +74,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>Fedra Sans Medium Italic</h5>
<div className="typography-box">
<div className="typo-medium-italic">
<h2>This is the Fedra Sans Medium Italic</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -83,7 +86,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -94,9 +97,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>Fedra Sans Light</h5>
<div className="typography-box">
<div className="typo-light">
<h2>This is the Fedra Sans Light</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -105,7 +109,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -116,9 +120,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>Fedra Sans Light Italic</h5>
<div className="typography-box">
<div className="typo-light-italic">
<h2>This is the Fedra Sans Light Italic</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -127,7 +132,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -138,9 +143,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>This is the Fedra Sans Bold</h5>
<div className="typography-box">
<div className="typo-bold">
<h2>This is the Fedra Sans Bold</h2>
<p className="typo-bold">
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -149,7 +155,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -160,9 +166,9 @@ const Syntax = () => (
</div>
</div>
</div>
<h5>Fedra Sans Bold Italic</h5>
<div className="typography-box">
<div className="typo-bold-italic">
<h2>This is the Fedra Sans Bold Italic</h2>
<p className="typo-bold-italic">
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -171,7 +177,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand Down
32 changes: 14 additions & 18 deletions packages/dnb-design-system-portal/src/pages/quickguide-designer/line-height.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
<br />

##### Line height = 1rem (16px)

<div class="typography-box">
<ul>
<li>Line height = 1rem (16px)</li>
</ul>
<p class="lh-16">
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.
</p>
</div>

##### Line height = 1.5rem (24px)

<div class="typography-box">
<ul>
<li>Line height = 1.5rem (24px)</li>
</ul>
<p class="lh-24">
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.
</p>
</div>

##### Line height = 2rem (32px)

<div class="typography-box">
<ul>
<li>Line height = 2rem (32px)</li>
</ul>
<p class="lh-32">
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.
Expand All @@ -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.
<br />

##### Line height = 0.75rem (12px)

<div class="typography-box">
<ul>
<li>Line height = 0.75rem (12px)</li>
</ul>
<p class="lh-12">
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.
</p>
</div>

##### Line height = 1.25rem (20px)

<div class="typography-box">
<ul>
<li>Line height = 1.25rem (20px)</li>
</ul>
<p class="lh-20">
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.
</p>
</div>

##### Line height = 1.75rem (28px)

<div class="typography-box">
<ul>
<li>Line height = 1.75rem (28px)</li>
</ul>
<p class="lh-28">
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.
Expand Down
Loading

0 comments on commit 51a8075

Please sign in to comment.