Blockquote

Blockquote could be use with blockquote element or .ms-blockquote class.

For more informations on the icons used, consult the dedicated page.

Basic usage​​

Live Editor

<div> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </blockquote> <div class="ms-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> </div>

<div>
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </blockquote>

    <div class="ms-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</div>

Result

Loading...

You can also change the color of the quote.

Live Editor

<div> <blockquote class="ms-primary"> <p><i class="fa-solid fa-triangle-exclamation"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <i>Jhon Doe</i> </blockquote> <blockquote class="ms-secondary"> <p><i class="fa-solid fa-triangle-exclamation"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <i>Jhon Doe</i> </blockquote> <blockquote class="ms-action"> <p><i class="fa-solid fa-triangle-exclamation"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <i>Jhon Doe</i> </blockquote> <blockquote class="ms-action2"> <p><i class="fa-solid fa-triangle-exclamation"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <i>Jhon Doe</i> </blockquote> </div>

<div>
    <blockquote class="ms-primary">
        <p><i class="fa-solid fa-triangle-exclamation"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <i>Jhon Doe</i>
    </blockquote>

    <blockquote class="ms-secondary">
        <p><i class="fa-solid fa-triangle-exclamation"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <i>Jhon Doe</i>
    </blockquote>
    
    <blockquote class="ms-action">
        <p><i class="fa-solid fa-triangle-exclamation"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <i>Jhon Doe</i>
    </blockquote>

    <blockquote class="ms-action2">
        <p><i class="fa-solid fa-triangle-exclamation"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <i>Jhon Doe</i>
    </blockquote>
</div>

Result

Loading...

Shadow

Finally, it is also possible to add a shadow with the helper class .ms-box-shadow.

Live Editor

<div> <blockquote class="ms-primary ms-box-shadow"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <i>Jhon Doe</i> </blockquote> </div>

<div>
    <blockquote class="ms-primary ms-box-shadow">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <i>Jhon Doe</i>
    </blockquote>
</div>

Result

Loading...