Blockquote

Basics

The blockquote element allows you to create a block of text that is quoted from another source. It is a block-level element.

Copy
html
<ap-blockquote>
    <div slot="content">
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus
            quos minus eius quibusdam vel nihil saepe similique odio vitae
            corporis ab ullam, alias quasi dicta iusto possimus reiciendis
            voluptatum quaerat?
        </p>
    </div>
    <span slot="cite">John Doe</span>
    <span slot="title">CEO, Company</span>
</ap-blockquote>
Expand

Colors

You can also specify the accent and background colors for the blockquote. By default, the accent color is Anglepoint Red (#dc4746 as of 2024-09-10) while the background color is Anglepoint Navy (#002b49 as of 2024-09-10).

To specify the accent color, use a valid CSS Color Value on the color-accent attribute. You can do likewise for the background color, just on the color-background attribute.

Note: the text color is white by default. In the future, this may change dynamically based on the background color, but for now, if you choose a light background, be sure to choose a dark font, such as Anglepoint Navy, to provide sufficient contrast to your users and improve a11y.

Copy
html
<ap-blockquote color-accent="#ffb81c" color-background="#000000">
    <div slot="content">
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus
            quos minus eius quibusdam vel nihil saepe similique odio vitae
            corporis ab ullam, alias quasi dicta iusto possimus reiciendis
            voluptatum quaerat?
        </p>
    </div>
    <span slot="cite">John Doe</span>
    <span slot="title">CEO, Company</span>
</ap-blockquote>
Expand

Box Shadow

The box shadow/drop shadow will always be a 25% opaque Anglepoint Blue (#32657e) and is not configureable without some JavaScript gymnastics. This is by design. If you find it necessary to change it anyway, you'll need to access the shadow root of the custom element and then select the .bq-container class to set the appropriate style property. An example—

Copy
javascript
window.addEventListener("DOMContentLoaded", () => {
    const bq = document.querySelector("ap-blockquote");
    function changeShadow() {
        // Sometimes the shadow root isn't ready yet, so we need to wait a bit.
        if (!bq.shadowRoot) {
            setTimeout(changeShadow, 100);
            return;
        }
        bq.shadowRoot.querySelector(".bq-container").style.boxShadow =
            "0 0 10px 5px var(--green)";
    }
    if (bq.initialized) changeShadow();
    else window.addEventListener("ap-initialized", changeShadow);
});
Expand