blockquote
bubble
, avatar
, cite
, content
, footer
testimonial
, pull-left[top, bottom]
, pull-right[top, bottom]
Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Idemne, quod iucunde? Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Paria sunt igitur. Graece donan, Latine voluptatem vocant. Quod equidem non reprehendo; Scrupulum, inquam, abeunti; Sed virtutem ipsam inchoavit, nihil amplius. Similiter sensus, cum accessit ad naturam, tuetur illam quidem, sed etiam se tuetur;
<blockquote class="blockquote"> <p class="blockquote_content"> ... </p> </blockquote>
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-left"> <span class="blockquote_content"> ... </span> </q>
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>
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>
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>
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>
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>
Aenean lobortis ante nunc. Integer justo ex. Curabitur at enim ac nisi...
<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>
Suspendisse tempus sodales neque, eget eleifend turpis tristique eu. Nullam a nisl maximus, ultrices est ut blandit nislr, elit in lobortis mattis.
Brendon Mack - Theme Forest
<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>
The blockquotes can be customized using the following options:
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 ));
Aenean lobortis ante nunc. Integer justo ex. Curabitur at enim ac nisi...