Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Example

Default styling

LogoIpsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?

  • Ut reiciendis et possimus rerum animi.
  • Reprehenderit quia et eaque cupiditate illo explicabo architecto.
  • Et cumque distinctio maxime maiores aut labore ut est esse.

Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.

  • Contact:
  • Carlton Dooley
  • Address:
  • 3115 Clair Street
  • Killeen, TX 76543

LogoIpsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?

  • Contact:
  • Carlton Dooley
  • Address:
  • 3115 Clair Street
  • Killeen, TX 76543

LogoIpsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?

Quia cum enim voluptates quas qui assumenda omnis qui. Modi ducimus totam amet et vel aut eveniet. Perferendis temporibus distinctio eos labore quaerat eius rerum. Ipsam qui et eveniet quo necessitatibus.

  • Contact:
  • Carlton Dooley
  • Address:
  • 3115 Clair Street
  • Killeen, TX 76543 
<section class=" grid columns_3:lg columns_2:md columns_1 gap_4 gap_5:lg p-b_5">
    <div class="shadow_bevel-light p_4 bg_white br_radius br_solid br_black-2 br_1 flex flex_column gap-y_4">
        <header class="flex justify_center relative aspect_16x9 w_100 m-x_auto max-w_20">
            <img  class="absolute t_0 r_0 l_0 b_0" style="object-fit: contain;height: 100%;width: 100%;" src="https://cdn.jsdelivr.net/gh/ACC-Style/Arches/dist/img/LoremIpsum.png"/>    </header>
        <div class="readable-typography">
            <h2>
            LogoIpsum        </h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>
            <ul>
                <li>Ut reiciendis et possimus rerum animi.</li>
            <li>Reprehenderit quia et eaque cupiditate illo explicabo architecto.</li>
            <li>Et cumque distinctio maxime maiores aut labore ut est esse.</li>
            </ul>
            <p>Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.</p>    </div>
        <div class="m-t_auto"><address>
        <!-- http://microformats.org/wiki/hcard -->
        <div class="font_ui font_0">
            <ul class="ul_none  lh_2">
                <li><strong class="">Contact:</strong></li>
                <li class="">
                    <span class="contact-person">Carlton Dooley</span>
                </li>
                <li><strong class="">Address:</strong></li>
                <li class="">
                    <span class="street-address">3115 Clair Street</span>
                </li>
                <li cclass="locality">
                    <span class="city-name">Killeen</span>,
                    <span class="state-name">
                        <abbr title="Texas">TX</abbr>
                    </span>
                    <span class="postal-code">76543</span>
                </li>
            </ul>
            <ul class="ul_none lh_2">
                <li class="">
                <strong class="p-r_2 inline block:md inline:lg undecorated">Email:</strong>
                    <a href="mailto:MemberCare@acc.org" class="email block:md inline:lg link">
                        <span class="">MemberCare@acc.org</span></a>
                </li>
                <li class="">
                <strong class="p-r_2 block:md inline:lg">Phone:</strong>
                    <a tel="+1254-690-2946" href="tel:+1254-690-2946" class="tel block:md inline:lg link">
                        <span class=" ">(254) 690-2946</span>
                        </a>
                </li>
            </ul>
        </div>
    </address></div>
        <footer class="br-t_1 br_dashed grid justify_center p-t_4 self_stretch"><a class="website btn btn-secondary c_white h:c_white-8 self_center" target="_blank"  href="http://wwww.LogoIpsum.com">More</a></footer>
    </div><div class="shadow_bevel-light p_4 bg_white br_radius br_solid br_black-2 br_1 flex flex_column gap-y_4">
    <header class="flex justify_center relative aspect_16x9 w_100 m-x_auto max-w_20">
    <img class="absolute t_0 r_0 l_0 b_0" style="object-fit: contain;height: 100%;width: 100%;" src="https://cdn.jsdelivr.net/gh/ACC-Style/Arches/dist/img/LoremIpsum3.png">
    </header>
    <div class="readable-typography">
    <h2>
    LogoIpsum    </h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>
    </div>
    <div class="m-t_auto"><address>
    <!-- http://microformats.org/wiki/hcard -->
    <div class="font_ui font_0">
        <ul class="ul_none  lh_2">
            <li><strong class="">Contact:</strong></li>
            <li class="">
                <span class="contact-person">Carlton Dooley</span>
            </li>
            <li><strong class="">Address:</strong></li>
            <li class="">
                <span class="street-address">3115 Clair Street</span>
            </li>
            <li cclass="locality">
                <span class="city-name">Killeen</span>,
                <span class="state-name">
                    <abbr title="Texas">TX</abbr>
                </span>
                <span class="postal-code">76543</span>
            </li>
        </ul>
        <ul class="ul_none lh_2">
            <li class="">
            <strong class="p-r_2 inline block:md inline:lg undecorated">Email:</strong>
                <a href="mailto:MemberCare@acc.org" class="email block:md inline:lg link">
                    <span class="">MemberCare@acc.org</span></a>
            </li>
            <li class="">
            <strong class="p-r_2 block:md inline:lg">Phone:</strong>
                <a tel="+1254-690-2946" href="tel:+1254-690-2946" class="tel block:md inline:lg link">
                    <span class=" ">(254) 690-2946</span>
                    </a>
            </li>
        </ul>
    </div>
</address></div>
    <footer class="br-t_1 br_dashed grid justify_center p-t_4 self_stretch"><a class="website btn btn-secondary c_white h:c_white-8 self_center" target="_blank"  href="http://wwww.LogoIpsum.com">More</a></footer>
</div>
<div class="shadow_bevel-light p_4 bg_white br_radius br_solid br_black-2 br_1 flex flex_column gap-y_4">
    <header class="flex justify_center relative aspect_16x9 w_100 m-x_auto max-w_20">
    <img class="absolute t_0 r_0 l_0 b_0" style="object-fit: contain;height: 100%;width: 100%;" src="https://cdn.jsdelivr.net/gh/ACC-Style/Arches/dist/img/LoremIpsum2.png">
    </header>
    <div class="readable-typography">
    <h2>
    LogoIpsum    </h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>
    <p>Quia cum enim voluptates quas qui assumenda omnis qui. Modi ducimus totam amet et vel aut eveniet. Perferendis temporibus distinctio eos labore quaerat eius rerum. Ipsam qui et eveniet quo necessitatibus.</p>
    </div>
    <div class="m-t_auto"><address>
    <!-- http://microformats.org/wiki/hcard -->
    <div class="font_ui font_0">
        <ul class="ul_none  lh_2">
            <li><strong class="">Contact:</strong></li>
            <li class="">
                <span class="contact-person">Carlton Dooley</span>
            </li>
            <li><strong class="">Address:</strong></li>
            <li class="">
                <span class="street-address">3115 Clair Street</span>
            </li>
            <li cclass="locality">
                <span class="city-name">Killeen</span>,
                <span class="state-name">
                    <abbr title="Texas">TX</abbr>
                </span>
                <span class="postal-code">76543</span>
            </li>
        </ul>
        <ul class="ul_none lh_2">
            <li class="">
            <strong class="p-r_2 inline block:md inline:lg undecorated">Email:</strong>
                <a href="mailto:MemberCare@acc.org" class="email block:md inline:lg link">
                    <span class="">MemberCare@acc.org</span></a>
            </li>
            <li class="">
            <strong class="p-r_2 block:md inline:lg">Phone:</strong>
                <a tel="+1254-690-2946" href="tel:+1254-690-2946" class="tel block:md inline:lg link">
                    <span class=" ">(254) 690-2946</span>
                    </a>
            </li>
        </ul>
    </div>
</address></div>
    <footer class="br-t_1 br_dashed grid justify_center  p-t_4 self_stretch"><a class="website btn btn-secondary c_white h:c_white-8 self_center" target="_blank"  href="http://wwww.LogoIpsum.com">More</a></footer>
</div>
</section>
Copy Code