One-Nexus

The documentation pages are still being written, please bear with us.

Quick Look

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus, purus a varius mattis, ligula dui imperdiet nisi, quis tincidunt sem tortor nec diam. Suspendisse id nunc pharetra, pulvinar nisl id, maximus nisl.

<blockquote class="blockquote-icon">
    ...
</blockquote>

Sass

Load the alert bar styles by including the blockquotes() mixin:

@include blockquotes();

The following options can be passed to the mixin to customize the alert bars:

Option	Description	Default
`name`	The name used when generating the CSS selector	`'blockquote'`
`font-family`	The font-family for blockquotes to use	`Georgia`
`quotes`	Content values for quotes to act as a decorative icon	`'\201C''\201D''\2018''\2019'`
`icon[size]`	The size of the quote icon	`4rem`
`icon[padding]`	The left/right spacing for the quote icon to fit	`2.5em`
`icon[font-family]`	The font-family for the quote icon	`inherit`
`icon[left]`	Set the enablement and position (top/bottom) of the left icon	`(true, top)`
`icon[right]`	Set the enablement and position (top/bottom) of the right icon	`(false, bottom)`
`pull[width]`	Default width for pull-quotes	`340px`
`pull[max-width]`	The max-width for pull-quotes	`50%`
`pull[margin]`	The margin for pull-quotes	`1em`

The above options can be passed to the mixin like so:

@include blockquotes((
    'quotes': '\f10d''\f10e''\f053''\f054',
    'icon':(
        'font-family': FontAwesome,
        'size': 2em,
        'height': 1em,
        'left': (true, top),
        'right': (true, bottom)
    )
));

The above example produces the following blockquote (with the icon modifier assumed):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus, purus a varius mattis, ligula dui imperdiet nisi, quis tincidunt sem tortor nec diam. Suspendisse id nunc pharetra, pulvinar nisl id, maximus nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor elit, porta ut orci eget, suscipit dictum mauris. Etiam volutpat, quam vitae iaculis hendrerit, lectus leo consequat tellus, ut pretium nunc ante eget urna. Vivamus at lobortis dolor. Nam ligula eros, luctus vitae semper ut, mollis quis nunc.Maecenas id finibus diam. Mauris ut accumsan sapien. Aliquam fringilla justo orci, dapibus consequat quam commodo vitae. Cras sit amet nisi velit. Nullam eleifend erat nunc, non congue urna aliquam ac. Aenean ac lectus lacus. Integer sit amet est sed purus fermentum consequat. Integer consectetur nibh arcu, vel sodales ex imperdiet eu. Nulla fermentum, justo eu iaculis consectetur, turpis risus sagittis metus, in placerat nibh ante cursus augue. Nunc luctus facilisis molestie. Sed quis porttitor mauris. Sed in quam eu mauris ultricies scelerisque vel vitae lacus. Praesent eu vehicula orci.

The above example uses FontAwesome icons for the quotes using their content values

Examples

Pull-Quote (left)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor elit, porta ut orci eget, suscipit dictum mauris. Etiam volutpat, quam vitae iaculis hendrerit, lectus leo consequat tellus, ut pretium nunc ante eget urna. Vivamus at lobortis dolor. Maecenas id finibus diam. Mauris ut accumsan sapien. Aliquam fringilla justo orci, dapibus consequat quam commodo vitae. Nam ligula eros, luctus vitae semper ut, mollis quis nunc. Cras sit amet nisi velit. Nullam eleifend erat nunc, non congue urna aliquam ac. Aenean ac lectus lacus. Integer sit amet est sed purus fermentum consequat. Integer consectetur nibh arcu, vel sodales ex imperdiet eu. Nulla fermentum, justo eu iaculis consectetur, turpis risus sagittis metus, in placerat nibh ante cursus augue. Nunc luctus facilisis molestie. Sed quis porttitor mauris. Sed in quam eu mauris ultricies scelerisque vel vitae lacus. Praesent eu vehicula orci.

<p>...<span class="blockquote-pull-left">Nam ligula eros, luctus vitae semper ut, mollis quis nunc.</span>...</p>

Pull-Quote (right)

<p>...<span class="blockquote-pull-right">Nam ligula eros, luctus vitae semper ut, mollis quis nunc.</span>...</p>

Callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor elit, porta ut orci eget, suscipit dictum mauris.

<blockquote class="blockquote-callout">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor elit, porta ut orci eget, suscipit dictum mauris.
</blockquote>