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

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Jhon Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Jhon Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Jhon Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Jhon Doe

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Jhon Doe