Skip to content

Commit

Permalink
Merge pull request #33 from dnbexperience/pattern-content
Browse files Browse the repository at this point in the history 
Pattern content
  • Loading branch information
@kgmurphy
kgmurphy authored Dec 19, 2018
2 parents 1d1cb40 + 4f8269f commit 70adb1e
Show file tree
Hide file tree
Showing 15 changed files with 653 additions and 203 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 70adb1e

Please sign in to comment.