Hero Banners & Micro Banner

  1. Title: Hero Banner & Micro Banner for Micro Branded Sections on ACC.org.
  2. User Story: As an editor I should be able to setup with minimal steps the data needed for the Hero Banner and Micro Banners without in-depth knowledge of HTML. This compent will be used within the CMS of Sitecore on ACC(dot)ORG.
  3. Background: The new launch of "Micro Site" (sections of the site that have a micro branding to bring together a concept with a smaller focused audience) a major design element of these pages is a Hero Banner with CTA and subsequent micro banners on sub pages. These components are a combination of a multi sourced <picture> tag and a combination of text elements. This results in a complicated peace of html that shouldn't be the responsibility of the editors but should be converted into a component to obscure some of the complexity.
  4. Summary of Requirements: These two component should defined once in the Parent Content folder and placed into the placeholder = masthead and should collect these data elements to render.
    • Data Include
      • picture (1200x300,1024x256,600x300,320x300) all should be either jpg of png.
      • Link to Acc.org Url and Label
      • Page "statement" text
      • CTA Header text
      • CTA Copy text
      • CTA Button Link and text
  5. Editor's Configuration: Included in the Summary
  6. Proposed URL or Page Location for Component: Multiple pages use this already
    1. https://www.acc.org/About-ACC/UX
    2. https://www.acc.org/membership/join-us
    3. https://www.acc.org/About-ACC/Innovation/Artificial-Intelligence#sort=%40commonsortdate%20descending
  7. Pattern/Prototype Documentation: URLs or attached design documents from sources like ARCHES or PaperCrane.
    1. https://assets.acc.org/Arches/Latest/docs/boot_acc/item-component-microsite-heroimagewithcta.html
    2. https://assets.acc.org/Arches/Latest/docs/boot_acc/item-component-microsite-microbrandingwithbuttton.html