@osserpse/pn-icons
Version:
Icons and SCSS in PostNord Graphical Guidelines
93 lines (91 loc) • 3.34 kB
HTML
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Styles Kitchen Sink | PostNord</title>
<link href="pn-fonts.css" rel="stylesheet">
<link href="pn-styles.css" rel="stylesheet">
</head>
<body>
<div class="pn-main-view">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<div class="pn-box">
<p class="pn-type-mega">Mega</p>
<p class="pn-type-hero">Hero</p>
<p class="pn-type-jumbo">Jumbo</p>
<p class="pn-type-bigshot">Bigshot</p>
<p class="pn-type-chief">Chief</p>
<p class="pn-type-chief-book">Chief Book</p>
<p class="pn-type-common">Common</p>
<p class="pn-type-common-book">Common Book</p>
<p>
This is a paragraph without any css class with a soft brake.<br>
It should render as the class ”pn-type-common-book”.
</p>
<p>
This is a paragraph without any css class with a soft brake.<br>
It should render as the class ”pn-type-common-book”.
</p>
<p class="pn-type-small">Small</p>
<p class="pn-type-small-book">Small Book</p>
<p class="pn-type-tiny">Tiny</p>
<p class="pn-type-tiny-book">Tiny Book</p>
</div>
<div class="pn-box" style="display: flex">
<div class="pn-elevation-01"
style="width:150px;
height:50px;
background: #fff;
border: 1px solid #ddd;
padding: 16px;
margin-right: 24px;">
pn-elevation-01
</div>
<div class="pn-elevation-02"
style="width:150px;
height:50px;
background: #fff;
border: 1px solid #ddd;
padding: 16px;
margin-right: 24px;">
pn-elevation-02
</div>
<div class="pn-elevation-03"
style="width:150px;
height:50px;
background: #fff;
border: 1px solid #ddd;
padding: 16px;
margin-right: 24px;">
pn-elevation-03
</div>
<div class="pn-elevation-04"
style="width:150px;
height:50px;
background: #fff;
border: 1px solid #ddd;
padding: 16px;
margin-right: 24px;">
pn-elevation-04
</div>
<div class="pn-elevation-05"
style="width:150px;
height:50px;
background: #fff;
border: 1px solid #ddd;
padding: 16px;
margin-right: 24px;">
pn-elevation-05
</div>
</div>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>