Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology
NOTE:
This has only one content row, headline is moved down into the rest of the content area. 
<article class="br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui">
    <div class="flex flex_row:md flex_column gap-x_4">
        <div class="flex flex_column flex_row:md gap-x_4 w_100">
            <div class="article-content flex-grow_1">
                <span class="journal-title c_accent-2 font_bold uppercase wrap block:md font_n1">Guidelines</span>
                <h2 class="article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2">Atrial Fibrillation: Guideline For the Management of Patients</h2>
                <div class="meta m-t_2:md m-l_0 m-b_3 m-b_0:md font_bold">
                    <span class="c_black-7 m-r_3">Mar 28, 2014</span>
                </div>
                <div>
                    <ul class="additional-details list-unstyled font_n1">
                        <li><span class="font_bold">Focused Update:</span> Jan 28, 2019 <a class="link c_primary h:c_primary-n2" href="/" target="_blank">(Open Update)</a></li>
                    </ul>
                </div>
            </div>
            <div class="article-tools flex flex_nowrap:lg flex_wrap m-l_0 m-l_4:md m-y_2 self_start:md self_stretch text_center">
                <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                    <i class="fas fa-book-open font_5 font_9:lg m-b_2:md"></i>
                    <span class="text block lh_2">JACC</span>
                </a>
                <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                    <i class="fas fa-file-pdf font_5 font_9:lg m-b_2:md"></i>
                    <span class="text block lh_2">PDF</span>
                </a>
                <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                    <i class="fab fa-hubspot font_5 font_9:lg m-b_2:md"></i>
                    <span class="text block lh_2">Hub</span>
                </a>
                <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                    <i class="fas fa-search alt font_5 font_9:lg m-b_2:md"></i>
                    <span class="text block lh_2 max-w_10:md">Search within Guidelines</span>
                </a>
            </div>
        </div>
    </div>
</article>
Copy Code