Get boba!
boba Version 1.7.2

Blockquotes

Give credit where credit is due by using blockquotes.

Tip

Use the footer tag with the blockquote-footer class to specify the source and wrap the name of the source material in a cite tag.

Example Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor lorem, scelerisque ut facilisis et, congue in nisl. Integer feugiat massa quis tempus lobortis. Suspendisse mattis ex quis tortor dignissim, quis semper nibh vehicula.

Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl. Morbi mollis eros dolor, eget convallis mauris condimentum varius. Duis dictum ipsum sit amet nunc vulputate, vitae porta sem ultricies.

Lorem Ipsum in their work Ipsum Lorem

Quisque eget efficitur quam, sit amet tempor erat. Cras auctor, velit a faucibus fringilla, nisi massa dictum quam, volutpat varius turpis leo nec turpis. Curabitur a velit et dui suscipit pellentesque. Etiam et mattis nulla.

Vivamus lorem enim, sollicitudin ut euismod id, efficitur mollis dolor. Donec ipsum tortor, molestie id viverra sit amet, suscipit vel nunc. Curabitur commodo lobortis erat.

<h3>Example Text</h3>

<p>...</p>

<blockquote>
    <p>
        Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl. Morbi mollis eros dolor, eget convallis mauris condimentum varius. Duis dictum ipsum sit amet nunc vulputate, vitae porta sem ultricies.
    </p>
    <footer class="blockquote-footer">Lorem Ipsum in their work <cite>Ipsum Lorem</cite></footer>
</blockquote>

<p>...</p>

<p>...</p>

Alignment

Use the .text-left, .text-center, and .text-right helper classes to easily align the text within your blockquote.

Left-Aligned

Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl. Morbi mollis eros dolor, eget convallis mauris condimentum varius. Duis dictum ipsum sit amet nunc vulputate, vitae porta sem ultricies.

Left-Aligned Ipsum in Alignment

Center-Aligned

Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl. Morbi mollis eros dolor, eget convallis mauris condimentum varius. Duis dictum ipsum sit amet nunc vulputate, vitae porta sem ultricies.

Center-Aligned Ipsum in Alignment

Right-Aligned

Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl. Morbi mollis eros dolor, eget convallis mauris condimentum varius. Duis dictum ipsum sit amet nunc vulputate, vitae porta sem ultricies.

Right-Aligned Ipsum in Alignment
<-- Left-Aligned -->
<blockquote class="text-left">
    <p>
        Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl. Morbi mollis eros dolor, eget convallis mauris condimentum varius. Duis dictum ipsum sit amet nunc vulputate, vitae porta sem ultricies.
    </p>
    <footer class="blockquote-footer">Left-Aligned Ipsum in <cite>Alignment</cite></footer>
</blockquote>

<-- Center-Aligned -->
<blockquote class="text-center">
    <p>
        Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl. Morbi mollis eros dolor, eget convallis mauris condimentum varius. Duis dictum ipsum sit amet nunc vulputate, vitae porta sem ultricies.
    </p>
    <footer class="blockquote-footer">Center-Aligned Ipsum in <cite>Alignment</cite></footer>
</blockquote>

<-- Right-Aligned -->
<blockquote class="text-right">
    <p>
        Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl. Morbi mollis eros dolor, eget convallis mauris condimentum varius. Duis dictum ipsum sit amet nunc vulputate, vitae porta sem ultricies.
    </p>
    <footer class="blockquote-footer">Right-Aligned Ipsum in <cite>Alignment</cite></footer>
</blockquote>

Colors

Blockquotes come in all of boba's colors.

Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl.

Red Ipsum from boba's color palette

Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl.

Green Ipsum from boba's color palette

Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl.

Blue Ipsum from boba's color palette
<blockquote class="red">
    <p>
        Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl.
    </p>
    <footer class="blockquote-footer">Red Ipsum from <cite>boba's color palette</cite></footer>
</blockquote>

<blockquote class="green">
    <p>
        Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl.
    </p>
    <footer class="blockquote-footer">Green Ipsum from <cite>boba's color palette</cite></footer>
</blockquote>

<blockquote class="blue">
    <p>
        Etiam porttitor nunc eget varius pulvinar. Vivamus nisl risus, ornare et est in, rutrum egestas nisi. Cras vitae porta nisl.
    </p>
    <footer class="blockquote-footer">Blue Ipsum from <cite>boba's color palette</cite></footer>
</blockquote>