Arches: Arches

Arches:Arches

Multi Product Brand Style System by the American College of Cardiology

Component

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

1.1 MicroSite

A MicroSite (Conversion Focused Sub-Section), exists within a the larger website, but offers a strategic approach for encompassing a semi-independent initiative of the organization, all while retaining a robust link to the main site. While it upholds most of the branding guidelines of the main site, a MicroSite has its unique design, acting as a concentrated unit for user context.

The creation of a MicroSite enables businesses to effectively spotlight specific campaigns or products with a distinctive touch, cater to particular audience segments, and maintain a uniform user experience. Despite living relatively independently from the main site's structure and supplementary content, it still provides fluid navigation and integration with the primary website.

This arrangement presents a flexible and specialized platform for delivering customized messaging, engaging users in a personalized way, and accomplishing specific objectives that may necessitate a unique online presence.

A Microsite Must

  • Have a user goal
  • Have a call to action for conversion.
  • Have a focused audience so the voice can be taylored to the action.

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

    1.1.1 Hero Image with CTA

    The "Hero Image with CTA" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.

    Component.MicroSite.Sub.HeroImage.BackgroundImage - Hero Background Image Component.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation Component.MicroSite.Sub.PageTitleTreatment - Page Title Treatment Component.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight
    Sub Components in Design:

      Example

      Default styling

      Hero Image

      Hero Statement Mision of the Page

      Call to Action Title (CTA). You Should be Engaged

      CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.

      NOTE:
      The Hero Image with CTA component is used to create impactful hero sections with a compelling call-to-action overlay. It combines a visually appealing hero image with a title, description, and call-to-action button. 
      <div grid-template="hero-image-cta" id="hero" class="font_3:lg font_2:md font_1">
    <div grid-area="background" class="col_all overflow_hidden row_all">
        <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
          <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
            media="(min-width: 1024px)" class="display_none">
          <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
            media="(min-width: 768px)" class="display_none">
          <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
            media="(min-width: 400px)" class="display_none">
          <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
            class="flex_100">
        </picture>    </div>
    <div grid-area="breadcrumb" class="z_1 flex flex_row justify_start">
        <nav data-item="hero-image-breadcrumb-nav" class="font-size_down-2 relative isolation_isolate p-y_3 p-x_4 c_white-8">
        	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
        	The Parent of This Micro Section of the Site</a>
        </nav>    </div>
    <div grid-area="title" class="relative font-size_up-2 m-y_6:lg m-y_5:md">
        <h1 data-item="hero-title"
          class="font-size_up-2 lh_1 m_0 c_white isolation_isolate relative">
          <span class="text">Hero</span>
          <span class="text">Statement</span>
          <span class="text">Mision</span>
          <span class="text">of </span>
          <span class="text">the</span>
          <span class="text">Page</span>
        </h1>    </div>
    <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
        <div data-item="cta-callout" class="z_1 font-size_0 c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
              <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
              <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
              <div class="grid justify_center items_center ">
                <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
              </div></div>    </div>
</div>
      Copy Code

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

      1.1.2 Micro Branding with CTA Button

      The "Hero Image with CTA" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.

      Component.MicroSite.Sub.HeroImage.BackgroundImage - Background Image Component.MicroSite.Sub.PageTitleTreatment - Page Title Component.MicroSite.Sub.HeroImage.CTAButton - CTA Button
      Sub Components in Design:

        Example

        Default styling

        Hero Image

        Hero Statement Mision of the Page

        NOTE:
        Micro Branding is used to create cohesive experiance by continuing the branding to children pages of a microiste. It combines a slice of hero image with just the single call-to-action button. 
        <div grid-template="hero-image-cta" template-option="micro" class="isolation_isolate overflow_hidden relative">
    <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
      <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
        media="(min-width: 1024px)" class="display_none">
      <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
        media="(min-width: 768px)" class="display_none">
      <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
        media="(min-width: 400px)" class="display_none">
      <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
        class="flex_100">
    </picture>  <div grid-area="title">
    <h1 data-item="hero-title"
      class="lh_3 m_0 m-y_3 m-y_0:lg c_white isolation_isolate relative">
      <span class="display_none:md"><a href="#RootPage" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-solid fa-arrow-left m-l_n3" aria-hidden="true"></i></a></span>
      <span class="text">Hero</span>
      <span class="text">Statement</span>
      <span class="text">Mision</span>
      <span class="text">of </span>
      <span class="text">the</span>
      <span class="text">Page</span>
    </h1>    </div>
    <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
      <div class="grid justify_center items_center ">
        <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
      </div>  </div>
</div>
        Copy Code

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

        1.1.3.1.1 Responsive Hero Image

        The Responsive Hero Image component is used to display a responsive hero image that adapts to different screen sizes. the sizes are 1200/300, 1024/256,600/300, & 320/300

        Example

        Default styling

        Hero Image
        NOTE:
        It utilizes the "Lorem Picsum" service for placeholder images. Replace all 4 images for best results. 
          <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
      media="(min-width: 1024px)" class="display_none">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
      media="(min-width: 768px)" class="display_none">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
      media="(min-width: 400px)" class="display_none">
    <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
      class="flex_100">
  </picture>
        Copy Code

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

        1.1.3.1.2 Hero Image Breadcrumb Nav

        The Hero Image Breadcrumb Nav is a sub-component used within the Hero Image with CTA component to display a breadcrumb navigation on top of the hero image.

        Example

        Default styling

        NOTE:
        The Hero Image Breadcrumb Nav sub-component is used to provide breadcrumb navigation on top of the hero image within the Hero Image with CTA component. It focuses on displaying the immediate parent only in the breadcrumb trail. 
        <nav data-item="hero-image-breadcrumb-nav" class=" relative isolation_isolate p-y_3 p-x_4 c_white-8">
	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
	The Parent of This Micro Section of the Site</a>
</nav>
        Copy Code

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

        1.1.3.1.3 CTA Button

        The CTA Button is just a centered button for the highlighted call-to-action.

        Example

        Default styling

        NOTE:
        The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background. 
        <div class="grid justify_center items_center ">
  <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
</div>
        Copy Code

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

        1.1.3.1.4 CTA Highlight

        The CTA Highlight component is used to create a highlighted call-to-action section.

        Example s

        Modifier: inverted

        This modifier class is used to create an inverted version of the CTA Highlight component, which can be applied when a dark background is present.

        Call to Action Title (CTA). You Should be Engaged

        CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.

        NOTE:
        The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background. 
        <div data-item="cta-callout" class="[modifier class] c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
      <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
      <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
      <div class="grid justify_center items_center ">
        <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
      </div></div>
        Copy Code

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

        1.1.3.2 Page Title Treatment

        MicroSite Page Title Treatment component is used to style and emphasize page titles.

        Example s

        Modifier: font-color

        This modifier class is used to customize the font color of the page title.

        Hero Statement Mision of the Page

        NOTE:
        The Page Title Treatment component is ideal for styling and emphasizing page titles. The "font-color" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience. 
        <h1 data-item="hero-title"
  class="[modifier class] c_white isolation_isolate relative">
  <span class="text">Hero</span>
  <span class="text">Statement</span>
  <span class="text">Mision</span>
  <span class="text">of </span>
  <span class="text">the</span>
  <span class="text">Page</span>
</h1>
        Copy Code

        Example

        Default styling

        Hero Statement Mision of the Page

        NOTE:
        The Page Title Treatment component is ideal for styling and emphasizing page titles. The "font-color" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience. 
        <h1 data-item="hero-title"
  class=" c_white isolation_isolate relative">
  <span class="display_none:md"><a href="#RootPage" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-solid fa-arrow-left m-l_n3" aria-hidden="true"></i></a></span>
  <span class="text">Hero</span>
  <span class="text">Statement</span>
  <span class="text">Mision</span>
  <span class="text">of </span>
  <span class="text">the</span>
  <span class="text">Page</span>
</h1>
        Copy Code

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

        1.1.4 Page Break with Headline

        This component represents a page break with a headline. It can be used to visually separate sections of a page or document. These Page Breaks are semanticaly an h2 with decorations. This shouldn't be used with other levels of Headlines.

        Markup Example:

        Users are the Center of it All

        NOTE:
        These are styled heavier then a normal h2 and there are for eaiser understanding that this is a sperator of major content areas.

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

        1.2 Responsive Table with Mobile Card Layout

        This component represents a responsive table that transforms each row into a card layout on mobile devices. It provides an optimized display for smaller screens, enhancing readability and usability.

        Example

        Default styling

        Fuit Vegitable Meat
        Data 1-1 Data 1-2 Data 1-3
        Data 2-1 Data 2-2 Data 2-3 
        <div class="responsive-table">
    <table class="table table-striped">
        <thead >
            <tr class="display_none table-row:md">
                <th class="">Fuit</th>
                <th class="">Vegitable</th>
                <th class="">Meat</th>
            </tr>
        </thead>
    <tbody class="table-body table-row-group:md flex flex_column">
        <tr class="table-row:md flex flex_column">
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Fruit">Data 1-1</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Vegitable">Data 1-2</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Meat">Data 1-3</td>
        </tr>
        <tr class="table-row:md flex flex_column">
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto"  data-label="Fruit">Data 2-1</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Vegitable">Data 2-2</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Meat">Data 2-3</td>
        </tr>
    </tbody>
</table>
    <!-- More table rows -->
</div>
        Copy Code

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

        1.3 Wizard Progress with Chevrons

        This component represents a wizard Progress with chevrons. It is commonly used in multi-step processes or wizards to guide users through sequential steps. By utilizing this wizard Progress component, you can guide users through different steps or stages of a process while providing visual cues using icons and step labels.

        Example

        Default styling

        <ol class="bg_white br_1 br_black-4 br_solid c_black flex flex_row font-size_down-1 font_bold font_display items_center lh_0 p_0 shadow_overlap-light ul_none user-select_none w_auto wizard-nav_w-chevrons">
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle active">
        <i class="fas fa-sign-in-alt inline"></i>
        <span class="Login">Login</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Eligibility Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Progress Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login m-r_3">CMP Status</span>
    </li>
</ol>
        Copy Code

        Example

        Default styling

        This component represents a variation of the wizard navigation with chevrons that includes an active step and completed steps. It is commonly used to indicate the progress and current status within a multi-step process or wizard. 
        This component represents a variation of the wizard navigation with chevrons that includes an active step and completed steps. It is commonly used to indicate the progress and current status within a multi-step process or wizard.
<ol class="bg_white br_1 br_black-4 br_solid c_black flex flex_row font-size_down-1 font_bold font_display items_center lh_0 p_0 shadow_overlap-light ul_none user-select_none w_auto wizard-nav_w-chevrons">
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle completed">
        <i class="fas fa-check inline"></i>
        <span class="Login">Login</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle active">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Eligibility Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Progress Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login m-r_3">CMP Status</span>
    </li>
</ol>
        Copy Code