{"version":3,"sources":["bespoke/_bespoke.wizard-nav.scss","bespoke_all.css","bespoke/_bespoke.responsive-table.scss","bespoke/_bespoke.pagelayout.scss","bespoke/_bespoke.microsite.scss","bespoke_all.scss","bespoke/_bespoke.bento.scss","","bespoke/_bespoke.cmp.table.scss"],"names":[],"mappings":"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","file":"../bespoke_all.min.css.gz","sourcesContent":["\n.wizard-nav_w-chevrons {\n --completed-color: var(--bs-grey-700,#b8b8b8);\n --active-color:var(--bs-accent,#16a385);\n text-decoration: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n isolation: isolate;\n position: relative;\n &:not(.disabled)::before{\n content:'';\n z-index: -1;\n display: block;\n position: absolute;\n left:0;\n top:0;\n bottom:0;\n padding-inline-start: 2em;\n background-color: var(--completed-color);\n\n }\n\n > * {\n position: relative;\n text-decoration: none;\n padding-inline-end: 1.5em;\n margin-block-end: -1px;\n isolation: isolate;\n opacity: .8;\n &:not(:first-child) {\n padding-inline-start: 1.5em;\n }\n\n &::before,\n &::after {\n display: block;\n position: absolute;\n z-index: -1;\n width: auto;\n height: 50.5%;\n left: 0;\n right: 0;\n content: '';\n border-inline-end-width: 1px;\n border-inline-end-style: solid;\n border-inline-end-color: inherit;\n background-color: transparent;\n &:first-child{\n left: -1em;\n \n }\n &:last-child{\n right: -1em;\n }\n }\n &:first-child{\n &::before,\n &::after { \n border-inline-start-width: 1px;\n border-inline-start-style: solid;\n border-inline-start-color: inherit;}\n }\n &::before {\n \n top: 0;\n transform: matrix(1, 0, 0.5, 1, 0, 0);\n border-bottom: none;\n }\n &::after {\n \n bottom: 0;\n transform: matrix(1, 0, -0.5, 1, 0, 0);\n border-top: none;\n }\n &.active{\n opacity: 1;\n color:white;\n &::before,\n &::after {background-color: var(--active-color);}\n }\n &.completed{\n opacity: 1;\n &::before,\n &::after { background-color: var(--completed-color);}\n }\n\n }\n}\n\n/*\nWizard Progress with Chevrons\n\nThis 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.\n\nMarkup:\n
    \n
  1. \n \n Login\n
    2. \n
  2. \n \n Eligibility Check\n
    3. \n
  3. \n \n Progress Check\n
    4. \n
  4. \n \n CMP Status\n
    5. \n
\n\nMarkupWrapperClasses:\np_4 bg_white flex flex_column gap_4\n\nWeight: 0\n\nStyleguide: Component.WizardNav\n*/\n/*\nCompleted Steps\n\nThis 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.\nMarkup:\n
    \n
  1. \n \n Login\n
    2. \n
  2. \n \n Eligibility Check\n
    3. \n
  3. \n \n Progress Check\n
    4. \n
  4. \n \n CMP Status\n
    5. \n
\n\n\nMarkupWrapperClasses:\np_4 bg_white flex flex_column gap_4\n\nWeight: 0\n\nStyleguide: Component.WizardNav.Completed\n*/\n\n/*\nDisabled\n\nThis component represents a disabled state variation of the wizard navigation with chevrons. The disabled state is applied to the \"Wizard Progress\" bar, indicating that it is currently disabled and not accessible.\n\nMarkup:\n
    \n
  1. \n \n Login\n
    2. \n
  2. \n \n Eligibility Check\n
    3. \n
  3. \n \n Progress Check\n
    4. \n
  4. \n \n CMP Status\n
    5. \n
\n\n\nMarkupWrapperClasses:\np_4 bg_white flex flex_column gap_4\n\nWeight: 0\n\nStyleguide: Component.Navigation.WizardNav.Disabled\n*/\n\n","@charset \"UTF-8\";\n/** Bespoke Build **/\n/** Build Comment: including file /setup/__preheader.scss **/\n/** SCSS DOC: _preheader.scss **/\n/** SCSS DOC: _helpers.scss **/\n/** SCSS DOC: _utility-css.vars.scss **/\n/** SCSS DOC: __var.output.scss **/\n/** This needs to run later then brand **/\n.wizard-nav_w-chevrons {\n --completed-color: var(--bs-grey-700,#b8b8b8);\n --active-color:var(--bs-accent,#16a385);\n text-decoration: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n isolation: isolate;\n position: relative;\n}\n.wizard-nav_w-chevrons:not(.disabled)::before {\n content: \"\";\n z-index: -1;\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n padding-inline-start: 2em;\n background-color: var(--completed-color);\n}\n.wizard-nav_w-chevrons > * {\n position: relative;\n text-decoration: none;\n padding-inline-end: 1.5em;\n margin-block-end: -1px;\n isolation: isolate;\n opacity: 0.8;\n}\n.wizard-nav_w-chevrons > *:not(:first-child) {\n padding-inline-start: 1.5em;\n}\n.wizard-nav_w-chevrons > *::before, .wizard-nav_w-chevrons > *::after {\n display: block;\n position: absolute;\n z-index: -1;\n width: auto;\n height: 50.5%;\n left: 0;\n right: 0;\n content: \"\";\n border-inline-end-width: 1px;\n border-inline-end-style: solid;\n border-inline-end-color: inherit;\n background-color: transparent;\n}\n.wizard-nav_w-chevrons > *::before:first-child, .wizard-nav_w-chevrons > *::after:first-child {\n left: -1em;\n}\n.wizard-nav_w-chevrons > *::before:last-child, .wizard-nav_w-chevrons > *::after:last-child {\n right: -1em;\n}\n.wizard-nav_w-chevrons > *:first-child::before, .wizard-nav_w-chevrons > *:first-child::after {\n border-inline-start-width: 1px;\n border-inline-start-style: solid;\n border-inline-start-color: inherit;\n}\n.wizard-nav_w-chevrons > *::before {\n top: 0;\n transform: matrix(1, 0, 0.5, 1, 0, 0);\n border-bottom: none;\n}\n.wizard-nav_w-chevrons > *::after {\n bottom: 0;\n transform: matrix(1, 0, -0.5, 1, 0, 0);\n border-top: none;\n}\n.wizard-nav_w-chevrons > *.active {\n opacity: 1;\n color: white;\n}\n.wizard-nav_w-chevrons > *.active::before, .wizard-nav_w-chevrons > *.active::after {\n background-color: var(--active-color);\n}\n.wizard-nav_w-chevrons > *.completed {\n opacity: 1;\n}\n.wizard-nav_w-chevrons > *.completed::before, .wizard-nav_w-chevrons > *.completed::after {\n background-color: var(--completed-color);\n}\n\n/*\nWizard Progress with Chevrons\n\nThis 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.\n\nMarkup:\n
    \n
  1. \n \n Login\n
    2. \n
  2. \n \n Eligibility Check\n
    3. \n
  3. \n \n Progress Check\n
    4. \n
  4. \n \n CMP Status\n
    5. \n
\n\nMarkupWrapperClasses:\np_4 bg_white flex flex_column gap_4\n\nWeight: 0\n\nStyleguide: Component.WizardNav\n*/\n/*\nCompleted Steps\n\nThis 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.\nMarkup:\n
    \n
  1. \n \n Login\n
    2. \n
  2. \n \n Eligibility Check\n
    3. \n
  3. \n \n Progress Check\n
    4. \n
  4. \n \n CMP Status\n
    5. \n
\n\n\nMarkupWrapperClasses:\np_4 bg_white flex flex_column gap_4\n\nWeight: 0\n\nStyleguide: Component.WizardNav.Completed\n*/\n/*\nDisabled\n\nThis component represents a disabled state variation of the wizard navigation with chevrons. The disabled state is applied to the \"Wizard Progress\" bar, indicating that it is currently disabled and not accessible.\n\nMarkup:\n
    \n
  1. \n \n Login\n
    2. \n
  2. \n \n Eligibility Check\n
    3. \n
  3. \n \n Progress Check\n
    4. \n
  4. \n \n CMP Status\n
    5. \n
\n\n\nMarkupWrapperClasses:\np_4 bg_white flex flex_column gap_4\n\nWeight: 0\n\nStyleguide: Component.Navigation.WizardNav.Disabled\n*/\n.responsive-table {\n container-type: inline-size;\n}\n\n[class^=data-label]::before {\n content: attr(data-label);\n --data-label-font-family: var(--font-family_accent, sans-serif);\n --data-label-weight: (--font_bold, 900);\n --data-label-color: currentColor;\n line-height: 1.125;\n margin-bottom: 0.25em;\n font-size: 0.75em;\n font-family: var(--data-label-font-family);\n font-weight: var(--data-label-weight);\n color: color-mix(in hsl, var(--data-label-color), white 50%);\n}\n\n.data-label-show::before {\n display: block;\n}\n\n.data-label-hide::before {\n opacity: 0.1;\n}\n\n@container (width > 768px) {\n .data-label-show\\:md::before {\n display: block;\n }\n .data-label-hide\\:md::before {\n display: none;\n }\n}\n@container (width > 1024px) {\n .data-label-show\\:lg::before {\n display: block;\n }\n .data-label-hide\\:lg::before {\n display: none;\n }\n}\n/*\nResponsive Table with Mobile Card Layout\n\nThis 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.\n\nMarkup:\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
FuitVegitableMeat
Data 1-1Data 1-2Data 1-3
Data 2-1Data 2-2Data 2-3
\n \n
\n\nMarkupWrapperClasses:table\n\n\nWeight: 0\n\n\nStyleguide: Component.ResponsiveTable\n*/\n:root {\n --page-padding: 0.5rem;\n --outer-content-padding: 0;\n --inner-content-padding: 0.5rem;\n --sidebar-width: 100%;\n --content-max-width: calc(100% - (var(--page-padding) * 2));\n --content-min-width: calc(100% - (var(--page-padding) * 2));\n}\n@media only screen and (width > 768px) {\n :root {\n --inner-content-padding: 1rem;\n --page-padding: 1rem;\n --outer-content-padding: 0;\n --sidebar-width: calc(300px + (var(--inner-content-padding) * 2));\n }\n}\n@media only screen and (width > 1024px) {\n :root {\n --outer-content-padding: 1rem;\n --sidebar-width: 300px;\n }\n}\n\n[grid-template=page-layout] {\n margin-bottom: var(--page-padding);\n row-gap: var(--page-padding);\n width: 100%;\n display: grid;\n grid-template-columns: [all-start fullscreen-start sidebar-secondary-start sidebar-primary-start] var(--page-padding) [content-start center-start] 1fr [content-end center-end] var(--page-padding) [fullscreen-end all-end sidebar-secondary-end sidebar-primary-end];\n grid-template-rows: [fullscreen-start all-start] var(--page-padding) [center-start content-start] auto [center-end content-end sidebar-secondary-start] auto [sidebar-secondary-end sidebar-primary-start] auto [sidebar-primary-end] var(--page-padding) [fullscreen-end all-end];\n}\n@media only screen and (width > 768px) {\n [grid-template=page-layout] {\n grid-template-columns: [fullscreen-start all-start sidebar-primary-start sidebar-secondary-start] var(--page-padding) [content-start] var(--sidebar-width) [sidebar-primary-end] var(--page-padding) [center-start] 1fr [center-end content-end] var(--page-padding) [fullscreen-end all-end sidebar-secondary-end];\n grid-template-rows: [all-start fullscreen-start content-start center-start sidebar-primary-start] auto [content-end sidebar-secondary-start center-end sidebar-primary-end] auto [sidebar-secondary-end fullscreen-end all-end];\n }\n}\n@media only screen and (width > 1024px) {\n [grid-template=page-layout] {\n grid-template-columns: [fullscreen-start all-start sidebar-primary-start] var(--page-padding) [content-start] var(--sidebar-width) [sidebar-primary-end] var(--page-padding) [center-start] 1fr [center-end] var(--page-padding) [sidebar-secondary-start] var(--sidebar-width) [content-end] var(--page-padding) [fullscreen-end all-end sidebar-secondary-end];\n grid-template-rows: [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];\n }\n}\n@media only screen and (width > 768px) {\n [grid-template=page-layout][template-option=reverse] {\n grid-template-columns: [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) [content-start center-start] 1fr [center-end] var(--page-padding) [sidebar-primary-start] var(--sidebar-width) [content-end] var(--page-padding) [fullscreen-end all-end sidebar-primary-end sidebar-secondary-end];\n }\n}\n@media only screen and (width > 1024px) {\n [grid-template=page-layout][template-option=reverse] {\n grid-template-columns: [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) [content-start] var(--sidebar-width) [sidebar-secondary-end] var(--page-padding) [center-start] 1fr [center-end] var(--page-padding) [sidebar-primary-start] var(--sidebar-width) [content-end] var(--page-padding) [fullscreen-end all-end sidebar-primary-end];\n grid-template-rows: [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];\n }\n}\n\n[grid-template=page-layout] > [grid-area=fullscreen], [grid-template=page-layout] > [grid-area=document] {\n grid-column: fullscreen;\n grid-row: fullscreen;\n}\n[grid-template=page-layout] > [grid-area=sidebar-primary] {\n grid-column: sidebar-primary;\n grid-row: sidebar-primary;\n}\n[grid-template=page-layout] > [grid-area=sidebar-secondary] {\n grid-column: sidebar-secondary;\n grid-row: sidebar-secondary;\n}\n\n[grid-area=content] {\n grid-column: content;\n grid-row: content;\n}\n\n[grid-template=page-layout]:has([grid-area=sidebar-primary]) > [grid-area=content],\n[grid-template=page-layout][template-option=reverse]:has([grid-area=sidebar-secondary]) > [grid-area=content] {\n grid-column: center-start/content-end;\n grid-row: content;\n}\n\n[grid-template=page-layout]:has([grid-area=sidebar-secondary]) > [grid-area=content],\n[grid-template=page-layout][template-option=reverse]:has([grid-area=sidebar-primary]) > [grid-area=content] {\n grid-column: content-start/center-end;\n grid-row: content;\n}\n\n[grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary]) [grid-area=content] {\n grid-column: center;\n grid-row: center;\n}\n\n@media only screen and (width > 768px) and (width < 1024px) {\n [grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary]) [grid-area=sidebar-secondary] {\n grid-column-start: center-start;\n }\n [grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary])[template-option=reverse] [grid-area=sidebar-secondary] {\n grid-column-end: center-end;\n }\n [grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary]) [grid-area=sidebar-primary] {\n grid-row-end: sidebar-secondary-end;\n }\n}\n\n/*\n\nPage Layout\n\nDescripition:\n
    \n
  1. \n Overall Structure:\n
      \n
    • Design the layout to incorporate columns for content and sidebars.
      • \n
    • \n [sidebar]\n [content]\n [sidebar]
      • \n
    • the parent uses `grid-template=\"page-layout\"`
      • \n
    • the children uses `grid-area=\"content|sidebar-primary|sidebar-secondary\"`
      • \n
    \n
    2. \n
  2. \n Column Configuration:\n
      \n
    • Utilize 'sidebar-primary', 'sidebar-secondary', and 'content' classes to designate columns within the layout.
      • \n
    • Define grid areas in the DOM structure for 'fullscreen', 'sidebar-primary','sidebar-secondary','container'.
      • \n
    \n
    3. \n
  3. \n Sidebar Specifications:\n
      \n
    • Sidebars are 300px wide with 1 rem padding on the left and right. (300px + 2rem)
      • \n
    • Sidebars do not respect the page margin but adhere to margins between themselves and content.
      • \n
    • Sidebars placed on the edge will extend to the edge of the container.
      • \n
    \n
      \n Responsive Design:\n
    • `Primary sidebar` remains fixed and aligned with the content area. It folds under the content on mobile viewports.
      • \n
    • `Secondary sidebar` remains fixed and shifts below the content on tablet and smaller viewports.
      • \n
    • The sidebar widths are constant when aligned with the content and changes its width to the above content based on media breakpoints.
      • \n
    \n
    4. \n
  4. \n Content Area:\n
      \n
    • Allocate remaining space on the page for the content area, respecting a page margin.
      • \n
    \n
    5. \n
\n\nMarkup:\n

Document(fullscreen)

\n
\n
Document
\n
\n

Content No Sidebars

\n
\n
Content
\n
\n

Content with Primary Sidebar

\n
\n
sidebar primary
\n
content
\n
\n

Content with Primary Sidebar - Reverse template-option=\"reverse\"

\n
\n
sidebar primary (reverse)
\n
content (reverse)
\n
\n

Content with Secondary Sidebar

\n
\n
sidebar secondary
\n
content
\n
\n

Content with Secondary Sidebar - Reverse template-option=\"reverse\"

\n
\n
sidebar secondary
\n
content
\n
\n

Both Sidebars

\n
\n
sidebar secondary
\n
content center
\n
sidebar primary
\n
\n

Both Sidebars

\n
\n
sidebar secondary
\n
content center
\n
sidebar primary
\n
\n{{> \"Component.Structures.PageLayout.demoStyles\" }}\n\nMarkupWrapperClasses: space-holder colored-zones\n\nWeight: 0\n\nStyleguide Component.Structures.PageLayout\n*/\n/*\n\nDemo Styles\n\nDescripition:\nStyles needed for demo and to not be included in enteprise styles\n\nMarkup:\n \n\n\n \n\nMarkupWrapperClasses: space-holder colored-zones\n\nWeight: 0\n\nStyleguide Component.Structures.PageLayout.demoStyles\n*/\n/*\nPage Layout: Article\n\nhere is a short demo of how the content will work with the page layouts.\n\nMarkUp:\n
\n
\n

ACCEL Lite: Top Takeaways from the ACC 2023 Guideline for Chronic CAD for the\n Practicing Clinician

\n
\n

Feb 13, 2024   |  Alison\n Bailey, MD, FACC; Salim S.\n Virani, MD, FACC; Roger S.\n Blumenthal, MD, FACC

\n
Podcast
\n
\n
\n
    \n
    • \n
    • \n
    • \n
    • \n
    • \n
    • \n
\n
\n
\n
Print
\n
\n
\n
Font Size
\n
A
\n
A
\n
A
\n
\n
\n
\n
\n
\n

To improve our understanding of the basic principles in the treatment and management of patients\n with chronic heart disease, in this interview, Salim S. Virani, MD, PhD, FACC,\n and Roger S. Blumenthal, MD, FACC, discuss top takeaways from the ACC 2023\n Guideline for Chronic CAD.

\n

Related References:

\n
    \n
  1. Writing Committee Members, Virani, S. S., Newby, L. K., Arnold, S. V., Bittner, V., Brewer,\n L. C., Demeter, S. H., Dixon, D. L., Fearon, W. F., Hess, B., Johnson, H. M., Kazi, D. S.,\n Kolte, D., Kumbhani, D. J., LoFaso, J., Mahtta, D., Mark, D. B., Minissian, M., Navar, A.\n M., Patel, A. R., … Williams, M. S. (2023). 2023 AHA/ACC/ACCP/ASPC/NLA/PCNA Guideline for\n the Management of Patients With Chronic Coronary Disease: A Report of the American Heart\n Association/American College of Cardiology Joint Committee on Clinical Practice Guidelines.\n Journal of the American College of Cardiology, 82(9), 833–955. https://doi.org/10.1016/j.jacc.2023.04.003
    2. \n
\n \n \n
Subscribe to\n the ACCEL Lite Podcast
\n
\n
\n

Clinical Topics:Acute Coronary Syndromes, Dyslipidemia, Invasive\n Cardiovascular Angiography and Intervention

\n

Keywords:ACCELLite, Statins


< Back to Listings
\n
\n \n
\n \n
\n
\n \n
\n advertisment\n
\n \n \n
\n\n{{> \"Component.Structures.PageLayout.demoStyles\" }}\n\nMarkupWrapperClasses: colored-zones\n\n\n\nWeight:1\n\nStyleguide Component.Structures.PageLayout.Article\n*/\n/*\nAdvanced Double Sidebar\n\nMarkUp:\n
\n
\n

Clinical Trials Research Pathway

\n

The cardiology clinical trial research workforce is comprised of a wide spectrum of specialists and roles.\n ACC members, including cardiologists, nurses, physician assistants and PharmDs have opportunities to develop\n instrumental roles, including clinical research coordinator, investigator and principle investigators.

\n

The ACC is committed to promoting clinical research in cardiovascular care. They established the Clinical\n Trials Research Program to diversify leadership and workforce in cardiovascular clinical research. Over 150\n learners, including almost 100 women, have enrolled since July 2022. The ACC offers career resources and\n funding opportunities in clinical trials research.

\n

Education

\n \n

ACC Award Opportunities

\n \n

Publications & Articles

\n \n
\n

Explore Cardiovascular Pathways:Physician|CV\n Team|Clinical Trials Research

\n
\n
\n
\n \n
  • \n
    \n
    \n
    \n
    \n
    Development\n & Leadership Programs
    \n
    \n
    • \n
  • \n
    \n \n
    \n
    \n
    Resources\n \n
    \n \n
    • \n
  • \n
    \n
    \n
    \n
    \n
    Contact\n Us
    \n
    \n
    • \n \n \n
    \n
    \n \n
    \n advertisment\n
    \n \n
    \n \n
    \n
    \n \n
    \n advertisment\n
    \n \n \n
    \n\n{{> \"Component.Structures.PageLayout.demoStyles\" }}\n\nMarkupWrapperClasses: colored-zones\n\n\n\nWeight:100\n\nStyleguide Component.Structures.PageLayout.AdvancePage\n*/\n[grid-template] {\n display: grid;\n}\n\n[grid-template=hero-image-cta] {\n --container-padding: 0.5rem;\n --hero-overlay-color: var(--acc);\n --hero-overlay-opacity:.85;\n --hero-title-overlay: hsla( var(--acc-h),var(--acc-s),var(--acc-l), var(--hero-overlay-opacity) );\n --breadcrumb-height: 2.5rem;\n grid-template-columns: [all-start breadcrumb-start title-start] var(--container-padding, 0) [content-start cta-start] 1fr [cta-end title-end content-end] var(--container-padding, 0) [all-end breadcrumb-end];\n grid-template-rows: [all-start breadcrumb-start] minmax(var(--breadcrumb-height, 2.5rem), min-content) [breadcrumb-end] var(--container-padding, 0) [title-start content-start] auto [title-end] calc(var(--container-padding, 0) * 0.5) [cta-start] auto [cta-end content-end] var(--container-padding, 0) [all-end];\n}\n@media (width > 768px) {\n [grid-template=hero-image-cta] {\n --container-padding: 1rem;\n grid-template-rows: [all-start breadcrumb-start] var(--breadcrumb-height, 2.5rem) [breadcrumb-end] calc(var(--container-padding, 0) * 0.5) [title-start cta-start content-start] auto [title-end cta-end content-end] var(--container-padding, 0) [all-end];\n grid-template-columns: [all-start breadcrumb-start title-start] var(--container-padding, 0) [content-start] 1fr [title-end] var(--container-padding, 0) [cta-start] 1fr [cta-end content-end] var(--container-padding, 0) [all-end breadcrumb-end];\n }\n}\n@media (width > 1024px) {\n [grid-template=hero-image-cta] {\n --container-padding: 2rem;\n grid-template-columns: [all-start breadcrumb-start title-start] var(--container-padding, 0) [content-start] 3fr [title-end] 1fr [cta-start] 3fr [cta-end content-end] var(--container-padding, 0) [all-end breadcrumb-end];\n }\n}\n[grid-template=hero-image-cta][template-option=micro] {\n grid-template-columns: [all-start title-start] var(--container-padding, 0) [content-start cta-start] 1fr [cta-end title-end content-end] var(--container-padding, 0) [all-end];\n grid-template-rows: [all-start] var(--container-padding, 0) [title-start content-start] auto [title-end] calc(var(--container-padding, 0) * 0.5) [cta-start] auto [cta-end content-end] var(--container-padding, 0) [all-end];\n}\n@media (width > 768px) {\n [grid-template=hero-image-cta][template-option=micro] {\n grid-template-rows: [all-start] calc(var(--container-padding, 0) * 0.5) [title-start cta-start content-start] auto [title-end cta-end content-end] calc(var(--container-padding, 0) * 0.5) [all-end];\n grid-template-columns: [all-start title-start] var(--container-padding, 0) [content-start] 1fr [title-end] var(--container-padding, 0) [cta-start] min-content [cta-end content-end] var(--container-padding, 0) [all-end];\n }\n}\n@media (width > 1024px) {\n [grid-template=hero-image-cta][template-option=micro] {\n grid-template-columns: [all-start title-start] var(--container-padding, 0) [content-start] 1fr [title-end] var(--container-padding, 0) [cta-start] min-content [cta-end content-end] var(--container-padding, 0) [all-end];\n }\n}\n\n[grid-template=hero-image-cta] {\n overflow: clip;\n isolation: isolate;\n}\n[grid-template=hero-image-cta] [grid-area] {\n z-index: 1;\n}\n[grid-template=hero-image-cta] [grid-area=background] {\n grid-row: all;\n grid-column: all;\n z-index: -1;\n}\n[grid-template=hero-image-cta] [grid-area=breadcrumb] {\n grid-row: breadcrumb;\n grid-column: breadcrumb;\n}\n[grid-template=hero-image-cta] [grid-area=title] {\n grid-row: title;\n grid-column: title;\n}\n[grid-template=hero-image-cta] [grid-area=cta] {\n grid-row: cta;\n grid-column: cta;\n}\n\n[data-item=hero-image-breadcrumb-nav], [data-item=cta-callout] {\n position: relative;\n isolation: isolate;\n}\n[data-item=hero-image-breadcrumb-nav]::after, [data-item=cta-callout]::after {\n content: \"\";\n background-color: var(--hero-overlay-color);\n opacity: var(--hero-overlay-opacity);\n background-blend-mode: multiply;\n mix-blend-mode: multiply;\n inset: 0px;\n position: absolute;\n z-index: -1;\n}\n\n[data-item=hero-title] {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n padding-inline-start: 1rem;\n overflow: clip;\n background-color: var(--hero-title-overlay);\n box-decoration-break: clone;\n display: inline;\n padding-block: 0.125em;\n padding-inline: 0 0.25em;\n position: relative;\n isolation: isolate;\n text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);\n line-height: 1.425em;\n}\n\n[data-item=hero-image-breadcrumb-nav]::after {\n border-end-end-radius: 0.5rem;\n}\n\n[data-item=cta-callout]::after {\n border-radius: 0.5rem;\n}\n\n/*\nMicroSite \n\n

    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.\n

    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.\n

    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.\n

    A Microsite Must

    \n\nStyleguide Component.MicroSite\n\n*/\n/*\nHero Image with CTA\n\n\nThe \"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.\n\nMarkup:\n
    \n
    \n {{> \"Component.MicroSite.Sub.HeroImage.BackgroundImage\" modifier_class=\"\" }}\n
    \n
    \n {{> \"Component.MicroSite.Sub.HeroImage.BreadcrumbNav\" modifier_class=\"font-size_down-2\" }}\n
    \n
    \n {{> \"Component.MicroSite.Sub.PageTitleTreatment\" modifier_class=\"font-size_up-2 m_0\" }}\n
    \n
    \n {{> \"Component.MicroSite.Sub.HeroImage.CTAHighlight\" modifier_class=\"z_1 font-size_0\" }}\n
    \n
    \n\nMarkupWrapperClasses: wrapper-container\n\nSubComponents:\nComponent.MicroSite.Sub.HeroImage.BackgroundImage - Hero Background Image\nComponent.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation\nComponent.MicroSite.Sub.PageTitleTreatment - Page Title Treatment\nComponent.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight\n\nWeight: 0\n\nNOTE: 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.\n\n\n\nStyleguide Component.MicroSite.HeroImageWithCTA\n\n*/\n/*\nMicro Branding with CTA Button\n\n\nThe \"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.\n\nMarkup:\n
    \n {{> \"Component.MicroSite.Sub.HeroImage.BackgroundImage\" }}\n
    \n {{> \"Component.MicroSite.Sub.PageTitleTreatmentMicro\" modifier_class=\"m_0 m-y_3 m-y_0:lg\" }}\n
    \n
    \n {{> \"Component.MicroSite.Sub.HeroImage.CTAButton\" modifier_class=\"\"}}\n
    \n
    \n\nMarkupWrapperClasses: wrapper-container\n\nSubComponents:\nComponent.MicroSite.Sub.HeroImage.BackgroundImage - Background Image\nComponent.MicroSite.Sub.PageTitleTreatment - Page Title\nComponent.MicroSite.Sub.HeroImage.CTAButton - CTA Button\n\nWeight: 0\n\nNOTE: 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.\n\n\n\nStyleguide Component.MicroSite.MicroBrandingWithButtton\n\n*/\n/*\nCTA Highlight\n\nThe CTA Highlight component is used to create a highlighted call-to-action section.\n\nModifier: 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.\n\nMarkup:\n
    \n

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

    \n

    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.

    \n {{> Component.MicroSite.Sub.HeroImage.CTAButton modifier_class=\"\"}}\n
    \n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.CTAHighlight\n\n*/\n/*\nCTA Button\n\nThe CTA Button is just a centered button for the highlighted call-to-action.\n\n\nMarkup:\n
    \n \n
    \n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.CTAButton \n\n*/\n/*\nHero Image Breadcrumb Nav\n\nThe 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.\n\nMarkup:\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.BreadcrumbNav\n\n*/\n/*\nPage Title Treatment\n\nMicroSite Page Title Treatment component is used to style and emphasize page titles.\n\nModifier: font-color - This modifier class is used to customize the font color of the page title.\n\nMarkup:\n

    \n Hero Statement Mision of the Page ™

    \n\n\nMarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40\n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.PageTitleTreatment\n\n*/\n/*\nPage Title Treatment Micro\n\nMicro MicroSite Page Title Treatment has a back button in mobile.\n\nMarkup:\n

    \n \n Hero Statement Mision of the Page™\n

    \n\n\nMarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40\n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.PageTitleTreatmentMicro\n\n*/\n/*\nResponsive Hero Image\n\nThe 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\n\n\nMarkup:\n \n \n \n \n \"Hero\n \n\nMarkupWrapperClasses: columns_1 grid relative rows_1 w_100 overflow_hidden p_6\n\nWeight: 0\n\nNOTE: It utilizes the \"Lorem Picsum\" service for placeholder images. Replace all 4 images for best results.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.BackgroundImage\n\n\n*/\n/*\nTriple Pricing Bento\n\n
    In web or UI design, this approach visually arranges content into clearly defined blocks or modules—usually of equal or complementary sizes—within a grid. It helps present multiple options, categories, or pieces of information in a compact, organized, and visually balanced way, often enhancing scannability and user choice.

    Use this component to display structured pricing options for multiple membership types. It visually distinguishes tiers like Member, Nonmember, and Fellows in Training or Emeritus Members using clear headings, large pricing, and consistent formatting.

    \n\nMarkup:\n\n\nSubComponents:\nSub.Recipe.PriceTable.Bento.Card - Price Card\n\nMarkupWrapperClasses: reading-typography m-b_4 wrapper-container\n\nWeight: 0\n\nStyleguide Recipes.PriceTable.Bento\n\n*/\n/*\nPrice Bento Price Card\n\n

    The Bento Pricing Card is a flexible pricing presentation component designed for purchase plan options. It supports multiple price tiers and optional notes, accommodating varied member types and durations. This component ensures consistent styling, responsive behavior, and semantic clarity across different purchase contexts.

    Use when: you need to visually present one or more pricing options with supporting content like membership type and terms.

    Do not use when: displaying simple, single-line prices or ungrouped price information not related to purchasing tiers.

    \n\nprimary - Used for Member\nsecondary - Used for Non-Member\naccent - Used for Any Reduced Pricing\n\n\nMarkup: \n
  • \n
    \n

    {{ modifier_class }}

    \n
    \n
    \n
    \n

    $900/5 year
    purchase plan

    \n
    \n
    \n \n \n \n \n or\n \n \n \n \n
    \n
    \n

    $300/1 year
    purchase plan

    \n
    \n
    \n
    Annual ABIM MOC fee*
    \n
    • \n\nNote: This is a strict structured component so all cards must match eachother content models. Keep it Apples to Apples!\n\nWeight: 0\n\nStyleGuide Sub.Recipe.PriceTable.Bento.Card \n\n*/\n.triple-bento {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: auto auto auto;\n grid-template-areas: \"a\" \"b\" \"c\";\n}\n.triple-bento li:nth-child(1) {\n grid-area: a;\n}\n.triple-bento li:nth-child(2) {\n grid-area: b;\n}\n.triple-bento li:nth-child(3) {\n grid-area: c;\n}\n\n@container ((width > 460px) and (width < 1024px) ) {\n .triple-bento {\n grid-template-columns: 7fr 5fr;\n grid-template-rows: auto auto;\n grid-template-areas: \"a c\" \"b c\";\n }\n}\n@container ( width > 1024px ) {\n .triple-bento {\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: auto;\n grid-template-areas: \"a b c\";\n }\n}\n.product-grid {\n display: grid;\n --matrix-height-count:4;\n grid-template-rows: repeat(var(--matrix-height-count), max-content);\n}\n\n.topic-subgrid {\n display: grid;\n grid-template-rows: subgrid;\n grid-row: span var(--matrix-height-count);\n}\n\n/*\nProduct Matrix\n\n

    The Product Matrix component displays SAP product tracks in a responsive grid layout, allowing users to quickly view program names, focus areas, event dates, and relevant topics. Each product is color-coded according to its associated clinical pathway for immediate recognition and clarity. Subgrids are employed within each product block to ensure content stacks accessibly and cleanly from desktop to mobile views, maintaining visual hierarchy and legibility.

    This component is ideal for organizing multiple learning tracks or modules with aligned schedules and curriculum. Use when visual grouping and intuitive scanning of multiple product options are required.

    \n\nMarkup:\n
    \n

    Remind Yourself of the 2025 CMP Dates & Topics

    \n \n
    \n\n\nMarkupWrapperClasses: p_4\n\nSubComponents:\nSub.CMP.ProductMatrix.Item - Product Matrix Item\n\nWeight: 0\n\nStyleguide: Recipes.CMP.ProductMatrix\n*/\n/*\nProduct Matrix Item\n\n

    This component represents a single SAP product within the Product Matrix. It includes a visually distinct header with branding, a title, and clinical focus. Event dates and curriculum topics are presented in vertically stacked sections, and a call-to-action link at the bottom directs users to the full SAP page. Background and text colors reflect clinical identity, aiding recognition and scanning. Grid and spacing utilities ensure responsive behavior across breakpoints.

    Use this component inside a larger Product Matrix layout when promoting individual learning tracks. Ideal for overview pages or dashboards where clear segmentation by topic is required.

    \n\n.special - this pathway color represents ACCSAP\n.invt - this pathway color represents CATHSAP\n.arr - this pathway color represents EPSAP\n.hf - this pathway color represents HFSAP\n\nMarkup:\n
  • \n
    \n \n

    ProductNameSAP

    \n Product Tagline\n \n     \n
    \n
    \n
      \n
    • September 13 - 21, 2025
      • \n
    • November 15 - 23, 2025
      • \n
    \n
    \n
    \n
      \n
    • Case Selection & Management
      • \n
    \n
    \n
    \n Go to SAP Page\n
    \n
    • \n\nNote:\n

    This component will render incorrectly if it is not within the parent grid that helps with its spacing and alignments.

    \n\nMarkupWrapperClasses: p_4\n\nWeight: 0\n\nStyleguide: Sub.CMP.ProductMatrix.Item\n*/",".responsive-table {\n container-type: inline-size;\n}\n\n[class^=\"data-label\"]::before {\ncontent: attr(data-label);\n--data-label-font-family: var(--font-family_accent, sans-serif);\n--data-label-weight: (--font_bold, 900);\n--data-label-color: currentColor;\nline-height: get-css-size(line-height, 1);\nmargin-bottom: 0.25em;\nfont-size: 0.75em;\nfont-family: var(--data-label-font-family);\nfont-weight: var(--data-label-weight);\ncolor: color-mix(in hsl, var(--data-label-color), white 50%);\n}\n.data-label-show::before {\ndisplay: block;\n}\n.data-label-hide::before {\nopacity: 0.1;\n}\n\n@container #{$medium-up-cq} {\n.data-label-show#{$bp-label_medium}::before {\n display: block;\n}\n.data-label-hide#{$bp-label_medium}::before {\n display: none;\n}\n}\n\n@container #{$large-up-cq} {\n.data-label-show#{$bp-label_large}::before {\n display: block;\n}\n.data-label-hide#{$bp-label_large}::before {\n display: none;\n}\n}\n\n/*\nResponsive Table with Mobile Card Layout\n\nThis 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.\n\nMarkup:\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    FuitVegitableMeat
    Data 1-1Data 1-2Data 1-3
    Data 2-1Data 2-2Data 2-3
    \n \n
    \n\nMarkupWrapperClasses:table\n\n\nWeight: 0\n\n\nStyleguide: Component.ResponsiveTable\n*/\n",":root {\n --page-padding: #{get-css-size(padding, 3)};\n --outer-content-padding: 0;\n --inner-content-padding: #{get-css-size(padding, 3)};\n --sidebar-width: 100%;\n --content-max-width: calc(100% - (var(--page-padding) * 2));\n --content-min-width: calc(100% - (var(--page-padding) * 2));\n\n @media #{$medium-up} {\n --inner-content-padding: #{get-css-size(padding, 4)};\n --page-padding: #{get-css-size(padding, 4)};\n --outer-content-padding: 0;\n --sidebar-width: calc(300px + (var(--inner-content-padding) * 2));\n }\n\n @media #{$large-up} {\n --outer-content-padding: #{get-css-size(padding, 4)};\n --sidebar-width: 300px;\n }\n}\n\n\n[grid-template=\"page-layout\"] {\n margin-bottom: var(--page-padding);\n row-gap: var(--page-padding);\n width: 100%;\n display: grid;\n grid-template-columns:\n [all-start fullscreen-start sidebar-secondary-start sidebar-primary-start] var(--page-padding) \n [content-start center-start] 1fr \n [content-end center-end] var(--page-padding) \n [fullscreen-end all-end sidebar-secondary-end sidebar-primary-end];\n grid-template-rows:\n [fullscreen-start all-start] var(--page-padding) \n [center-start content-start] auto \n [center-end content-end sidebar-secondary-start] auto \n [sidebar-secondary-end sidebar-primary-start] auto \n [sidebar-primary-end] var(--page-padding) \n [ fullscreen-end all-end];\n\n @media #{$medium-up} {\n grid-template-columns:\n [fullscreen-start all-start sidebar-primary-start sidebar-secondary-start] var(--page-padding) \n [content-start] var(--sidebar-width) \n [sidebar-primary-end] var(--page-padding) \n [ center-start] 1fr \n [center-end content-end] var(--page-padding) \n [fullscreen-end all-end sidebar-secondary-end];\n grid-template-rows:\n [all-start fullscreen-start content-start center-start sidebar-primary-start] auto \n [content-end sidebar-secondary-start center-end sidebar-primary-end] auto \n [sidebar-secondary-end fullscreen-end all-end];\n }\n\n @media #{$large-up} {\n grid-template-columns:\n [fullscreen-start all-start sidebar-primary-start] var(--page-padding) \n [content-start] var(--sidebar-width) \n [sidebar-primary-end] var(--page-padding) \n [center-start] 1fr \n [center-end] var(--page-padding) \n [sidebar-secondary-start] var(--sidebar-width) \n [content-end] var(--page-padding) \n [fullscreen-end all-end sidebar-secondary-end];\n grid-template-rows:\n [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto \n [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];\n }\n\n &[template-option=\"reverse\"] {\n @media #{$medium-up} {\n grid-template-columns:\n [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) \n [content-start center-start] 1fr \n [center-end] var(--page-padding) \n [sidebar-primary-start] var(--sidebar-width) \n [content-end] var(--page-padding) \n [fullscreen-end all-end sidebar-primary-end sidebar-secondary-end];\n\n }\n\n @media #{$large-up} {\n grid-template-columns:\n [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) \n [content-start] var(--sidebar-width) \n [sidebar-secondary-end] var(--page-padding) \n [center-start] 1fr \n [center-end] var(--page-padding) \n [sidebar-primary-start] var(--sidebar-width) \n [content-end] var(--page-padding) \n [fullscreen-end all-end sidebar-primary-end];\n grid-template-rows:\n [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto \n [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];\n }\n }\n}\n\n\n[grid-template=\"page-layout\"] {\n\n & > [grid-area=\"fullscreen\"],\n & > [grid-area=\"document\"] {\n grid-column: fullscreen;\n grid-row: fullscreen;\n }\n\n & > [grid-area=\"sidebar-primary\"] {\n grid-column: sidebar-primary;\n grid-row: sidebar-primary;\n }\n\n & > [grid-area=\"sidebar-secondary\"] {\n grid-column: sidebar-secondary;\n grid-row: sidebar-secondary;\n }\n}\n\n\n[grid-area=\"content\"] {\n grid-column: content;\n grid-row: content;\n}\n\n%content-right {\n & > [grid-area=\"content\"] {\n grid-column: center-start / content-end;\n grid-row: content;\n }\n}\n\n%content-left {\n & > [grid-area=\"content\"] {\n grid-column: content-start / center-end;\n grid-row: content;\n }\n}\n\n%center {\n & [grid-area=\"content\"] {\n grid-column: center;\n grid-row: center;\n }\n}\n\n\n[grid-template=\"page-layout\"]:has(\n [grid-area=\"sidebar-primary\"]),\n\n[grid-template=\"page-layout\"][template-option=\"reverse\"]:has(\n [grid-area=\"sidebar-secondary\"]) {\n @extend %content-right;\n}\n\n\n[grid-template=\"page-layout\"]:has(\n [grid-area=\"sidebar-secondary\"]),\n\n[grid-template=\"page-layout\"][template-option=\"reverse\"]:has(\n [grid-area=\"sidebar-primary\"]) {\n @extend %content-left;\n}\n\n\n[grid-template=\"page-layout\"]:has(\n [grid-area=\"sidebar-secondary\"]):has(\n [grid-area=\"sidebar-primary\"]) {\n @extend %center;\n\n @media #{$medium-only} {\n \n [grid-area=\"sidebar-secondary\"] {\n grid-column-start: center-start;\n }\n\n &[template-option=\"reverse\"] \n [grid-area=\"sidebar-secondary\"] {\n grid-column-end: center-end;\n }\n\n \n [grid-area=\"sidebar-primary\"] {\n grid-row-end: sidebar-secondary-end;\n }\n }\n}\n\n\n\n\n\n/*\n\nPage Layout\n\nDescripition:\n
      \n
    1. \n Overall Structure:\n
        \n
      • Design the layout to incorporate columns for content and sidebars.
        • \n
      • \n [sidebar]\n [content]\n [sidebar]
        • \n
      • the parent uses `grid-template=\"page-layout\"`
        • \n
      • the children uses `grid-area=\"content|sidebar-primary|sidebar-secondary\"`
        • \n
      \n
      2. \n
    2. \n Column Configuration:\n
        \n
      • Utilize 'sidebar-primary', 'sidebar-secondary', and 'content' classes to designate columns within the layout.
        • \n
      • Define grid areas in the DOM structure for 'fullscreen', 'sidebar-primary','sidebar-secondary','container'.
        • \n
      \n
      3. \n
    3. \n Sidebar Specifications:\n
        \n
      • Sidebars are 300px wide with 1 rem padding on the left and right. (300px + 2rem)
        • \n
      • Sidebars do not respect the page margin but adhere to margins between themselves and content.
        • \n
      • Sidebars placed on the edge will extend to the edge of the container.
        • \n
      \n
        \n Responsive Design:\n
      • `Primary sidebar` remains fixed and aligned with the content area. It folds under the content on mobile viewports.
        • \n
      • `Secondary sidebar` remains fixed and shifts below the content on tablet and smaller viewports.
        • \n
      • The sidebar widths are constant when aligned with the content and changes its width to the above content based on media breakpoints.
        • \n
      \n
      4. \n
    4. \n Content Area:\n
        \n
      • Allocate remaining space on the page for the content area, respecting a page margin.
        • \n
      \n
      5. \n
    \n\nMarkup:\n

    Document(fullscreen)

    \n
    \n
    Document
    \n
    \n

    Content No Sidebars

    \n
    \n
    Content
    \n
    \n

    Content with Primary Sidebar

    \n
    \n
    sidebar primary
    \n
    content
    \n
    \n

    Content with Primary Sidebar - Reverse template-option=\"reverse\"

    \n
    \n
    sidebar primary (reverse)
    \n
    content (reverse)
    \n
    \n

    Content with Secondary Sidebar

    \n
    \n
    sidebar secondary
    \n
    content
    \n
    \n

    Content with Secondary Sidebar - Reverse template-option=\"reverse\"

    \n
    \n
    sidebar secondary
    \n
    content
    \n
    \n

    Both Sidebars

    \n
    \n
    sidebar secondary
    \n
    content center
    \n
    sidebar primary
    \n
    \n

    Both Sidebars

    \n
    \n
    sidebar secondary
    \n
    content center
    \n
    sidebar primary
    \n
    \n{{> \"Component.Structures.PageLayout.demoStyles\" }}\n\nMarkupWrapperClasses: space-holder colored-zones\n\nWeight: 0\n\nStyleguide Component.Structures.PageLayout\n*/\n\n\n/*\n\nDemo Styles\n\nDescripition:\nStyles needed for demo and to not be included in enteprise styles\n\nMarkup:\n \n\n\n \n\nMarkupWrapperClasses: space-holder colored-zones\n\nWeight: 0\n\nStyleguide Component.Structures.PageLayout.demoStyles\n*/\n","[grid-template]{\n display:grid;\n}\n[grid-template=\"hero-image-cta\"]{\n --container-padding: #{get-css-size(padding, 3)}; \n --hero-overlay-color: var(--acc);\n --hero-overlay-opacity:.85;\n --hero-title-overlay: hsla( var(--acc-h),var(--acc-s),var(--acc-l), var(--hero-overlay-opacity) );\n --breadcrumb-height: 2.5rem;\n grid-template-columns: \n [all-start breadcrumb-start title-start] var(--container-padding, 0) \n [content-start cta-start ] 1fr \n [ cta-end title-end content-end] var(--container-padding, 0) \n [all-end breadcrumb-end];\n grid-template-rows:\n [all-start breadcrumb-start] minmax(var(--breadcrumb-height, 2.5rem), min-content)\n [breadcrumb-end ] var(--container-padding, 0)\n [title-start content-start] auto \n [title-end] calc( var(--container-padding, 0)* .5)\n [cta-start] auto\n [cta-end content-end] var(--container-padding, 0)\n [all-end];\n @media #{$medium-up-cq} {\n --container-padding: #{get-css-size(padding, 4)};\n // rows_2:md columns_4:md --row-1:2.5rem; --row-2:min-content \n grid-template-rows: \n [all-start breadcrumb-start] var(--breadcrumb-height, 2.5rem) \n [breadcrumb-end] calc( var(--container-padding, 0)* .5)\n [title-start cta-start content-start] auto \n [title-end cta-end content-end] var(--container-padding, 0) \n [all-end];\n grid-template-columns: \n [all-start breadcrumb-start title-start] var(--container-padding, 0)\n [content-start ] 1fr\n [title-end] var(--container-padding, 0)\n [cta-start] 1fr \n [cta-end content-end] var(--container-padding, 0)\n [all-end breadcrumb-end];\n }\n @media #{$large-up-cq} {\n --container-padding: #{get-css-size(padding, 5)}; \n grid-template-columns: \n [all-start breadcrumb-start title-start] var(--container-padding, 0)\n [content-start ] 3fr\n [title-end] 1fr\n [cta-start] 3fr\n [cta-end content-end] var(--container-padding, 0) \n [all-end breadcrumb-end];\n // class=\"hero relative isolation_isolate grid rows_3 rows_2:md columns_4:md columns_5:lg columns_2 m-t_n4 m-x_n4 overflow_hidden \" style=\"--hero-overlay-opacity:.9; --row-1:2.5rem; --row-2:min-content;\"\n \n }\n &[template-option=\"micro\"]{\n grid-template-columns: \n [all-start title-start] var(--container-padding, 0) \n [content-start cta-start ] 1fr \n [cta-end title-end content-end] var(--container-padding, 0) \n [all-end];\n grid-template-rows:\n [all-start] var(--container-padding, 0)\n [title-start content-start] auto \n [title-end] calc( var(--container-padding, 0)* .5)\n [cta-start] auto\n [cta-end content-end] var(--container-padding, 0)\n [all-end];\n @media #{$medium-up-cq} { \n grid-template-rows: \n [all-start] calc( var(--container-padding, 0)* .5)\n [title-start cta-start content-start] auto \n [title-end cta-end content-end] calc( var(--container-padding, 0)* .5)\n [all-end];\n grid-template-columns: \n [all-start title-start] var(--container-padding, 0)\n [content-start ] 1fr\n [title-end] var(--container-padding, 0)\n [cta-start] min-content\n [cta-end content-end] var(--container-padding, 0)\n [all-end ];\n }\n @media #{$large-up-cq} { \n grid-template-columns: \n [all-start title-start] var(--container-padding, 0)\n [content-start ] 1fr\n [title-end] var(--container-padding, 0)\n [cta-start] min-content\n [cta-end content-end] var(--container-padding, 0)\n [all-end ];\n }\n }\n}\n[grid-template=hero-image-cta]{\n overflow: clip;\n isolation: isolate;\n [grid-area]{z-index: 1;}\n [grid-area=\"background\"]{\n grid-row: all;\n grid-column: all;\n z-index: -1;\n }\n [grid-area=\"breadcrumb\"]\n {\n grid-row: breadcrumb;\n grid-column: breadcrumb;\n\n }\n [grid-area=\"title\"]{\n\n grid-row: title;\n grid-column: title;\n }\n [grid-area=\"cta\"]{\n grid-row: cta;\n grid-column: cta;\n }\n}\n\n\n%after-background-transparency{\n position: relative;\n isolation: isolate;\n &::after{\n content:'';\n background-color: var(--hero-overlay-color);\n opacity: var(--hero-overlay-opacity);\n background-blend-mode: multiply;\n mix-blend-mode: multiply;\n inset:0px;\n position: absolute;\n z-index: -1;\n }\n}\n\n[data-item=\"hero-image-breadcrumb-nav\"],[data-item=\"cta-callout\"]{\n @extend %after-background-transparency;\n}\n\n[data-item=\"hero-title\"]{\n display:flex;\n flex-wrap: wrap;\n flex-direction:row;\n padding-inline-start: 1rem;\n overflow:clip;\n background-color: var(--hero-title-overlay);\n box-decoration-break: clone;\n display: inline;\n padding-block: 0.125em;\n padding-inline: 0 0.25em;\n position: relative;\n isolation: isolate;\n text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);\n line-height: 1.425em;\n}\n\n[data-item=\"hero-image-breadcrumb-nav\"]::after{\n border-end-end-radius: $border_radius;\n}\n[data-item=\"cta-callout\"]::after{\n border-radius: $border_radius;\n}\n\n\n/*\nMicroSite \n\n

    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.\n

    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.\n

    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.\n

    A Microsite Must

    \n\nStyleguide Component.MicroSite\n\n*/\n\n/*\nHero Image with CTA\n\n\nThe \"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.\n\nMarkup:\n
    \n
    \n {{> \"Component.MicroSite.Sub.HeroImage.BackgroundImage\" modifier_class=\"\" }}\n
    \n
    \n {{> \"Component.MicroSite.Sub.HeroImage.BreadcrumbNav\" modifier_class=\"font-size_down-2\" }}\n
    \n
    \n {{> \"Component.MicroSite.Sub.PageTitleTreatment\" modifier_class=\"font-size_up-2 m_0\" }}\n
    \n
    \n {{> \"Component.MicroSite.Sub.HeroImage.CTAHighlight\" modifier_class=\"z_1 font-size_0\" }}\n
    \n
    \n\nMarkupWrapperClasses: wrapper-container\n\nSubComponents:\nComponent.MicroSite.Sub.HeroImage.BackgroundImage - Hero Background Image\nComponent.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation\nComponent.MicroSite.Sub.PageTitleTreatment - Page Title Treatment\nComponent.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight\n\nWeight: 0\n\nNOTE: 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.\n\n\n\nStyleguide Component.MicroSite.HeroImageWithCTA\n\n*/\n\n/*\nMicro Branding with CTA Button\n\n\nThe \"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.\n\nMarkup:\n
    \n {{> \"Component.MicroSite.Sub.HeroImage.BackgroundImage\" }}\n
    \n {{> \"Component.MicroSite.Sub.PageTitleTreatmentMicro\" modifier_class=\"m_0 m-y_3 m-y_0:lg\" }}\n
    \n
    \n {{> \"Component.MicroSite.Sub.HeroImage.CTAButton\" modifier_class=\"\"}}\n
    \n
    \n\nMarkupWrapperClasses: wrapper-container\n\nSubComponents:\nComponent.MicroSite.Sub.HeroImage.BackgroundImage - Background Image\nComponent.MicroSite.Sub.PageTitleTreatment - Page Title\nComponent.MicroSite.Sub.HeroImage.CTAButton - CTA Button\n\nWeight: 0\n\nNOTE: 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.\n\n\n\nStyleguide Component.MicroSite.MicroBrandingWithButtton\n\n*/\n\n/*\nCTA Highlight\n\nThe CTA Highlight component is used to create a highlighted call-to-action section.\n\nModifier: 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.\n\nMarkup:\n
    \n

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

    \n

    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.

    \n {{> Component.MicroSite.Sub.HeroImage.CTAButton modifier_class=\"\"}}\n
    \n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.CTAHighlight\n\n*/\n\n/*\nCTA Button\n\nThe CTA Button is just a centered button for the highlighted call-to-action.\n\n\nMarkup:\n
    \n \n
    \n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.CTAButton \n\n*/\n\n/*\nHero Image Breadcrumb Nav\n\nThe 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.\n\nMarkup:\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.BreadcrumbNav\n\n*/\n\n\n/*\nPage Title Treatment\n\nMicroSite Page Title Treatment component is used to style and emphasize page titles.\n\nModifier: font-color - This modifier class is used to customize the font color of the page title.\n\nMarkup:\n

    \n Hero Statement Mision of the Page ™

    \n\n\nMarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40\n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.PageTitleTreatment\n\n*/\n/*\nPage Title Treatment Micro\n\nMicro MicroSite Page Title Treatment has a back button in mobile.\n\nMarkup:\n

    \n \n Hero Statement Mision of the Page™\n

    \n\n\nMarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40\n\nWeight: 0\n\nNOTE: 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.\n\n\nStyleguide Component.MicroSite.Sub.PageTitleTreatmentMicro\n\n*/\n\n\n\n/*\nResponsive Hero Image\n\nThe 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\n\n\nMarkup:\n \n \n \n \n \"Hero\n \n\nMarkupWrapperClasses: columns_1 grid relative rows_1 w_100 overflow_hidden p_6\n\nWeight: 0\n\nNOTE: It utilizes the \"Lorem Picsum\" service for placeholder images. Replace all 4 images for best results.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.BackgroundImage\n\n\n*/\n\n\n\n\n","/** Bespoke Build **/\n\n\n/** Build Comment: including file /setup/__preheader.scss **/ \n@use \"sass:math\";\n@use \"sass:color\";\n\n// Consider using https://www.purgecss.com/ to remove styles not used in the project.\n/** SCSS DOC: _preheader.scss **/\n$debug-trace: false !default;\n$name-mode: 'SHORT' !default; // $name-mode: \"SHORT\",\"LONG\",\"ALL\"\n$ms-base: 1rem !default; // needs to be in rem's\n$colors: ();\n$grays: ();\n$theme-palette: ();\n$usingFontAwesome:true;\n@import 'helpers/helpers';\n@import 'vendor/modular-scale';\n/** SCSS DOC: _utility-css.vars.scss **/\n@import 'setup/config/utility-css.vars';\n@import 'helpers/breakpoint';\n%font-awesome-pro {\n\t-webkit-font-smoothing: antialiased;\n\tdisplay: inline-block;\n\tfont-style: normal;\n\tfont-variant: normal;\n\ttext-rendering: auto;\n\tline-height: 1;\n\tfont-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro';\n\tfont-weight: 900;\n}\n\n\n/** SCSS DOC: __var.output.scss **/\n/** This needs to run later then brand **/\n\n$margin_0: get-css-size(margin, 0);\n$margin_1: get-css-size(margin, 1);\n$margin_2: get-css-size(margin, 2);\n$margin_3: get-css-size(margin, 3);\n$margin_4: get-css-size(margin, 4);\n$margin_5: get-css-size(margin, 5);\n$margin_n1: get-css-size(margin, n1);\n$margin_n2: get-css-size(margin, n2);\n$margin_n3: get-css-size(margin, n3);\n$margin_n4: get-css-size(margin, n4);\n$margin_n5: get-css-size(margin, n5);\n$padding_0: get-css-size(padding, 0);\n$padding_1: get-css-size(padding, 1);\n$padding_2: get-css-size(padding, 2);\n$padding_3: get-css-size(padding, 3);\n$padding_4: get-css-size(padding, 4);\n$padding_5: get-css-size(padding, 5);\n$border_square: 0;\n$border_radius: get-css-size(border-radius, radius);\n$border_round: get-css-size(border-radius, round);\n$border_circle: get-css-size(border-radius, circle);\n$border-width_0: get-css-size(border-width, 0);\n$border-width_1: get-css-size(border-width, 1);\n$border-width_2: get-css-size(border-width, 2);\n$border-width_3: get-css-size(border-width, 3);\n$border-width_4: get-css-size(border-width, 4);\n$border-width_5: get-css-size(border-width, 5);\n$font_display: var(--font-family_display);\n$font_accent: var(--font-family_accent);\n$font_ui: var(--font-family_ui);\n$font_copy: var(--font-family_copy);\n$font_mono: var(--font-family_mono);\n$font_6: get-css-size(font-size, 6);\n$font_5: get-css-size(font-size, 5);\n$font_4: get-css-size(font-size, 4);\n$font_3: get-css-size(font-size, 3);\n$font_2: get-css-size(font-size, 2);\n$font_1: get-css-size(font-size, 1);\n$font_0: get-css-size(font-size, 0);\n$font_n1: get-css-size(font-size, n1);\n$font_n2: get-css-size(font-size, n2);\n$font_n3: get-css-size(font-size, n3);\n$font_n4: get-css-size(font-size, n4);\n$font_n5: get-css-size(font-size, n5);\n$font_bold: var(--font_bold);\n$font_medium: var(--font_medium);\n$font_xbold: var(--font_xbold);\n$font_light: var(--font_light);\n$font_regular: var(--font_regular);\n$line-height_0: get-css-size(line-height, 0);\n$line-height_1: get-css-size(line-height, 1);\n$line-height_2: get-css-size(line-height, 2);\n$line-height_3: get-css-size(line-height, 3);\n$line-height_4: get-css-size(line-height, 4);\n$line-height_5: get-css-size(line-height, 5);\n@import \"bespoke/bespoke.wizard-nav\";\n@import \"bespoke/bespoke.responsive-table\";\n@import \"bespoke/bespoke.pagelayout\";\n@import \"bespoke/bespoke.pagelayout.demo\";\n@import \"bespoke/bespoke.microsite\";\n@import \"bespoke/bespoke.bento\";\n@import \"bespoke/bespoke.cmp.table\";","/*\nTriple Pricing Bento\n\n
    In web or UI design, this approach visually arranges content into clearly defined blocks or modules—usually of equal or complementary sizes—within a grid. It helps present multiple options, categories, or pieces of information in a compact, organized, and visually balanced way, often enhancing scannability and user choice.

    Use this component to display structured pricing options for multiple membership types. It visually distinguishes tiers like Member, Nonmember, and Fellows in Training or Emeritus Members using clear headings, large pricing, and consistent formatting.

    \n\nMarkup:\n\n\nSubComponents:\nSub.Recipe.PriceTable.Bento.Card - Price Card\n\nMarkupWrapperClasses: reading-typography m-b_4 wrapper-container\n\nWeight: 0\n\nStyleguide Recipes.PriceTable.Bento\n\n*/\n\n\n/*\nPrice Bento Price Card\n\n

    The Bento Pricing Card is a flexible pricing presentation component designed for purchase plan options. It supports multiple price tiers and optional notes, accommodating varied member types and durations. This component ensures consistent styling, responsive behavior, and semantic clarity across different purchase contexts.

    Use when: you need to visually present one or more pricing options with supporting content like membership type and terms.

    Do not use when: displaying simple, single-line prices or ungrouped price information not related to purchasing tiers.

    \n\nprimary - Used for Member\nsecondary - Used for Non-Member\naccent - Used for Any Reduced Pricing\n\n\nMarkup: \n
  • \n
    \n

    {{ modifier_class }}

    \n
    \n
    \n
    \n

    $900/5 year
    purchase plan

    \n
    \n
    \n \n \n \n \n or\n \n \n \n \n
    \n
    \n

    $300/1 year
    purchase plan

    \n
    \n
    \n
    Annual ABIM MOC fee*
    \n
    • \n\nNote: This is a strict structured component so all cards must match eachother content models. Keep it Apples to Apples!\n\nWeight: 0\n\nStyleGuide Sub.Recipe.PriceTable.Bento.Card \n\n*/\n\n\n.triple-bento{\n display:grid;\n grid-template-columns:100%;\n grid-template-rows: auto auto auto;\n grid-template-areas:\n \"a\"\n \"b\"\n \"c\";\n\n & li:nth-child(1){\n grid-area: a;\n }\n & li:nth-child(2){\n grid-area: b;\n }\n & li:nth-child(3){\n grid-area: c;\n }\n}\n@container ((width > #{map-get($breakpoints, sm)}) and (width < #{map-get($breakpoints, lg)}) ) {\n .triple-bento{\n grid-template-columns: 7fr 5fr;\n grid-template-rows: auto auto;\n grid-template-areas:\n \"a c\"\n \"b c\";\n }\n}\n\n@container ( width > #{map-get($breakpoints, lg)} ) {\n .triple-bento{\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-rows: auto;\n grid-template-areas:\"a b c\";\n }\n}\n\n\n\n",null,".product-grid{\n display:grid;\n --matrix-height-count:4;\n grid-template-rows: repeat(var(--matrix-height-count),max-content);\n}\n.topic-subgrid {\n display: grid;\n grid-template-rows: subgrid;\n grid-row: span var(--matrix-height-count);\n // unset this defaults to be one column wide cells.\n}\n\n\n\n/*\nProduct Matrix\n\n

    The Product Matrix component displays SAP product tracks in a responsive grid layout, allowing users to quickly view program names, focus areas, event dates, and relevant topics. Each product is color-coded according to its associated clinical pathway for immediate recognition and clarity. Subgrids are employed within each product block to ensure content stacks accessibly and cleanly from desktop to mobile views, maintaining visual hierarchy and legibility.

    This component is ideal for organizing multiple learning tracks or modules with aligned schedules and curriculum. Use when visual grouping and intuitive scanning of multiple product options are required.

    \n\nMarkup:\n
    \n

    Remind Yourself of the 2025 CMP Dates & Topics

    \n \n
    \n\n\nMarkupWrapperClasses: p_4\n\nSubComponents:\nSub.CMP.ProductMatrix.Item - Product Matrix Item\n\nWeight: 0\n\nStyleguide: Recipes.CMP.ProductMatrix\n*/\n\n\n/*\nProduct Matrix Item\n\n

    This component represents a single SAP product within the Product Matrix. It includes a visually distinct header with branding, a title, and clinical focus. Event dates and curriculum topics are presented in vertically stacked sections, and a call-to-action link at the bottom directs users to the full SAP page. Background and text colors reflect clinical identity, aiding recognition and scanning. Grid and spacing utilities ensure responsive behavior across breakpoints.

    Use this component inside a larger Product Matrix layout when promoting individual learning tracks. Ideal for overview pages or dashboards where clear segmentation by topic is required.

    \n\n.special - this pathway color represents ACCSAP\n.invt - this pathway color represents CATHSAP\n.arr - this pathway color represents EPSAP\n.hf - this pathway color represents HFSAP\n\nMarkup:\n
  • \n
    \n \n

    ProductNameSAP

    \n Product Tagline\n \n     \n
    \n
    \n
      \n
    • September 13 - 21, 2025
      • \n
    • November 15 - 23, 2025
      • \n
    \n
    \n
    \n
      \n
    • Case Selection & Management
      • \n
    \n
    \n
    \n Go to SAP Page\n
    \n
    • \n\nNote:\n

    This component will render incorrectly if it is not within the parent grid that helps with its spacing and alignments.

    \n\nMarkupWrapperClasses: p_4\n\nWeight: 0\n\nStyleguide: Sub.CMP.ProductMatrix.Item\n*/\n"]}