CDN Setup
This is the easiest and quickest way to add OneDesign to your application. Copy and paste the code below into the header <head> of your html file.
Quick Setup
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.css" integrity="sha384-/mUvNOAHTLZ1J6rcu4IJ7HC0RC87xr896u5UVTklGSaC0laWRNXESTPgvJpsf1Hu" crossorigin="anonymous">
Or the minified version:
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.min.css" integrity="sha384-sXu3vZrgAm282lSyafTkZutGdmEXGj9rjmSuViN9BoNGtlENDsA4bjBGfpPXLvAl" crossorigin="anonymous">
NB! This stylesheet already includes the Bootstrap styles and all Font-Awesome 6 Pro stylesheets, so you don't need to add these separately.
Starting with version 3.1, we've introduced new font variations due to licensing restrictions. The Avenir Next font can only be used on DNV-hosted applications. For on-premise or self-hosted solutions, we have switched to Nunito Sans to avoid any licensing issues.
From now on, the primary CSS file will use Nunito Sans as the default font. Additionally, a variant specifically for web applications hosted by DNV, named Onedesign.web.css, has been created.
OneDesign-Styles CDN endpoints
These are all of the available CDN endpoints depending on what your needs are, from the full library to only fonts.
Below are all the variations available of CSS files.
Main OneDesign Files
Default
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.css" integrity="sha384-/mUvNOAHTLZ1J6rcu4IJ7HC0RC87xr896u5UVTklGSaC0laWRNXESTPgvJpsf1Hu" crossorigin="anonymous">
Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.min.css" integrity="sha384-sXu3vZrgAm282lSyafTkZutGdmEXGj9rjmSuViN9BoNGtlENDsA4bjBGfpPXLvAl" crossorigin="anonymous">
Web
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.web.css" integrity="sha384-fs77xLMA7G/oPl0KAToDmkIYBG3TaIwk76T5M+8DVyorIwMFmeH42vaMpDLW96BE" crossorigin="anonymous">
Web Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.web.min.css" integrity="sha384-II2mnfRD7lDVCe+8M4wBDaAEiTmqPschw0nUT2WmQ3KbCS/fruKJ46Vxmk5r9M+H" crossorigin="anonymous">
On Prem
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.onprem.css" integrity="sha384-/mUvNOAHTLZ1J6rcu4IJ7HC0RC87xr896u5UVTklGSaC0laWRNXESTPgvJpsf1Hu" crossorigin="anonymous">
On Prem Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.onprem.min.css" integrity="sha384-sXu3vZrgAm282lSyafTkZutGdmEXGj9rjmSuViN9BoNGtlENDsA4bjBGfpPXLvAl" crossorigin="anonymous">
Fonts Only
Default
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.fonts.css" integrity="sha384-d4ZMaq82SL4pdhiGuUO/LX2ceA+WxAL7/khjNJSiKW1LQX5OOzALUt2RDtQzW+54" crossorigin="anonymous">
Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.fonts.min.css" integrity="sha384-uqAcY2GCg1EJuyTYTFdcPiJ0sCFfAzwatrfs9ph+Yao9DL+FRjlczsIYeGqQqTAd" crossorigin="anonymous">
Web
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.web.fonts.css" integrity="sha384-TxBvBJKdJ+1ZkIsaVkLkJKRvYexnQuHeBIsIXA92SLUSyMByHGJd4n+ZYiOZ4jVd" crossorigin="anonymous">
Web Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.web.fonts.min.css" integrity="sha384-pkaHmo/sXcU4ecjvzlIn6HjT8qd92wrVflF863D4XDjsImihFJeOgwqfZ3L6z3nG" crossorigin="anonymous">
On Prem
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.onprem.fonts.css" integrity="sha384-d4ZMaq82SL4pdhiGuUO/LX2ceA+WxAL7/khjNJSiKW1LQX5OOzALUt2RDtQzW+54" crossorigin="anonymous">
On Prem Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.onprem.fonts.min.css" integrity="sha384-uqAcY2GCg1EJuyTYTFdcPiJ0sCFfAzwatrfs9ph+Yao9DL+FRjlczsIYeGqQqTAd" crossorigin="anonymous">
No Grid
Default
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.nogrid.css" integrity="sha384-zBVVCKBq5t7haloSuNFIt15LdbpyrvRwTEU2Eyh4hLSzJlVBwhdyCEeSakhobter" crossorigin="anonymous">
Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.nogrid.min.css" integrity="sha384-tdjpopT0Hgdvo50JNKqAORdttg5Yf6P0pStqqXUAXLZyxWIwQYQwxmig1+5BC8F3" crossorigin="anonymous">
Web
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.web.nogrid.css" integrity="sha384-TUXraBFtGo8sEs95OAwHFukqda3Wkhv7NcWz+a3c5nTvKWL91LOZE/y6HlwTp2IC" crossorigin="anonymous">
Web Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.web.nogrid.min.css" integrity="sha384-pxQf+c6eInPOX4n7y4w8ilAaDOnZ2Tr/8qtljPJGBfDRZQ+PpNbeKnHmqipzfRqQ" crossorigin="anonymous">
On Prem
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.onprem.nogrid.css" integrity="sha384-zBVVCKBq5t7haloSuNFIt15LdbpyrvRwTEU2Eyh4hLSzJlVBwhdyCEeSakhobter" crossorigin="anonymous">
On Prem Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.onprem.nogrid.min.css" integrity="sha384-tdjpopT0Hgdvo50JNKqAORdttg5Yf6P0pStqqXUAXLZyxWIwQYQwxmig1+5BC8F3" crossorigin="anonymous">
Header only
Default
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.header.css" integrity="sha384-eJMkOCikfuoro/zwCaS1vTNPfY4mTeZZq8XF4lJxTK+J3Fe6gU1NmSoUwpSFx5G+" crossorigin="anonymous">
Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.header.min.css" integrity="sha384-f/PZ6R8CMIMHZIERFcX0iNrh0MAN1p9vqi0aWflTwx7jNlzCJSNIjaaTn6iWTpXA" crossorigin="anonymous">
Web
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.web.header.css" integrity="sha384-Bqk9v0E2jAu5U4wcXCdfJELbw6dTe7JHpdyChkW+o6t+YJ2Qz8dEMrDiKoMI707S" crossorigin="anonymous">
Web Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.web.header.min.css" integrity="sha384-BkBT2d26w41Faa44Jf8iGXGawHtmgavKo7MjFrZ4f86YSwbKKiYokRVRXxd/OPtV" crossorigin="anonymous">
On Prem
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.onprem.header.css" integrity="sha384-eJMkOCikfuoro/zwCaS1vTNPfY4mTeZZq8XF4lJxTK+J3Fe6gU1NmSoUwpSFx5G+" crossorigin="anonymous">
On Prem Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.onprem.header.min.css" integrity="sha384-f/PZ6R8CMIMHZIERFcX0iNrh0MAN1p9vqi0aWflTwx7jNlzCJSNIjaaTn6iWTpXA" crossorigin="anonymous">
Spinner only
Default
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.spinner.css" integrity="sha384-drMnYVGscFbK6lfNhWf9vDC4HVDyT06pUqSAnZDuWSfUJ+KHtJMch9z0TaCd4HSm" crossorigin="anonymous">
Minified
<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.spinner.min.css" integrity="sha384-Siq8Qs1xeTKn06uio+VuLU5zn0vf/1RI8UWKuPq9AoblqIyTeUsBq9N19977UitD" crossorigin="anonymous">
Starter HTML Samples
Base template
This is the basic setup for an HTML page that will use OneDesign-Styles.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- OneDesign CSS -->
<link rel="stylesheet" href="<link rel="stylesheet" href="https://cdn.onedesign.dnv.com/onedesigncdn/3.8.2/oneDesign.css" integrity="sha384-/mUvNOAHTLZ1J6rcu4IJ7HC0RC87xr896u5UVTklGSaC0laWRNXESTPgvJpsf1Hu" crossorigin="anonymous">" />
<!-- if you have your own CSS in addition, reference it here -->
<title>Hello, world!</title>
</head>
<body>
<div id="page">
<!-- Header goes here-->
<!-- Page content goes here -->
<!-- Footer goes here -->
<h1>Hello, world!</h1>
</div>
<!-- Popper is required for a few select components (dropdowns, popovers and tooltips) for positioning, if you're using our HTML samples directly -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"
integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- Your extra javascript goes here -->
</body>
</html>
CDN Preloader
If you wish to add a preloader to your project and are using CDN styles, we provide a lightweight CSS+HTML snippet. This snippet enables a full-page preloader that will automatically hide once the CDN stylesheets are fully loaded.
CSS
body {
padding: 0;
margin: 0;
}
.loader-wrap {
width: 100%;
height: 100vh;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
background-color: #e9f7fc;
}
.loader-wrap.light-background {
background-color: #e9f7fc;
}
.loader-wrap.dark-background {
background-color: #0f214d;
}
span.spinner {
background-image: url("data:image/svg+xml,%3Csvg width='513' height='512' viewBox='0 0 513 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.4' d='M457.635 370.69L429.805 354.79C426.582 352.91 424.121 349.958 422.852 346.449C421.584 342.94 421.588 339.096 422.865 335.59C408.637 365.246 386.721 390.545 359.396 408.855C332.072 427.165 300.338 437.816 267.5 439.698C234.662 441.581 201.92 434.627 172.682 419.559C143.444 404.492 118.779 381.863 101.256 354.027C83.7325 326.192 73.9909 294.168 73.0453 261.29C72.0996 228.411 79.9846 195.881 95.8793 167.084C111.774 138.288 135.097 114.278 163.421 97.5554C191.745 80.8326 224.033 72.0079 256.925 72C262.815 72 268.635 72.29 274.385 72.83C273.645 72.76 272.905 72.68 272.155 72.62C263.665 71.93 256.925 65.31 256.925 56.79V24.79C256.922 20.6585 258.516 16.6857 261.376 13.7034C264.235 10.7211 268.137 8.96042 272.265 8.79C267.165 8.46 262.105 8 256.925 8C119.925 8 8.92505 119 8.92505 256C8.92505 393 119.925 504 256.925 504C354.925 504 439.345 447.05 479.635 364.58C475.505 372.44 465.405 375.13 457.635 370.69V370.69Z' fill='%2300348F'/%3E%3Cpath d='M272.155 72.62C263.665 71.93 256.925 65.31 256.925 56.79V24.73C256.925 15.62 264.595 7.94999 273.695 8.55999C402.845 17.18 504.925 124.67 504.925 256C504.954 293.514 496.403 330.538 479.925 364.24C475.925 372.41 465.555 375.24 457.665 370.69L429.825 354.79C422.415 350.56 419.995 341.44 423.625 333.72C435.041 309.402 440.948 282.864 440.925 256C440.925 159.51 366.655 80.37 272.155 72.62Z' fill='%2300348F'/%3E%3C/svg%3E");
width: 4rem;
height: 4rem;
background-size: 100%;
animation: fa-spin 1s infinite linear;
}
.dark-background span.spinner {
background-image: url("data:image/svg+xml,%3Csvg width='513' height='512' viewBox='0 0 513 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.4' d='M457.635 370.69L429.805 354.79C426.582 352.91 424.121 349.958 422.852 346.449C421.584 342.94 421.588 339.096 422.865 335.59C408.637 365.246 386.721 390.545 359.396 408.855C332.072 427.165 300.338 437.816 267.5 439.698C234.662 441.581 201.92 434.627 172.682 419.559C143.444 404.492 118.779 381.863 101.256 354.027C83.7325 326.192 73.9909 294.168 73.0453 261.29C72.0996 228.411 79.9846 195.881 95.8793 167.084C111.774 138.288 135.097 114.278 163.421 97.5554C191.745 80.8326 224.033 72.0079 256.925 72C262.815 72 268.635 72.29 274.385 72.83C273.645 72.76 272.905 72.68 272.155 72.62C263.665 71.93 256.925 65.31 256.925 56.79V24.79C256.922 20.6585 258.516 16.6857 261.376 13.7034C264.235 10.7211 268.137 8.96042 272.265 8.79C267.165 8.46 262.105 8 256.925 8C119.925 8 8.92505 119 8.92505 256C8.92505 393 119.925 504 256.925 504C354.925 504 439.345 447.05 479.635 364.58C475.505 372.44 465.405 375.13 457.635 370.69V370.69Z' fill='%238FFFB2'/%3E%3Cpath d='M272.155 72.62C263.665 71.93 256.925 65.31 256.925 56.79V24.73C256.925 15.62 264.595 7.94999 273.695 8.55999C402.845 17.18 504.925 124.67 504.925 256C504.954 293.514 496.403 330.538 479.925 364.24C475.925 372.41 465.555 375.24 457.665 370.69L429.825 354.79C422.415 350.56 419.995 341.44 423.625 333.72C435.041 309.402 440.948 282.864 440.925 256C440.925 159.51 366.655 80.37 272.155 72.62Z' fill='%238FFFB2'/%3E%3C/svg%3E");
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
HTML
<div id="onedesign-preloader" class="loader-wrap light-background">
<span class="spinner"></span>
</div>