From 22f167e324440c7d5e4522f3d5749f29bf40d105 Mon Sep 17 00:00:00 2001 From: tujoworker Date: Wed, 19 Dec 2018 12:50:09 +0000 Subject: [PATCH] feat: some pages where updated/added | Article.txt --- .../src/uilib/patterns/examples/Article.txt | 289 +++++++++++++++++- 1 file changed, 281 insertions(+), 8 deletions(-) diff --git a/packages/dnb-design-system-portal/src/uilib/patterns/examples/Article.txt b/packages/dnb-design-system-portal/src/uilib/patterns/examples/Article.txt index c2f82001426..968c127c60a 100644 --- a/packages/dnb-design-system-portal/src/uilib/patterns/examples/Article.txt +++ b/packages/dnb-design-system-portal/src/uilib/patterns/examples/Article.txt @@ -1,10 +1,283 @@
-

- 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 +
+
+