Block variations are easy-to-use preset styles that can be applied to any content block. You can do this through the admin by navigating to the particle and/or block's settings in the Layout Manager, selecting the Block tab, and selecting them within the Variations field.

Szczegóły

Opublikowano: 02 listopad 2017

Utworzono: 02 listopad 2017

Poprawiono: 02 listopad 2017

Helium comes with a robust set of typography options that you can use to bring your content to life. In this page, we will list and give examples of the many typography options you can use.

Variations

Variations are classes that can be applied inline, as well as put to use in some particles through **Variations** or applied directly to content as CSS classes.

Buttons

Buttons have a number of great variations to choose from. You should note that in the HTML breakdown we have added a button class in addition to the variation, which is a requirement for these particular variations to work. You can also combine these variations.

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 2

<a href="#" class="button button-2">Button 2</a>

Button Outline

<a href="#" class="button button-outline">Button Outline</a>

Button Gradient

<a href="#" class="button button-gradient">Button Gradient</a>

Button Block

<a href="#" class="button button-block">Button Block</a>

Button XLarge

<a href="#" class="button button-xlarge">Button XLarge</a>

Button Large

<a href="#" class="button button-large">Button Large</a>

Button Small

<a href="#" class="button button-small">Button Small</a>

Button XSmall

<a href="#" class="button button-xsmall">Button XSmall</a>

Headings

All HTML headings, <h1> through <h6> are available.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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

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>

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

<p>Sample text here…</p>

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

Tables

<table class="table">…</table>

Szczegóły

Opublikowano: 02 listopad 2017

Utworzono: 02 listopad 2017

Poprawiono: 02 listopad 2017