gaf-mobile/pattern-library/components/cards/Card-with-ContentToggle.html

GAF mobile Web site

<section class="Card {{modifier_class}}">
    <header class="Card-header">
        <h2 class="Card-title">Card Title</h2>
    </header>
    <div class="Card-bodySection">
        <p class="Card-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam incidunt explicabo magnam aperiam debitis consectetur ea illo ex deleniti sequi animi, voluptatem non recusandae ducimus dolores rem, quidem porro, ullam voluptates ipsam odio, earum perspiciatis suscipit. Fugit, quidem, aut. Voluptates ad, rem, sint veniam libero reiciendis modi tenetur maxime temporibus!</p>
    </div>
    <footer class="Card-footer">
        <a class="ContentToggle">
            <span class="ContentToggle-inner">
                <span class="ContentToggle-text">Read More</span>
                <span class="ContentToggle-icon">
                    <fl-svg src="/images/icons/0d6083b2.flicon-arrow-down-circled.svg">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-283 95.762 44.238 44.238" class="flicon-arrow-down-circled"><path d="M-260.88 140c-12.198 0-22.12-9.923-22.12-22.12s9.922-22.117 22.12-22.117c12.196 0 22.118 9.922 22.118 22.118s-9.924 22.12-22.12 22.12zm0-42.737c-11.37 0-20.62 9.25-20.62 20.618 0 11.37 9.25 20.62 20.62 20.62 11.368 0 20.618-9.25 20.618-20.62 0-11.368-9.25-20.617-20.62-20.617z"></path><path d="M-268.862 114.368c.292-.292.768-.292 1.06 0l6.806 6.798 6.803-6.798c.293-.293.768-.293 1.06 0 .294.293.294.768 0 1.06l-7.332 7.33c-.293.29-.768.29-1.06 0l-7.335-7.33c-.148-.145-.22-.337-.22-.53 0-.19.072-.383.218-.53z"></path>
                        </svg>
                    </fl-svg>
                </span>
            </span>
        </a>
    </footer>
</section>