Arches: Arches

Arches:Arches

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/bespoke_all.css, line 1562

2.2 Lava Header Pattern

The Lava Header is used on anchor or initiative landing pages, providing a bold visual entry point and organizing introductory content, key links, and featured callouts. It supports a large page title, optional short tagline, breadcrumb navigation, and content modules such as CTAs. It uses a branded "lava" color background and rounded layout elements for a distinct visual separation. Ideal for top-level site sections like About, Guidelines, or Publications.

Use when: a clear, branded introduction to an overarching initiative or section is needed. Avoid when: a smaller or secondary layout is more appropriate, such as article pages or sub-sections.

This pattern presents a flowing, visually distinctive section used for storytelling or high-impact messaging. Includes image, header, subtext, and optional CTA.

  • Use for Anchor Pages that are at the Secondary Level of ACC.org Structure (Education, Guidelines, About).
  • Do not overuse; reserved for distinct thematic emphasis.
Sub.Recipe.PriceTable.Bento.Card - Price Card
Sub Components in Design:

    Example

    Default styling

    About
    The ACC

    Transforming CV Care For All

    ACC President Christopher M. Kramer, MD, FACC

    ACC Welcomes New President Christopher M. Kramer, MD, FACC, Installs New Officers and Trustees

    The ACC welcomed its newest officers and members of the Board of Trustees to their new roles on March 31.

    Learn More

    The American College of Cardiology (ACC) envisions a world where science, knowledge and innovation optimize cardiovascular care and outcomes.

    We believe in the power of community. With more than 60,000 members worldwide spanning the entire cardiovascular team, we serve as the professional home for clinicians and researchers seeking the latest science, research and education. United with our members, chapters and global cardiovascular partners, we are focused on transforming cardiovascular care and improving heart health for all. 

    <div grid-template="hero-area" class="grid columns_5 rows_4 br_round relative m-b_5:lg m-b_4 isolation_isolate reading-typography font-size_up" style="--custom-font-size-up: 1.125;">
    <div grid-area="background" class=" hero-color-splash br_rounder relative z_0"></div>
    <div grid-area="breadcrumb" class="grid justify_start relative">
        <nav
            class="bg_white br-br_round grid  inline-block isolation_isolate items_center p-r_5:lg p-x_4 p-r_5  p-y_3 relative">
            <a href="https://www.acc.org/" class="h:c_acc h:underline font_bold c_acc expanded-click-area "><i
                    class="fas fa-chevron-left" aria-hidden="true"></i> <i class="fas fa-home"
                    aria-hidden="true"></i>
                    <span class="diplay_none:md">Home</span>
                    </a>
            <span class="curve"></span>
            <span class="curve alt"></span>
        </nav>
    </div>
    <div grid-area="title"
        class="colum_all row-start_1 row-end_3 color_inherit reading-typography color_inherit c_white z_1 font-size_up"
        style="--custom-font-size-up: 1.125;">
        <h1>About<br> The ACC</h1>
        <p class="opacity_7 font_light">Transforming CV Care For All</p>    </div>
    <div class="bg_white br-tl_rounder flex flex_column gap_4" grid-area="cta">
        <div class="reading-typography color_inherit c_white linear-gradient_custom p_4 p-y_5:lg br_round"
            style="--start-color:#0c152a; --end-color:#172d65; --orgin:to left top;  --custom-font-size-up: 1.06;">
            <h2 class="grid items_center justify_center p-x_5:lg p-x_4 m-b_2:md m-b_2">
                <img class="br_round inline-block m-auto m-x_auto max-w_10 max-w_15:md r_3 relative w_100" src="https://www.acc.org//-/media/Non-Clinical/Images/2023/03/03/2023-ACC-Leadership-Headshots/Kramer-Christopher-M-600x600.jpg" alt="ACC President Christopher M. Kramer, MD, FACC"></h2>
            <div class="p-x_4:lg p-x_3:md">
                <h3 class="opacity_9"><strong>ACC Welcomes New President Christopher M. Kramer, MD, FACC, Installs New Officers and Trustees</strong></h3>
                <p class="opacity_7">The ACC welcomed its newest officers and members of the Board of Trustees to their new roles on March 31.</p>
                <div class="grid items_center justify_center">
                    <a href="/About-ACC/Leadership/Officers-and-Trustees" class="btn bg_acc-5 h:bg_acc-3 c_acc h:c_acc-n3 item_center self_center inline-block">Learn More</a>
                </div>
            </div>        </div>
    </div>
    <div grid-area="introtext" class="reading-typography p-t_5 p-x_4:md" style="--custom-font-size-up: 1.09;">
        <p>The American College of Cardiology (ACC) envisions a world where science, knowledge and innovation optimize cardiovascular care and outcomes.</p>
        <p>We believe in the power of community. With more than 60,000 members worldwide spanning the entire cardiovascular team, we serve as the professional home for clinicians and researchers seeking the latest science, research and education. United with our members, chapters and global cardiovascular partners, we are focused on transforming cardiovascular care and improving heart health for all. </p>    </div>
    <span grid-area="CTA-curve-tr" class="curve row-end_n5 row-end_4:md col-end_n1 bg_white rotate_270 b_n1 r_n1"></span>
    <span grid-area="CTA-curve-bl" class="b_n1 bg_white col-end_4:md col-end_n4  curve r_n1 rotate_270 row-end_n2:md row-end_n3 "></span>
</div>
    Copy Code