@dataforsyningen/icons
Version:
A collection of icons og logo images that are part of the SDFI design system.
114 lines (99 loc) • 2.82 kB
HTML
<html lang="da" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
<title>Design system ikoner og logoer</title>
<!-- Here is how to add the favicon -->
<link rel="icon" href="./logos/logo-simple-micro.svg">
<link rel="stylesheet" href="./css/designsystem.css">
<link rel="stylesheet" href="./css/logo-big.css">
<link rel="stylesheet" href="./css/logo-micro.css">
<style>
nav {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
gap: 1rem;
}
nav > a {
flex: 0 0 3rem;
text-align: center;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border: none;
}
nav > a:hover,
nav > a:active {
background-color: var(--lys-steel);
border-radius: 50%;
}
nav > a > svg {
width: 2rem;
height: 2rem;
}
article {
margin: 3rem 0;
padding-top: var(--space);
}
.icon-details > h2 {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.display-svg {
border: solid 1px var(--medium-steel);
border-radius: 2.5rem;
height: 4.5rem;
width: 4.5rem;
margin-right: var(--space);
margin-left: -1.25rem;
display: flex;
align-items: center;
justify-content: center;
}
code {
padding: 1.5rem 1rem;
background-color: var(--lys-steel);
display: block;
max-width: 100%;
overflow: auto;
}
.display-svg > svg {
height: auto;
width: 3rem;
}
#logo-big-hvid .display-svg,
a[href="#logo-big-hvid"] {
background-color: var(--mork-tyrkis);
}
a[href="#logo-big-hvid"] {
border-radius: 3rem;
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
flex: 0 0 3rem;
}
</style>
</head>
<body id="content-top">
<header data-theme="dark" id="header" style="margin-bottom: var(--typography-spacing-vertical);">
<div class="ds-container ds-padding">
<p class="ds-logo-responsive ds-logo-pull-left">
<strong>Dataforsyningen</strong>
<span>Styrelsen for Dataforsyning og Infrastruktur</span>
</p>
</div>
<div class="ds-container ds-padding" style="padding: 3rem 1rem;">
<h1 style="margin: 0;">Design System Icons</h1>
<p class="blockquote" style="margin: 0;">Implmentationer af SDFIs ikoner og logoer i CSS/SVG</p>
</div>
</header>
<main class="ds-container ds-padding">
<p>
Klik på et ikon for at se detaljer om det.<br>
<a href="#instructions">Kom i gang med at bruge <em>design system icons</em></a>
</p>