Files

• _blockquotes.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/blockquotes

Module Overview

Examples

<blockquote class="blockquote">
    <p class="blockquote_content">
        ...
    </p>
</blockquote>

Pull Left

Aenean condimentum ut ex in ultricies. Duis scelerisque blandit odio at tempor. Integer id turpis pharetra, sodales ipsum nec, accumsan felis. Aenean sodales ultrices tempus. Quisque vitae feugiat eros. Etiam sed elit at elit ultricies faucibus. Integer erat ipsum, sollicitudin sed lacinia eget, scelerisque a magna. Suspendisse iaculis porta nisl, sed sodales eros sodales in. Suspendisse tempus urna vel justo volutpat tempus. Sed ultrices ipsum ut dolor mattis congue. Vivamus efficitur efficitur volutpat. Quisque odio lacus, varius nec erat sed, feugiat porttitor eros. Curabitur efficitur quis urna sit amet dapibus. Vestibulum congue ante ac venenatis lobortis. Pellentesque nulla tortor, sagittis non leo eleifend, lacinia bibendum nunc. Nunc nisl est, vulputate at condimentum ut, imperdiet et metus. Aenean condimentum ut ex in ultricies. Duis scelerisque blandit odio at tempor. Integer id turpis pharetra, sodales ipsum nec, accumsan felis. Aenean sodales ultrices tempus.

Note that for inline quotes the 'q' tag is used instead of 'blockquote', and for the content 'span' is used instead of 'p'.

<q class="blockquote-pull-left">
    <span class="blockquote_content">
        ...
    </span>
</q>

Pull Left - Top

Suspendisse iaculis porta nisl, sed sodales eros sodales in. Aenean condimentum ut ex in ultricies. Duis scelerisque blandit odio at tempor. Integer id turpis pharetra, sodales ipsum nec, accumsan felis. Aenean sodales ultrices tempus. Quisque vitae feugiat eros. Etiam sed elit at elit ultricies faucibus. Integer erat ipsum, sollicitudin sed lacinia eget, scelerisque a magna. Suspendisse tempus urna vel justo volutpat tempus. Sed ultrices ipsum ut dolor mattis congue. Vivamus efficitur efficitur volutpat. Quisque odio lacus, varius nec erat sed, feugiat porttitor eros. Curabitur efficitur quis urna sit amet dapibus. Vestibulum congue ante ac venenatis lobortis.

<q class="blockquote-pull-left-top">
    <span class="blockquote_content">
        ...
    </span>
</q>

Pull Left - Bottom

Aenean condimentum ut ex in ultricies. Duis scelerisque blandit odio at tempor. Integer id turpis pharetra, sodales ipsum nec, accumsan felis. Aenean sodales ultrices tempus. Quisque vitae feugiat eros. Etiam sed elit at elit ultricies faucibus. Integer erat ipsum, sollicitudin sed lacinia eget, scelerisque a magna. Suspendisse tempus urna vel justo volutpat tempus. Sed ultrices ipsum ut dolor mattis congue.Suspendisse iaculis porta nisl, sed sodales eros sodales in. Vivamus efficitur efficitur volutpat. Quisque odio lacus, varius nec erat sed, feugiat porttitor eros. Curabitur efficitur quis urna sit amet dapibus. Vestibulum congue ante ac venenatis lobortis.

<q class="blockquote-pull-left-bottom">
    <span class="blockquote_content">
        ...
    </span>
</q>

Pull Right

Aenean condimentum ut ex in ultricies. Duis scelerisque blandit odio at tempor. Integer id turpis pharetra, sodales ipsum nec, accumsan felis. Aenean sodales ultrices tempus. Quisque vitae feugiat eros. Etiam sed elit at elit ultricies faucibus. Integer erat ipsum, sollicitudin sed lacinia eget, scelerisque a magna. Suspendisse iaculis porta nisl, sed sodales eros sodales in. Suspendisse tempus urna vel justo volutpat tempus. Sed ultrices ipsum ut dolor mattis congue. Vivamus efficitur efficitur volutpat. Quisque odio lacus, varius nec erat sed, feugiat porttitor eros. Curabitur efficitur quis urna sit amet dapibus. Vestibulum congue ante ac venenatis lobortis. Pellentesque nulla tortor, sagittis non leo eleifend, lacinia bibendum nunc. Nunc nisl est, vulputate at condimentum ut, imperdiet et metus. Aenean condimentum ut ex in ultricies. Duis scelerisque blandit odio at tempor. Integer id turpis pharetra, sodales ipsum nec, accumsan felis. Aenean sodales ultrices tempus.

<q class="blockquote-pull-right">
    <span class="blockquote_content">
        ...
    </span>
</q>

Pull Right - Top

Suspendisse iaculis porta nisl, sed sodales eros sodales in. Aenean condimentum ut ex in ultricies. Duis scelerisque blandit odio at tempor. Integer id turpis pharetra, sodales ipsum nec, accumsan felis. Aenean sodales ultrices tempus. Quisque vitae feugiat eros. Etiam sed elit at elit ultricies faucibus. Integer erat ipsum, sollicitudin sed lacinia eget, scelerisque a magna. Suspendisse tempus urna vel justo volutpat tempus. Sed ultrices ipsum ut dolor mattis congue. Vivamus efficitur efficitur volutpat. Quisque odio lacus, varius nec erat sed, feugiat porttitor eros. Curabitur efficitur quis urna sit amet dapibus. Vestibulum congue ante ac venenatis lobortis.

<q class="blockquote-pull-right-top">
    <span class="blockquote_content">
        ...
    </span>
</q>

Pull Right - Bottom

Aenean condimentum ut ex in ultricies. Duis scelerisque blandit odio at tempor. Integer id turpis pharetra, sodales ipsum nec, accumsan felis. Aenean sodales ultrices tempus. Quisque vitae feugiat eros. Etiam sed elit at elit ultricies faucibus. Integer erat ipsum, sollicitudin sed lacinia eget, scelerisque a magna. Suspendisse tempus urna vel justo volutpat tempus. Sed ultrices ipsum ut dolor mattis congue.Suspendisse iaculis porta nisl, sed sodales eros sodales in. Vivamus efficitur efficitur volutpat. Quisque odio lacus, varius nec erat sed, feugiat porttitor eros. Curabitur efficitur quis urna sit amet dapibus. Vestibulum congue ante ac venenatis lobortis.

<q class="blockquote-pull-right-bottom">
    <span class="blockquote_content">
        ...
    </span>
</q>

Testimonial

<blockquote class="blockquote-testimonial">
    <div class="blockquote_bubble">
        <div class="blockquote_content">
            Aenean lobortis ante nunc. Integer justo ex. Curabitur at enim ac nisi...
        </div>
    </div>
    <footer class="blockquote_footer">
        <a class="blockquote_avatar-small" href="../../../team">
            <img src="../../../assets/images/team/team-2.jpg" alt="">
        </a>
        <div class="blockquote_cite heading_group">
            <h4 class="heading-size-2 font-2">John Dough</h4>
            <h5 class="heading-light-brand-1-size-2">Theme Forest</h5>
        </div>
    </footer>
</blockquote>

Testimonial - Alternative

<blockquote class="blockquote">
    <a class="blockquote_avatar-large" href="../../../team">
        <img src="../../../assets/images/team/team-2.jpg" alt="#">
    </a>
    <div class="blockquote_content">
        <p>Aenean lobortis ante nunc. Integer justo ex. Curabitur at enim ac nisi...</p>
    </div>
    <div class="blockquote_cite">
        <h4 class="heading-highlight-light"><b>Brendon Mack - Theme Forest</b></h4>
    </div>
</blockquote>

Customizing

The blockquotes can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
font	typography('typefaces', 'secondary')	The font-family for blockquotes.
icon-size	1.75rem	The size of the open/close quote icons.
pull-width	340px	The default width for pull-quotes.
pull-max-width	50%	The max-width for pull-quotes.
pull-font-style	italic	The font style for pull-quotes.
pull-margin	1em	The outer spacing for pull quotes.
bubble-padding	1em 3em	The padding for blockquote bubbles.
bubble-bg-color	color('brand', 'primary')	The background color for blockquote bubbles.
bubble-radius	0.6em	The border radius for blockquote bubbles.
bubble-color	white	The text color for blockquote bubbles.
testimonial-icon-size	1.5em	The size forthe testimonial open/close quote icons.

To change one of the above values, pass your new value(s) to the blockquotes() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include blockquotes((
    'font'            : 'Times New Roman',
    'bubble-bg-color' : #0bb2ef,
    'bubble-radius'   : 0
));