generated from nl-design-system/example
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: add HTML templates to fiddle with
- Loading branch information
Showing
5 changed files
with
283 additions
and
11 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
proprietary/rivm-design-tokens/src/templates/utrecht-css-components.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <!doctype html> | ||
| <html lang="nl" dir="ltr" class="rivm-theme utrecht-document"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Voorbeeld van Utrecht CSS components</title> | ||
| <link rel="stylesheet" href="https://unpkg.com/@utrecht/component-library-css/dist/index.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@utrecht/component-library-css/dist/html.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@nl-rvo/assets/fonts/index.css" /> | ||
| <link rel="stylesheet" href="../../dist/theme.css" /> | ||
| <!-- | ||
| Dit voorbeeld gebruikt BEM class names voor alles, met class="utrecht-document" en class="rivm-theme" op de root | ||
| --> | ||
| </head> | ||
| <body> | ||
| <h1 class="utrecht-heading-1">Hoi</h1> | ||
| <dl class="utrecht-data-list utrecht-data-list--html-dl utrecht-data-list--rows"> | ||
| <div class="utrecht-data-list__item"> | ||
| <dt class="utrecht-data-list__item-key">Voornaam</dt> | ||
| <dd class="utrecht-data-list__item-value utrecht-data-list__item-value--html-dd">Mees</dd> | ||
| </div> | ||
| <div class="utrecht-data-list__item"> | ||
| <dt class="utrecht-data-list__item-key">Achternaam</dt> | ||
| <dd class="utrecht-data-list__item-value utrecht-data-list__item-value--html-dd">de Vos</dd> | ||
| </div> | ||
| <div class="utrecht-data-list__item"> | ||
| <dt class="utrecht-data-list__item-key">Adres</dt> | ||
| <dd | ||
| class="utrecht-data-list__item-value utrecht-data-list__item-value--html-dd utrecht-data-list__item-value--multiline" | ||
| > | ||
| Tweede Kamer der Staten-Generaal Postbus 20018 2500 EA Den Haag | ||
| </dd> | ||
| </div> | ||
| </dl> | ||
| ; | ||
| </body> | ||
| </html> |
194 changes: 194 additions & 0 deletions
194
proprietary/rivm-design-tokens/src/templates/utrecht-html-components.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| <!doctype html> | ||
| <html lang="nl" dir="ltr" class="rivm-theme utrecht-document"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Voorbeeld van Utrecht HTML components</title> | ||
| <link rel="stylesheet" href="https://unpkg.com/@utrecht/component-library-css/dist/index.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@utrecht/component-library-css/dist/html.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@nl-rvo/assets/fonts/index.css" /> | ||
| <link rel="stylesheet" href="../../dist/theme.css" /> | ||
| <!-- | ||
| Dit voorbeeld gebruikt vanilla HTML voor alles. | ||
| In de praktijk wil je waarschijnlijk niet NL Design System CSS op elk HTML element, maar pas je | ||
| de class="utrecht-html" selectief toe, bijvoorbeeld op content uit een CMS die gemaakt is in een Rich Text Editor. | ||
| --> | ||
| </head> | ||
|
|
||
| <body class="utrecht-html"> | ||
| <div><a class="utrecht-skip-link utrecht-skip-link--visible-on-focus" href="#main">Skip to main content</a></div> | ||
| <div><a class="utrecht-skip-link utrecht-skip-link--visible-on-focus" href="#search">Skip to search</a></div> | ||
| <div> | ||
| <article> | ||
| <h1>Heading 1</h1> | ||
| <h2>Heading 2</h2> | ||
| <h3>Heading 3</h3> | ||
| <h4>Heading 4</h4> | ||
| <h5>Heading 5</h5> | ||
| <h6>Heading 6</h6> | ||
| <p class="lead"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore | ||
| magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla | ||
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id | ||
| est laborum. | ||
| </p> | ||
| <p> | ||
| <strong>Paragraph</strong>: Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod | ||
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco | ||
| laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit | ||
| esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui | ||
| officia deserunt mollit anim id | ||
| <a href="https://example.com" target="_blank" rel="external noreferrer"> est laborum </a> | ||
| . | ||
| </p> | ||
| <blockquote> | ||
| <p> | ||
| No man is an island, | ||
| <br /> | ||
| Entire of itself; | ||
| <br /> | ||
| Every man is a piece of the continent, | ||
| <br />A part of the main. | ||
| </p> | ||
| <p> | ||
| If a clod be washed away by the sea, | ||
| <br /> | ||
| Europe is the less, | ||
| <br /> | ||
| As well as if a promontory were: | ||
| <br /> | ||
| As well as if a manor of thy friend’s | ||
| <br /> | ||
| Or of thine own were. | ||
| </p> | ||
| <p> | ||
| Any man’s death diminishes me, | ||
| <br /> | ||
| Because I am involved in mankind. | ||
| <br /> | ||
| And therefore never send to know for whom the bell tolls; | ||
| <br /> | ||
| It tolls for thee. | ||
| </p> | ||
| </blockquote> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore | ||
| magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla | ||
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id | ||
| est laborum. | ||
| </p> | ||
| <hr /> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore | ||
| magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla | ||
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id | ||
| est laborum. | ||
| </p> | ||
| <table> | ||
| <caption> | ||
| Table Caption | ||
| </caption> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col"></th> | ||
| <th scope="col">Header Column A</th> | ||
| <th scope="col">Header Column B</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <th scope="row">Header Row 1</th> | ||
| <td>Cell A1</td> | ||
| <td>Cell B1</td> | ||
| </tr> | ||
| <tr> | ||
| <th scope="row">Header Row 2</th> | ||
| <td>Cell A2</td> | ||
| <td>Cell B2</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </article> | ||
| <form action="https://example.com/" method="post"> | ||
| <p> | ||
| <label for="username">Username</label> | ||
| <input type="text" autocomplete="username" id="username" name="username" /> | ||
| </p> | ||
| <p> | ||
| <label for="notes">Notes</label> | ||
| <textarea id="notes" name="notes"></textarea> | ||
| </p> | ||
| <fieldset> | ||
| <legend>Disabled inputs</legend> | ||
| <p> | ||
| <label for="disabled-username">Username</label> | ||
| <input type="text" autocomplete="username" id="disabled-username" name="disabled-username" disabled /> | ||
| </p> | ||
| <p> | ||
| <label for="disabled-notes">Notes</label> | ||
| <textarea id="disabled-notes" name="disabled-notes" disabled></textarea> | ||
| </p> | ||
| </fieldset> | ||
| <fieldset> | ||
| <legend>Read-only inputs</legend> | ||
| <p> | ||
| <label for="readonly-username">Username</label> | ||
| <input | ||
| type="text" | ||
| autocomplete="username" | ||
| id="readonly-username" | ||
| name="readonly-username" | ||
| readonly | ||
| value="example" | ||
| /> | ||
| </p> | ||
| <p> | ||
| <label for="readonly-notes">Notes</label> | ||
| <textarea id="readonly-notes" name="readonly-notes" readonly> | ||
| example | ||
| </textarea | ||
| > | ||
| </p> | ||
| </fieldset> | ||
| <fieldset> | ||
| <legend>Inputs with placeholder</legend> | ||
| <p> | ||
| <label for="placeholder-username">Username</label> | ||
| <input | ||
| type="text" | ||
| autocomplete="username" | ||
| id="placeholder-username" | ||
| name="plaeceholder-username" | ||
| placeholder="Username" | ||
| /> | ||
| </p> | ||
| <p> | ||
| <label for="placeholder-notes">Notes</label> | ||
| <textarea id="placeholder-notes" name="placeholder-notes" placeholder="Write some notes"></textarea> | ||
| </p> | ||
| </fieldset> | ||
| <fieldset> | ||
| <legend>Options</legend> | ||
| <p> | ||
| <input type="radio" id="option-a" name="option" value="A" /> | ||
| <label for="option-a">Option A</label> | ||
| </p> | ||
| <p> | ||
| <input type="radio" id="option-b" name="option" value="B" /> | ||
| <label for="option-b">Option B</label> | ||
| </p> | ||
| </fieldset> | ||
| <p> | ||
| <input type="checkbox" id="eula" name="eula" /> | ||
| <label for="eula">I agree to the terms and conditions</label> | ||
| </p> | ||
| <p> | ||
| <button type="submit">Login</button> | ||
| </p> | ||
| </form> | ||
| </div> | ||
| </body> | ||
| </html> |
48 changes: 48 additions & 0 deletions
48
proprietary/rivm-design-tokens/src/templates/utrecht-web-components.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!doctype html> | ||
| <html lang="nl" dir="ltr" class="rivm-theme utrecht-document"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Voorbeeld van Utrecht Web components</title> | ||
| <link rel="stylesheet" href="https://unpkg.com/@utrecht/component-library-css/dist/index.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@utrecht/component-library-css/dist/html.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@nl-rvo/assets/fonts/index.css" /> | ||
| <link rel="stylesheet" href="../../dist/theme.css" /> | ||
| <script type="module"> | ||
| import { defineCustomElements } from "https://unpkg.com/@utrecht/web-component-library-stencil/loader/index.js"; | ||
| defineCustomElements(); | ||
| </script> | ||
| <!-- | ||
| Dit voorbeeld gebruikt Web Components voor alles. | ||
| In de praktijk wil je waarschijnlijk niet voor álles web components gebruiken, maar kies je voor een hybride aanpak. | ||
| --> | ||
| </head> | ||
| <body class="utrecht-html"> | ||
| <utrecht-document> | ||
| <utrecht-article> | ||
| <utrecht-heading-1>Heading 1</utrecht-heading-1> | ||
| <utrecht-heading-2>Heading 2</utrecht-heading-2> | ||
| <utrecht-heading-3>Heading 3</utrecht-heading-3> | ||
| <utrecht-heading-4>Heading 4</utrecht-heading-4> | ||
| <utrecht-heading-5>Heading 5</utrecht-heading-5> | ||
| <utrecht-heading-6>Heading 6</utrecht-heading-6> | ||
| <utrecht-paragraph lead> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore | ||
| magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla | ||
| pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id | ||
| est laborum. | ||
| </utrecht-paragraph> | ||
| <utrecht-paragraph> | ||
| <utrecht-strong>Paragraph</utrecht-strong>: Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, | ||
| sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
| exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit | ||
| in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id | ||
| <a href="https://example.com" target="_blank" rel="external noreferrer"> est laborum </a> | ||
| . | ||
| </utrecht-paragraph> | ||
| </utrecht-article> | ||
| </utrecht-document> | ||
| </body> | ||
| </html> |