Typographie

Buttons

Default Button   Button Bevel   Button Square

<a href="#" class="button">Default Button</a>
<a href="#" class="button button-bevel">Button Bevel</a>
<a href="#" class="button button-square">Button Square</a>

Button 1   Button 2   Button Outline   Button Gradient

<a href="#" class="button button-1">Button 1</a>
<a href="#" class="button button-2">Button 2</a>
<a href="#" class="button button-outline">Button Outline</a>
<a href="#" class="button button-gradient">Button Gradient</a>

Button Block
Button XLarge   Button Large
Button Small   Button XSmall

<a href="#" class="button button-block">Button Block</a>
<a href="#" class="button button-xlarge">Button XLarge</a>
<a href="#" class="button button-large">Button Large</a>
<a href="#" class="button button-small">Button Small</a>
<a href="#" class="button button-xsmall">Button XSmall</a>

Color Buttons

button orange   button pink   button red   button purple   button green   button yellow   button blue   button lightblue   button darkblue   button white   button off-white   button black

<a href="#" class="button orange">button orange</a>
<a href="#" class="button pink">button pink</a>
<a href="#" class="button red">button red</a>
<a href="#" class="button purple">button purple</a>
<a href="#" class="button green">button green</a>
<a href="#" class="button yellow">button yellow</a>
<a href="#" class="button blue">button blue</a>
<a href="#" class="button lightblue">button lightblue</a>
<a href="#" class="button darkblue">button darkblue</a>
<a href="#" class="button white">button white</a>
<a href="#" class="button off-white">button off-white</a>
<a href="#" class="button black">button black</a>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1 class="heading">Heading 1</h1>
<h2 class="heading">Heading 2</h2>
<h3 class="heading">Heading 3</h3>
<h4 class="heading">Heading 4</h4>
<h5 class="heading">Heading 5</h5>
<h6 class="heading">Heading 6</h6>

Notice Styles

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-success">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-info">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-warning">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-error">…</p>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><small>Someone famous <cite title="Source Title">Source Title</cite></small></blockquote>

Code

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.

For example, <code><section></code> should be wrapped as inline.

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

 

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here…</p>
<pre>&lt;p&gt;Sample text here…&lt;/p&gt;</pre>

Tables

# First Name Last Name Username
1 John Doe JohnDoe
2 Jane Doe JaneDoe
3 Bob Doe BobDoe
<table class="table">…</table>

Der digital publishing report stellt Entscheidern der Medienbranche das Rüstzeug zur Verfügung, um den digitalen Wandel zu meistern: mit dem dpr-Magazin sowie E-Books und Webinaren. Gleichzeitig dient der digital publishing report als Vernetzungsplattform zu Dienstleistern, Startups und anderen Branchen. Im Kern steht der Austausch auf Augenhöhe.

Sie möchten die nächste Ausgabe des digital publishing report kostenlos erhalten? Dann einfach das Formular ausfüllen - fertig!