Skip to content

Instantly share code, notes, and snippets.

@Robbert

Robbert/thema.html

Created June 23, 2022 11:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Robbert/1b35e6b924c08a34446678229601271e to your computer and use it in GitHub Desktop.
Save Robbert/1b35e6b924c08a34446678229601271e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
thema.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example page</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@utrecht/design-tokens/dist/index.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@utrecht/component-library-css/dist/index.css" />
<style>
.my-theme {
--utrecht-button-background-color: tomato;
--utrecht-button-color: white;
--utrecht-button-padding-inline-end: 1em;
--utrecht-button-padding-inline-start: 1em;
--utrecht-heading-1-font-size: 2em;
}
</style>
</head>
<body>
<div class="my-theme">
<h1 class="utrecht-heading-1">Mijn eerste NL Design System thema!</h1>
<button type="button" class="utrecht-button utrecht-button--html-button">Klik hier!</button>
</div>
<div class="utrecht-theme">
<h2 class="utrecht-heading-2">Informatie over Utrecht</h2>
<p class="utrecht-paragaph">Prachtige stad, mooie huisstijl ook!</p>
<button type="button" class="utrecht-button utrecht-button--primary-action utrecht-button--html-button">Of klik hier!</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment