I2P brand styleguides for the web
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

73 lines
2.9 KiB

<div id="typography" class="page-header mb-4">
<h2>Typography</h2>
<p class="text-muted">Our main typography is Source Sans made by Adobe.</p>
</div>
<div class="row">
<div class="col-12 typography__headers">
<div class="typography__headers__item">
<p class="text-black small text-muted">H1</p>
<h1>Protect communications from monitoring</h1>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H2</p>
<h2>Protect communications from monitoring</h2>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H3</p>
<h3>Protect communications from monitoring</h3>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H4</p>
<h4>Protect communications from monitoring</h4>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H5</p>
<h5>Protect communications from monitoring</h5>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H6</p>
<h6>Protect communications from monitoring</h6>
</div>
<div class="typography__headers__item">
<p class="text-black small pt-5 text-muted">H1 display</p>
<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H2 display</p>
<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H3 display</p>
<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
</div>
<div class="typography__headers__item">
<p class="text-black small text-muted">H4 display</p>
<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
</div>
</div>
</div>
<div class="row pt-5">
<div class="col-md-5">
<p class="text-black small">
<span class="text-left color-gray-2 rb-isBold">Paragraph</span>
<span class="text-right color-primary rb-isBold" style="float: right;">Source Sans Regular</span>
</p>
<p>
I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.
</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<p class="text-black small">
<span class="text-left color-gray-2 rb-isBold">Code Snippet</span>
<span class="text-right color-primary rb-isBold" style="float: right;">Source Code</span>
</p>
<pre class="bg-light p-2 prettyprint rb-code" style="border: none;">
$('.rb-sidebar').on('click', 'a',function() {
$('.rb-sidebar a.active').removeClass('active');
$(this).addClass('active');
});
</pre>
</div>
</div>