Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Component

Source: dist/css/acc_boot.css, line 15564

4.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/acc_boot.css, line 15575

    4.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/acc_boot.css, line 15614

      4.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/acc_boot.css, line 15771

        4.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/acc_boot.css, line 15693

        4.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/acc_boot.css, line 15672

        4.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/acc_boot.css, line 15647

        4.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/acc_boot.css, line 15714

        4.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/acc_boot.css, line 15800

        4.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.