Weight:20
Styleguide Sub.Data.Sponsor.Address
*/
/*
Logo
Description:
Logo of the Company
Markup:
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Sub.Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Sub.Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
Website
Weight:26
Styleguide Sub.Data.Sponsor.WebLink
*/
/* Nav Recipes.00x */
/*
Call to Action Buttons
Description: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.
Sign Up - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.
Purchase - Used to prompt users to make a purchase. It creates a sense of urgency and directs users to complete a transaction for a product or service.
Learn More - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.
Subscribe - Used to encourage users to subscribe to a newsletter, mailing list, or updates from a website or company. It aims to build a relationship with users and keep them engaged.
Get Started - Used to initiate user onboarding or guide users through the first steps of using a product or service. It prompts users to begin their journey and experience the offering.
Markup:
NOTE: The Call to Action Button component is ideal for creating prominent buttons that attract user attention and encourage them to take a specific action, such as signing up, making a purchase, or exploring more content.
Weight:1000
Styleguide HTML.Inputs.Button.CTA
*/
/*
Buttons
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button
*/
/*
Buttons Small
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.SM
*/
/*
Buttons Large
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.LG
*/
/* Recipes.40 */
.address {
font-style: unset;
}
@media only screen and (min-width: 640px) {
.reverse-indent {
display: inline-block;
width: 100%;
margin-left: 1em;
padding-right: 1em;
text-indent: -1em;
}
.reverse-indent:after {
display: table;
clear: both;
content: "";
}
}
/*
Generic Footer
This defines the web footer.
Markup:
SubComponents:
Sub.Component.Navigation.Footer.Address - Addresses
Sub.Component.Navigation.Footer.Social - Social Links
Sub.Component.Navigation.Footer.ACCProductLinks - Sister Sites
Sub.Component.Navigation.Footer.Subfooter - Sub Footer
Sub.Component.Navigation.Footer.Cite - Citation for the Site
Weight: 40
Styleguide Component.Navigation.Footer
*/
/*
Sub Footer
Description: ACC has some basic legal information that should be on every property.
Markup:
Weight: 0
Styleguide Sub.Component.Navigation.Footer.Subfooter
*/
/*
Cite and Copyright
Contains copy right
Markup:
MarkupWrapperClasses:
texture_dark p_4 max-w_30
Styleguide Sub.Component.Navigation.Footer.Address
*/
/*
Fat Footers Links
Footers in the ACC sometimes have fat footers with a list of categories and links.
Markup:
MarkupWrapperClasses:
texture_dark p_4
Styleguide Component.Navigation.Footer.Fat-Footer-Links
*/
/*
ACC Product Links
Links to the other major products in the ACC portfolio
Markup:
MarkupWrapperClasses:
texture_dark p_4
Styleguide Sub.Component.Navigation.Footer.ACCProductLinks
*/
/*
Social Links
The college has a collection of social or secondary platforms we interact with.
Markup:
Stay Connected
MarkupWrapperClasses:
texture_dark p_4 max-w_40
Styleguide Sub.Component.Navigation.Footer.Social
*/
/* Nav Recipes.50 */
/*
Quick Utility Links
Quick Links are only text links that are used for special cross marketing to sister sites and utility pages like about, home, extra.
Markup:
Weight:50
Styleguide Component.Navigation.QuickLinks
*/
/* Nav Recipes.04x */
/*
Advertisment Spaces
Advertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces.
Markup:
advertisment
MarkupWrapperClasses:
max-w_30
Styleguide Component.Advertisement
*/
/* content Recipes.100 */
/*
Social Links
The social links From the Footer.
Markup:
Styleguide Component.Navigation.SocialLinks
*/
/*
Social Links Monochrome
The social links can be restyled to be smaller.
Markup:
Styleguide Component.Navigation.SocialLinks.Mono Chrome
*/
/*
Social Links Smaller
The social links can be restyled to be smaller.
Markup:
Styleguide Component.Navigation.SocialLinks.Smaller
*/
/*
Cookie Banner
Description: This page is the root of the page. The cookie banner was used to display a message to the user that the site uses cookies. The user can click on the banner to dismiss the message.
The system will present user a pop-up banner that appears when first accessing the site, which will include text, links and an Accept/OK button.
The system will allow the user to dismiss the pop up by clicking the Accept/OK button
The system will allow the ACC Admin to "reset" the pop up banner, which will show it to all users and require them to click accept again to dismiss it.
The system will track and record the users date/time when they accepted the pop up.
Markup:
This site uses cookies to improve your experience.
MarkupWrapperClasses: relative
NOTE: This design needs to have the 'fixed' class changed to fixed in the parent container of the attached code when in real implementations. 'fixed' is used in the documentation page so it would not break free of the documentation area into the bottom of the browser page.
Weight:100
Styleguide Component.CookieBanner
*/
/* content Recipes.150 */
/*
Ordered Cards
Having cards order on page to help users find there way through steps can some times be very helpful.
Markup:
First it is bad
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Then it is not right
This is a card.
It has an easy to override visual style, and is appropriately subdued.
At last it is good
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Weight: 150
Styleguide Recipes.Ordered Cards
*/
/* content Recipes.250 */
/*
Read More Arrow
This stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.
Markup:
StyleGuide Sub.Component.Common.ReadMoreArrow
*/
/*
600w x 300h
Markup:
https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.600x300
*/
/*
600w x 400h
Markup:
https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.600x400
*/
/*
1200w x 300h
Markup:
https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.1200x300
*/
/*
375w x 250h
Markup:
https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.375x250
*/
/*
320w x 300h
Markup:
https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.320x300
*/
/*
1024w x 256h
Markup:
https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.1024x256
*/
/*
Aspect 21x9
Markup:
https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.21x9
*/
/*
Aspect 16x9
Markup:
https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.16x9
*/
/*
300w x 400h
Markup:
https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.300x400
*/
/*
square
Markup:
https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.Square
*/
/*
Max 20 Character
Markup:
Di dolores (20 Chars)
Styleguide Sub.Placeholder.Text.20ch
*/
/*
Max 30 Character
Markup:
Commodi dolores (30 Characters)
Styleguide Sub.Placeholder.Text.30ch
*/
/*
Max 40 Character
Markup:
Rerum libg dero pariatur (40 Characters)
Styleguide Sub.Placeholder.Text.40ch
*/
/*
Max 60 Character
Markup:
Sed ut perspiciatis unde omnis iste natus er (60 Characters)
Styleguide Sub.Placeholder.Text.60ch
*/
/*
Max 80 Character
Markup:
Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)
Styleguide Sub.Placeholder.Text.80ch
*/
/*
Max 100 Character
Markup:
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)
Styleguide Sub.Placeholder.Text.100ch
*/
/*
Max 150 Character
Markup:
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
Styleguide Sub.Placeholder.Text.150ch
*/
/*
Max 200 Character
Markup:
Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)
Styleguide Sub.Placeholder.Text.200ch
*/
/*
Max 250 Character
Markup:
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Styleguide Sub.Placeholder.Text.250ch
*/
/*
Grid - Triple Card Holder
Markup:
columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
NOTE:
Triple up cards with shaded background are used only in full screen pages
Styleguide Sub.ClassList.Grid.Card.Split-Triple
*/
/*
Triple Split with Sidebar
Markup:
columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left
NOTE:
Triple up splits
Styleguide Sub.ClassList.Grid.TripleLG
*/
/*
Grid - Card Holder - 50 split
Markup:
columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid
NOTE:
split layouts great for half page cards
Styleguide Sub.ClassList.Grid.Split-50
*/
/*
GridList Triple on XL
Markup:
columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none
Styleguide Sub.ClassList.Grid.TripleXL
*/
/*
GridList Item Basic
Markup:
flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius
NOTE:
Icon and Header use differnt classes because they are a simpler component.
Styleguide Sub.ClassList.Grid.Item
*/
/*
Subs
Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as
sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data
points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone
but are composed into larger, reusable structures.
These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,
or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials
({{> 'Sub.X' }}) to render dynamic or variable content within patterns.
Common use cases: - {{> 'Sub.Sub.Data.Duration'}} — Displays session duration -
{{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier -
{{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button
NOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.
Styleguide Sub
*/
/*
Placeholders
Placeholders are just used across the styleguide. The can be either text or image stand ins for the UI.
Weight: 9999
Styleguide Sub.Placeholder
*/
/*
Recipe
Patterns that are used through out the refactors on ACC.org
Weight: 1000
Styleguide Sub.Recipe
*/
/*
Articles
There are multiple sub components that are used through out the most common page type on ACC.org
Weight: 1000
Styleguide Sub.Recipe.Article
*/
/*
Data
There are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.
Weight: 500
Styleguide Sub.Data
*/
/*
Class Lists
Arches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items
Weight: 2000
Styleguide Sub.ClassList
*/
/*
Rich Text
Markup:
Lorem Ipsum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Table of Contents
How to Prepare for the Boards
General Principles of Cardiovascular Medicine
Arrhythmias
Coronary Artery Disease
Heart Failure & Cardiomyopathy
Valvular Disease
Pericardial Disease
Congenital Heart Disease
Vascular Diseases
Systemic Hypertension and Hypotension
Pulmonary Circulation Disorders
Systemic Disorders Affecting the Circulatory
System
Weight: 100
Styleguide Bootstrap.Pagination
*/
/*
Tabs
A simple way to show small groups of content that should have the same level of reading hierarchy.
Markup:
consectetur adipisicing elit
Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.
Lorem ipsum dolor sit
Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.
MarkupWrapperClasses:
SubComponents:
Sub.Component.Structures.Tabs.Tab.LinkActives - Active Tab
Sub.Component.Structures.Tabs.Tab.Link - Tab
Sub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab
Caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Structures.Tabs.
*/
/*
Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Markup:
Weight: 0
Styleguide Sub.Component.Structures.Tabs.TabDark
*/
/*
Tab Dark: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4
Weight:0
Styleguide Sub.Component.Structures.Tabs.TabDark.Link
*/
/*
Tab Dark: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4
Weight:0
Styleguide Sub.Component.Structures.Tabs.TabDark.LinkDisabled
*/
/*
Tab: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.LinkActive
*/
/*
Tab: Basic
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.Link
*/
/*
Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.LinkDisabled
*/
/*
UI Tabs
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
Markup:
{{> Sub.Placeholder.Typography }}
{{> Sub.Placeholder.Typography }}
MarkupWrapperClasses: p_4
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Structures.UITabs
*/
/*
UI Tabs Overflow
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
Markup:
{{> Sub.Placeholder.Typography }}
{{> Sub.Placeholder.Typography }}
MarkupWrapperClasses: p_4
caution: This item is not finalized and might be subject to change
Note: Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min.
Weight:0
Styleguide Component.Structures.UITabs.Overflow
*/
/*
Tab: Default
Description: Active State of Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
Link
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: flex ul_none
Weight:0
Styleguide Sub.Component.Structures.UITabs.Tab
*/
/*
Tab: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex ul_none
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Sub.Component.Structures.UITabs.Tab.LinkActive
*/
/*
Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: flex ul_none
Weight:0
Styleguide Sub.Component.Structures.UITabs.Tab.LinkDisabled
*/
/*
Scroll Overflow Script
Description: Javascript is needed to make the scrolls work on the page
Markup:
MarkupWrapperClasses: p_4
caution: This item is not finalized and might be subject to change
Weight:0
Styleguide Component.Structures.UITabs.Script
*/
/*
Sidebar Nav
Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.
Markup:
Weight:-1000
MarkupWrapperClasses: max-w_25 m_auto
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Styleguide Component.Navigation.Sidebar
*/
/*
Parent NavItem
Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.
Markup:
Weight: -100
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.Parent
*/
/*
Child NavItem
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
default - No added class
active - Nav Item changes its decoration if this the page the user is on.
Markup:
Weight: 10
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.Child
*/
/*
Toggle Child
Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.
default - the toggle when it doesn't have an active class still shades on hover
active - shade the toggle
Markup:
Weight: -10
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.ChildToggle
*/
/*
Child NavItem With Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Markup:
Weight: 15
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.ChildWithChildren
*/
/*
Child NavItem With Grand Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Markup:
Weight: 15
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Styleguide Component.Navigation.Sidebar.ChildWithGrandChildren
*/
/*
Great Grandchild NavItem
Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.
default - No added class
active - Nav Item changes its decoration if this the page the user is on.
Markup:
Weight: 100
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.GreatGrandchild
*/
/*
Bootstrap Toggle Rotation
The toggles for bootstrap collapses use a `+` icon that twists to an `x` when the elements doesn't have `collapsed` or `show` as a class. to reduce confusion the class has a set rotation and speed attached to it. `a:rotation` is applied to the tow specific icons `fa-times` and `fa-chevron-up` only.
These classes are effected by the parent having `collapsed` state.
expanded - when the associated content is expanded the toggle will look like this
collapsed - when the associated content is collapsed the class is added to the toggle and it will look like this.
Markup:
Weight: 100
Styleguide Component.Navigation.Toggle.Rotation
*/
/*
Toggle
Toggle elements of a collapse with user feed back of the icon rotating.
#targetName - the name of the target of the collapse
Markup:
Weight: -10
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle
*/
/*
Toggle Chevron
Toggle elements of a collapse with user feed back of the icon rotating.
#targetName - the name of the target of the collapse
Markup:
Weight: -80
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle.Chevron
*/
/*
Collapse Toggle Advanced
Toggle elements of a collapse with user feed back of the icon morphing.
#targetName - the name of the target of the collapse
Markup:
Weight: -100
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle.Advanced
*/
/*
Collapse Toggle Advanced with Square
Toggle elements of a collapse with user feed back of the icon morphing.
#targetName - the name of the target of the collapse
Markup:
Weight: -90
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle.AdvancedSquare
*/
/*
Accordion
In content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.
Markup:
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Accordion
*/
/*
Accordion Child
Description: Sometimes the content needs be collapsed at a secondary level to make it scannable.
Markup:
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Accordion.Child
*/
/*
Accordion Nested Example
In content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.
Markup:
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem.
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Accordion.Nested
*/
/*
ACC.org Footer
The Footer of ACC.org
Markup:
Note:
Weight: -1
Styleguide Component.Navigation.Footer.Complete
*/
/*
Page Hub
A collection of links that collapses the children of the nav item.
Markup:
Weight: 0
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Styleguide Component.Navigation.PageHub
*/
/*
Page Hub Single
A collection of links that collapses the children of the nav item.
Markup:
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight: 0
Styleguide Component.Navigation.PageHub.Single
*/
/*
Page Hub Group
A collection of links that collapses the children of the nav item.
Markup:
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight: 0
Styleguide Component.Navigation.PageHub.Group
*/
/*
Page Hub Children
Child link item for the page hub.
Child Link - Text of the link
Markup:
MarkupWrapperClasses: c_primary font_ui ul_none
Weight:0
Styleguide Component.Navigation.PageHub.ChildrenLink
*/
/*
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:
asdf fasdfa sd asdf s adffas dfsdasdf
Need Help
Note: These are styled heavier then a normal h2 and there are for eaiser understanding that this is a sperator of major content areas.
MarkupWrapperClasses: p_5 c_whtie
Weight: 100
Styleguide: Recipes.Page.BreakHeadline
*/
/*
Image-Text Panel with CTA Link
This layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.
Markup:
{{> Sub.Placeholder.Text.80ch }}
{{> Sub.Placeholder.Text.200ch }}
Note:
Do use when it is a single directing action for the user, and when content would be too much for a card.
Do NOT use when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.
MarkupWrapperClasses:
p_4 reading-typography wrapper-container
Weight:
0
Styleguide:
Recipes.Page.Panel.image-text-cta
*/
/*
Image-Text Panel with CTA Link Reverses
This layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is formated so the image always stacks above the content when in mobile. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.
Markup:
{{> Sub.Placeholder.Text.80ch }}
{{> Sub.Placeholder.Text.200ch }}
Note:
Do use when it is a single directing action for the user, and when content would be too much for a card.
Do NOT use when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.
MarkupWrapperClasses:
p_4 reading-typography wrapper-container
Weight:
0
Styleguide:
Recipes.Page.Panel.image-text-cta.alt
*/
/*
Small Image-Text Panel with CTA Link
This is the alternate layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.
Do use when it is a single directing action for the user, and when content would be too much for a card.
Do NOT use when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.
! Strict Content Constraints ! this design is very structured and requires strict adhearnce.
FORMAT:
Headline - Max Characters 60
Content - Max Characters 150
SubComponents:
Sub.Placeholder.Image.375x250 - Image 375w x 250w
HTML.Inputs.Button.SM - Small Shade Button
MarkupWrapperClasses:
wrapper-container
Weight:
0
Styleguide:
Recipes.Page.Panel.small-image-text-cta
*/
/*
Small Image-Text Panel with CTA Link (Alternate)
This is the alternate layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.
Note:
The color in the product name uses the pathway color codes
SubComponents:
Sub.Placeholder.Image.320x300 - Image 320x300
Sub.Placeholder.Image.600x300 - Image 600x300
Sub.Placeholder.Image.1024x256 - Image 1024x256
Sub.Placeholder.Image.1200x300 - Image 1200x300
Styleguide: Recipes.Page.Product.Banner
*/
/*
Product CTA
This call-to-action component highlights a specific product or educational resource, pairing branded imagery with concise promotional content and a prominent button. Use it to drive conversions for key offerings, such as board prep tools or certifications. Place in sidebars, landing pages, or learning resource hubs for maximum visibility.
DATA:
SubComponents:
HTML.Inputs.Button.CTA - CTA Button
Sub.Placeholder.Image.320x300 - Image 320x300
Sub.Placeholder.Image.16x9 - Image 455x195
MarkupClasses:
Note:
The color in the product name uses the pathway color codes
Styleguide: Recipes.Page.Product.Followup-CTA
*/
/*
Grid List
This component presents a list of highlighted information, each item is accompanied by an icon. Each item in the grid combines an icon with the corrisponding content.
Markup:
NOTE: The read more is treated differently.
MarkupWrapperClasses: reading-typography wrapper-container
SubComponents:
Sub.Recipe.GridList.Item - Icon and Header
DATA:
Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL
Styleguide Recipes.GridList
Weight: 0
*/
/*
Grid List with Descriptions
This component presents a list of highlighted information with descripition
Markup:
Highlighted Content with Icon, Header, and Description. Links in descriptions optional
SubComponents:
Sub.Recipe.GridList.IconText.Item - Icon with Discription
Sub.Recipe.GridList.IconText.Item - Icon with Discription with link
Sub.Recipe.GridList.LinkedIconText.ItemReadMore - Icon with Read More
MarkupWrapperClasses: reading-typography wrapper-container
DATA:
Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL
Styleguide Recipes.GridList.IconText
Weight: 0
*/
/*
Grid List with Linked Descriptions
This component presents linked description with a hover effect to help each item showcase it is clickable.
Markup:
Linked Highlighted Content with Icon, Header, and Description. Links in descriptions optional
SubComponents:
Sub.Recipe.GridList.IconText.Item - Linked Icon and Text
DATA:
Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL
NOTE: The read more is treated differently.
MarkupWrapperClasses: reading-typography
Styleguide Recipes.GridList.LinkedIconText
Weight: 0
*/
/*
Grid List with Grouped List
This component presents a list of highlighted information, each item is accompanied by an icon. Each item in the grid combines an icon with the corrisponding content.
Markup:
Highlighted Grouped List with Category Icon and Header
Note:
These shouldn't use a read more.
MarkupWrapperClasses: reading-typography wrapper-container
SubComponents:
Sub.Recipe.GridList.GroupingList.Item - Icon and Bulleted List
DATA:
Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL
Styleguide Recipes.GridList.GroupList
Weight: 0
*/
/*
Icon and Header
The Compound Icon and Header is the most basic of the grid list content items and needs to have a link for each item.
Markup:
MarkupWrapperClasses: reading-typography wrapper-container max-w_30
Styleguide Sub.Recipe.GridList.Item
Weight: 10
*/
/*
Icon and Description
The Compound Icon and Text List Item is a reusable component designed to present key content alongside a relevant visual icon. This pattern supports skimmability, clarity, and strong information hierarchy, making it ideal for benefit statements, feature lists, or modular marketing blocks.
Markup:
nihil amet distinctio
Rerum modi quis Nobis id a harum enim rem in ipsum. Natus rem est dolorem..
NOTE: If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.
MarkupWrapperClasses: reading-typography wrapper-container max-w_30
DATA:
Sub.ClassList.Grid.Item - Gridlist Item Classes
Styleguide Sub.Recipe.GridList.IconText.Item
Weight: 10
*/
/*
Icon and Description with Link
The Compound Icon and Text List Item is a reusable component designed to present key content alongside a relevant visual icon. This pattern supports skimmability, clarity, and strong information hierarchy, making it ideal for benefit statements, feature lists, or modular marketing blocks.
Markup:
Pass Your Boards with Confidence
Nostrum et eveniet perspiciatis in mollitia et enim consequatur dolorem deserunt Action Link.
NOTE: If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.
MarkupWrapperClasses: reading-typography max-w_30
DATA:
Sub.ClassList.Grid.Item - Gridlist Item Classes
Styleguide Sub.Recipe.GridList.IconText.ItemTextLink
Weight: 10
*/
/*
Icon & Description: Read More
The Read More Icon and Description is intentionally designed differntly.
Markup:
NOTE: This should be the design when you are including a read more action to go with a Grid List with Text and Descriptions.
MarkupWrapperClasses: reading-typography wrapper-container max-w_30
DATA:
Sub.ClassList.Grid.Item - Gridlist Item Classes
SubComponents:
Sub.Component.Common.ReadMoreArrow - Read More Arrow
Styleguide Sub.Recipe.GridList.LinkedIconText.ItemReadMore
Weight: 10
*/
/*
Linked Icon & Description
The Compound Icon and Text List Item that is linked an assoicated action is styled differently with a background hover effect.
Markup:
NOTE: If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.
MarkupWrapperClasses: reading-typography wrapper-container max-w_30
DATA:
Sub.ClassList.Grid.Item - Gridlist Item Classes
Styleguide Sub.Recipe.GridList.LinkedIconText.Item
Weight: 10
*/
/*
Grouping List Item
A flexible layout pattern used to present concise feature groupings or content benefits in a visually structured way. Each group includes icon, group heading, and a short list of actionable or informative bullet points. Use this pattern to highlight service categories, user benefits, or grouped resources.
The consistent visual hierarchy ensures scannability and reinforces clarity, making it effective for marketing pages and dashboards.
Single Icon Quote is for scannable and large collections
{{> Recipes.Quote.Scannable }}
{{> Recipes.Quote.Scannable }}
{{> Recipes.Quote.Scannable }}
{{> Recipes.Quote.Scannable }}
Quotes with Photos are for visual interest max to 3
{{> Recipes.Quote.Decrative }}
{{> Recipes.Quote.Decrative }}
{{> Recipes.Quote.Decrative }}
SubComponents:
Recipes.Quote.Decrative - Quote Card
Recipes.Quote.Scannable - Quote Single Icon
Note: 250 characters on average about 40 words meaning it is 10 seconds or time to read. Quote should be valuable because our users time is valueable.
Format:
Content - 250 characters should be able to caputure valuable informatioon in a quote.
MarkupWrapperClasses: reading-typography font-size_up
Styleguide Recipes.Quote
Weight: 0
*/
/*
Scannable Blockquote
This component presents a styled blockquote element. The blockquote starts with an iconic quotation mark, followed by the actual quote text and a citation. The design uses flexible box model to ensure icon and text alignment.
Markup:
{{> Sub.Placeholder.Text.250ch }}
{{> Sub.Data.Member.FullName }}
MarkupWrapperClasses: reading-typography font-size_up wrapper-container
Data:
Sub.Data.Member.FullName - Full Name
NOTE:
This design doesn't allow inclusion of photos because it is intentionally scannable.
Styleguide Recipes.Quote.Scannable
Weight: 0
*/
/*
Decrative Blockquote
This component is a blockquote that has been designed with an emphasis on style. It starts and ends with iconic quotation marks, followed by the actual quote text and a citation. The design uses flexible box model to ensure that the text and the quote icons align correctly. It also applies shadows, borders, and background colors to make the blockquote visually distinct.
Markup:
MarkupWrapperClasses: reading-typography font-size_up p-x_5 wrapper-container
Note: This component can drop the photo.
Data:
Sub.Data.Member.FullName - Full Name
Sub.Data.Member.Title - Title
Styleguide Recipes.Quote.Decrative
Weight: 0
*/
/*
Triple Pricing Bento
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.
Adapts layout responsively from side-by-side (desktop) to stacked (mobile).
Color-coded backgrounds improve segmentation.
Use when side-by-side price comparisons are needed.
Avoid when only one price is shown — use a simple card instead.
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.
primary - Used for Member
secondary - Used for Non-Member
accent - Used for Any Reduced Pricing
Markup:
{{ modifier_class }}
$900/5 year purchase plan
or
$300/1 year purchase plan
Note: This is a strict structured component so all cards must match eachother content models. Keep it Apples to Apples!
Weight: 0
StyleGuide Sub.Recipe.PriceTable.Bento.Card
*/
.triple-bento {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 100%;
grid-template-areas: "a" "b" "c";
}
.triple-bento li:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
}
.triple-bento li:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: b;
}
.triple-bento li:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
-ms-grid-row: 3;
-ms-grid-column: 1;
grid-area: c;
}
@container ((width > 460px) and (width < 1024px) ) {
.triple-bento {
grid-template-rows: auto auto;
grid-template-columns: 7fr 5fr;
grid-template-areas: "a c" "b c";
}
}
@container ( width > 1024px ) {
.triple-bento {
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "a b c";
}
}
/*
Price Table
A collection of price points and the various features of each at a glance.
Markup:
NOTE: Depending on the content and width of the area where these are being placed the amount of columns should be adjusted at different breakpoints.
MarkupWrapperClasses:
w_100 p_5:md p_4 bg_black-1 wrapper-container
DATA:
Sub.ClassList.Grid.TripleLG - Grid Classes Triple @ LG
SubComponents:
Sub.Recipe.PriceTable.Card.Light - Light Background Card
Sub.Recipe.PriceTable.Card.Dark - Dark Background Card
Weight: -1000
Styleguide Recipes.PriceTable.Comparison
*/
/*
Price Table Simple
A collection of price points at a glance.
Markup:
NOTE: Depending on the content and width of the area where these are being placed the amount of columns should be adjusted at different breakpoints.
MarkupWrapperClasses:
w_100 p_5:md p_4 bg_black-1 wrapper-container
DATA:
Sub.ClassList.Grid.TripleLG - Grid Classes Triple @ LG
SubComponents:
Sub.Recipe.PriceTable.Card.Simple.Light - Light Background Card
Sub.Recipe.PriceTable.Card.Simple.Dark - Dark Background Card
Weight: -1000
Styleguide Recipes.PriceTable.ComparisonSimple
*/
/*
Price Table Card Light
A combination UI that shows the price point and value for a product with a nav button to start the purchase.
Markup:
Basic
$39/Month
{{> Sub.Placeholder.Text.150ch}}
Quality-focused
Phased
Automated
Cross-platform
MarkupWrapperClasses:
bg_black-1 p_4 max-w_30 flex flex_row:lg flex_column gap_5 ul_none c_black-6 font_copy font_0
Weight: 0
Styleguide Sub.Recipe.PriceTable.Card.Light
*/
/*
Price Table Card Dark
There is the preferred plan in the price table it is best to swap the colors and use the primary coloring.
Markup:
This callout highlights the availability of the associated mobile app, offering a quick path for users to download the app and access the product on the go. It typically features app store buttons, branded device imagery, a concise headline, and a supporting subtext. Use this component when promoting the app in educational or membership-driven contexts.
Headline: Emphasizes mobility and learning benefits.
Subtext: Brief, informative, with brand reinforcement.
App Store Buttons: Use official assets with proper spacing.
Visuals: Incorporate realistic device mockups that align with ACC branding.
Markup:
Weight: 0
Styleguide: Recipes.MobileAppCallout
*/
/*
Content List
Content List Subcomponents
Weight: 0
Styleguide Sub.Component.ContentList
*/
/*
Calendar Block
Calendars show the range of dates from start to end of the live moments of the date. It doesn't include the extended dates of on demand.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Component.ContentList.Item.Calendar
*/
/*
Image Thumbnails
images thumbnails are used to display the images associated with the content. the aspect of the images are 1:1.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Component.ContentList.Item.Thumbnail
*/
/*
Credit Chiclets
This pattern is exactly the same with the needed markup class of the credit color.
CNE - Nursing Education
CME - Medical Education
Markup:
{{ modifier_class }}1
NOTE:
This pattern relies on the the inclusion of the credit color codes style sheet.
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Component.ContentList.Item.SingleCredit
*/
/*
Credits
Credits are used to display the value of the content and what type of certification it offers.
Markup:
MarkupWrapperClasses:
SubComponents:
Sub.Component.ContentList.Item.SingleCredit - Credit Chiclets
Weight:0
Styleguide Sub.Component.ContentList.Item.Credits
*/
/*
Content List Item
This is how content items should be displayed in list form.
Markup:
editor’s pick
{{> Sub.Component.ContentList.Item.Thumbnail }}
Cardiovascular Team Section
Long-Term Cardiovascular Outcomes After Bariatric Surgery in the Medicare Population | Journal of the American College of Cardiology
The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...
Weight: 100
SubComponents:
Sub.Component.ContentList.Item.Credits - Credits
Sub.Component.ContentList.Item.Thumbnail - Thumbnail
NOTE: Merge all the things.
Styleguide Component.ContentList
*/
/*
Content List Item: Event
Markup:
{{> Sub.Component.ContentList.Item.Calendar }}
Live Meetings
ACC Anywhere is a comprehensive digital library of more than 220 sessions from ACC.22. Purchase today and start expanding your knowledge of the field!
April 22, 2022 - March 01, 2023
On Demand Till:June 11, 2022
{{> Sub.Component.ContentList.Item.Credits }}
The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...
The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...
Weight: 0
NOTE: This has only one content row, headline is moved down into the rest of the content area.
Styleguide Component.ContentList.Guidelines
*/
/*
Content List Item: Images
Markup:
{{> Sub.Component.ContentList.Item.Thumbnail }}
Slides
Slide Set | 2022 AHA/ACC/HFSA Guideline for the Management of Heart Failure
A vertically split card component ideal for highlighting key initiatives or promotional content. Each card features a visual header and a structured text block containing a title, description, and a CTA button. Use these cards in pairs or grids to present multiple pieces of information with equal weight and visual balance.
Note:
Half Cards can have dual actions but the buttons should reflect the primary action as blue and the secondary should be the shade button.
MarkupWrapperClasses: columns_2:md columns_1 gap_6:lg gap_4 grid
SubComponents:
Sub.ClassList.Grid.Split-50 - Double Card Holder Classlist
Sub.Placeholder.Image.21x9 - Image 588w x 252w
Weight: 0
Styleguide: Recipes.Page.Cards.HalfPage
*/
/*
Half Page Card - Light
A vertically split card component ideal for highlighting key initiatives or promotional content. Each card features a visual header and a structured text block containing a title, description, and a CTA button. Use these cards in pairs or grids to present multiple pieces of information with equal weight and visual balance.
Note:
Half Cards can have dual actions but the buttons should reflect the primary action as blue and the secondary should be the shade button.
MarkupWrapperClasses: columns_2:md columns_1 gap_6:lg gap_4 grid
DATA:
Sub.ClassList.Grid.Split-50 - Double Card Holder Classlist
SubComponents:
Sub.Placeholder.Image.21x9 - Image 588w x 252w
Weight: 0
Styleguide: Recipes.Page.Cards.HalfPage.Light
*/
/*
Simple Card
A simple card component ideal for summarizing key content with a clear call to action, it maintains vertical rhythm and visual hierarchy.
Note:
Only 1 Action per card. This is to help with context of the action and focus.
MarkupWrapperClasses: columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
Weight: 0
DATA:
Sub.ClassList.Grid.Card.Split-Triple - Triple Card Holder Classlist
Styleguide: Recipes.Page.Cards.ThirdPage
*/
/*
Card with Inset Image
A simple card component with an inset image. Because of the image the headers and text should be more consise then the Simple Card.
Note:
Only 1 Action per card. This is to help with context of the action and focus.
MarkupWrapperClasses: columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
Weight: 0
FORMAT:
A promotional callout designed to encourage user engagement, typically placed after primary content. This basic variation uses minimal styling to emphasize clarity and focus on the call to action.
Note:
The CTA Description is optional
MarkupWrapperClasses: p_4
Weight: 0
Styleguide: Recipes.Page.FollowUpCTA.Basic
*/
/*
Follow Up CTA – Beveled Card
This variation enhances the CTA with a beveled white card set against a shaded background, drawing user attention through elevated visual hierarchy. Ideal for page breaks or key engagement moments.
Note:
The CTA Description is optional
MarkupWrapperClasses: p_4
Weight: 0
Styleguide: Recipes.Page.FollowUpCTA.BeveledCard
*/
/*
Follow Up CTA – Page Divider
Incorporates a horizontal divider to create a subtle transition between content blocks, maintaining visual flow while signaling the importance of the CTA.
Note:
The CTA Description is optional
MarkupWrapperClasses: p_4
Styleguide: Recipes.Page.FollowUpCTA.PageDivider
*/
/*
Structures Page Layouts
These are common pattern that are used to make column layouts on the page.
HideCodeBlock: false
Styleguide Structures.PageLayout
*/
/*
Base Page Layout
This layout provides a foundational structure for standard pages. It includes consistent spacing and alignment patterns but omits additional navigational elements like sidebars or complex grid arrangements. Ideal for simple content pages that need a reliable baseline layout.
Weight: 0
Styleguide Structures.PageLayout.Base
*/
/*
Fullscreen Patterns
Some page layouts only work when placed in fullscreen context.
Weight: 200
Styleguide Structures.PageLayout.Fullscreen
*/
/*
Page with Sidebar Patterns
Some page layouts only work when placed in main context when there is also a sidebar on the page becuase of reduced space.
Styleguide Structures.PageLayout.Sidebar
*/
/*
Intro Block - Fullscreen Page
Markup:
Main Content
Aside
{{> Component.Structures.PageLayout.demoStyles }}
MarkupWrapperClasses: space-holder colored-zones
Styleguide Structures.PageLayout.Fullscreen.Intro
*/
/*
Intro Block - Page with Side Bar
Markup:
content
aside
{{> Component.Structures.PageLayout.demoStyles }}
MarkupWrapperClasses: space-holder colored-zones
Styleguide Structures.PageLayout.Sidebar.Intro
*/
/*
Split Page - Pages with Side Bar
Markup:
{{> Component.Structures.PageLayout.demoStyles }}
DATA:
Sub.ClassList.Grid.TripleLG - Triple split on LG
MarkupWrapperClasses: space-holder colored-zones
Styleguide Structures.PageLayout.Sidebar.TripleSplitGrid
*/
/*
Podcast
A styled player for podcasts. Includes a content section, a list of related references, twitter links to the presenters, and an audio player interface with a Subscribe button.
Markup:
markupwrapperclasses:
p_4
SubComponents:
Sub.Recipe.Article.Podcasts.References - Related References
Sub.Recipe.Article.Podcasts.Twitter.List - TwitterList
Sub.Recipe.Article.Podcast.Player - Player
Styleguide Recipes.Article.Podcast
Weight: 0
*/
/*
Related References
An organized list of references or citations. This structure helps users to find additional resources or sources related to the content.
Markup:
Related References:
0000000000000000000000
0000000000000000000000
0000000000000000000000
MarkupWrapperClasses: reading-typography p_4
Styleguide Sub.Recipe.Article.Podcasts.References
Weight: 1000
*/
/*
Twitter Button
A styled button for linking to a Twitter profile. The button includes a Twitter icon and a username.
Markup:
Tweat_DrSoda
MarkupWrapperClasses: reading-typography
Styleguide Sub.Recipe.Article.Podcasts.Twitter.Button
Weight: 100
*/
/*
Twitter Link List
A list of Twitter profiles, each accompanied by a name. Provides an organized display for multiple Twitter links, which could be useful for events, authors, or featured users.
Markup:
Twitter Links:
Pepper H. Soda III, MD, FACC
{{> Sub.Recipe.Article.Podcasts.Twitter.Button }}
Pepper H. Soda III, MD, FACC
{{> Sub.Recipe.Article.Podcasts.Twitter.Button }}
MarkupWrapperClasses: reading-typography
SubComponents:
Sub.Recipe.Article.Podcasts.Twitter.Button - Twitter Button
Styleguide Sub.Recipe.Article.Podcasts.Twitter.List
Weight: 0
*/
/*
Podcast Player
A multimedia component designed specifically for audio playback. This player features controls for playing, pausing, adjusting volume, and more. It includes a fallback link for browsers that don't support HTML5 audio, as well as a prominent call to action to encourage podcast Subscription.
Markup:
MarkupWrapperClasses: reading-typography p_4
Styleguide Sub.Recipe.Article.Podcast.Player
Weight: 0
*/
.updateDecoration {
background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;
}
body {
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_copy);
}
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-weight: var(--font_regular);
font-family: var(--font-family_display);
}
h6, .h6 {
font-weight: var(--font_bold);
}
p {
line-height: 1.35;
}
ul,
ol {
line-height: 1.6;
}
kbd,
code,
samp,
var {
font-family: var(--font-family_mono);
}
form {
border-color: rgba(19, 18, 18, 0.38);
}
label {
font-weight: var(--font_bold);
}
label,input,
select,
textarea,
legend,
fieldset,
button {
color: currentColor;
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_ui);
}
input,
select,
textarea,
legend,
fieldset,
button {
box-sizing: border-box;
}
button,
[type=button],
[type=submit],
[type=reset], [type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
min-height: 1.5em;
padding: 4px 8px;
padding: 0.25rem 0.5rem;
border-width: thin;
border-radius: 6px;
border-color: rgba(19, 18, 18, 0.25);
line-height: 1.6;
}
input:focus,
select:focus,
textarea:focus {
outline-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
box-shadow: inset 1px 1px 2px 2px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12), inset 2px 2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1), inset -2px -2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
}
[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
width: 100%;
}
input,
select,
textarea,
legend,
fieldset,
button {
box-sizing: border-box;
}
[type=color] {
width: 24px;
width: 1.5rem;
height: 24px;
height: 1.5rem;
padding: 0;
border-color: rgba(19, 18, 18, 0.25);
}
[type=radio],
[type=checkbox] {
padding-left: 8px;
padding-left: 0.5rem;
}
button,
[type=button],
[type=submit],
[type=reset] {
width: auto;
border-radius: 6px;
}
fieldset {
margin: 8px 0;
margin: 0.5rem 0;
padding: 8px 16px;
padding: 0.5rem 1rem;
border-color: rgba(19, 18, 18, 0.1);
}
/*
Basic Inputs
Arches is strongly based on utility classes styling everything so it commonly just builds on either the base of the browser defaults or the defaults of the framework that is built on. This is a kitchen sink of html elements so you can see how this variation will effect html. There is No basic styling around the pure DOM with the utility class only. To get full brand styling use a framework based version of arches.
Styleguide HTML.Inputs
*/
/*
Text Inputs
Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.
Markup:
Utility Class
Bootstrap
Styleguide HTML.Inputs.Text
*/
/*
Inputs UC
Utility Class only build inputs
Markup:
Weight:100
Styleguide HTML.Inputs.All
*/
/*
Table
Basic Tables with this variation of Arches. Please note that the html can have a different look depending on the brand or the framework the variation is built on.
Tables can have captions now.
Person
Number
Third Column
Someone Lastname
900
Nullam quis risus eget urna mollis ornare vel eu leo.
Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person
1500
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One
2800
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
Styleguide HTML.BasicTable
*/
table {
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_ui);
}
table caption {
padding: 8px;
padding: 0.5rem;
}
th,
td {
padding: 4px 8px;
padding: 0.25rem 0.5rem;
text-align: start;
}
thead {
padding: 4px 8px 0;
padding: 0.25rem 0.5rem 0;
font-weight: var(--font_bold);
}
tbody {
padding: 0 8px;
padding: 0 0.5rem;
}
tfoot,
caption {
padding: 0 8px 4px;
padding: 0 0.5rem 0.25rem;
font-size: 14.222px;
font-size: 0.8888888889rem;
}
/*
Design Base
Arches is design inspired by a pad of paper in the hand. Subtle Textures and Layer shadows keep the readability very high.
Weight: -1000
Styleguide DesignBase
*/
/*
Fonts
The ACC is focused on stable, conservative, clean fonts. Roboto Slab is the standard serif fonts across all products at the ACC.
Styleguide DesignBase.Fonts
*/
/*
Accent Roboto Slab
A beautiful Accent font that shows a complexity and texture to the fonts used in the design.
Roboto Slab
font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab"
RS
Accent Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: -10
Styleguide DesignBase.Fonts.Accent
*/
/*
Display: Maven Pro
A Slick font that has a slight interest used for headers and UI.
Maven Pro
font-family: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif
MP
Display Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: -5
Styleguide DesignBase.Fonts.Display
*/
/*
Copy: Open Sans
A clean font for content and text of none UI elements.
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: 1
Styleguide DesignBase.Fonts.UI
*/
/*
Icons: Font Awesome
The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications.
The organization uses version 6 of Font Awesome's icon sets.
The ACC recognizes that icons convey meaning and has developed an icon dictionary to ensure consistent usage of icons throughout its digital platforms. This approach enhances the user experience by providing clear and concise communication through the use of symbols, while the Font Awesome library enables the ACC to quickly and efficiently incorporate high-quality icons into its digital content.
Styleguide DesignBase.IconsTrue
*/
/*
ACC's Blue
$acc-blue - #004176; acc
Styleguide DesignBase.Colors.ACC
*/
/*
Theme Colors
Colors are based off of the ACC Scrub Colors.
map-get($theme-palette, primary) - #198dae; primary
map-get($theme-palette, secondary) - #676a72; secondary
map-get($theme-palette, shade) - #878585; shade
map-get($theme-palette, accent) - #16a385; accent
map-get($theme-palette, info) - #a3988c; info
map-get($theme-palette, highlight) - #7742bd; highlight
Weight:-1000
Styleguide DesignBase.Colors
*/
/*
Action Colors
Actionable colors used to respond to user inputs and messaging.
map-get($theme-palette, alert) - #dd1a1a; alert
map-get($theme-palette, warning) - #da8210; warning
map-get($theme-palette, success) - #078a2e; success
map-get($theme-palette, navigation) - #2b58c0; navigation
Styleguide DesignBase.Colors.Actions
*/
/*
Color Coding
Color Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an associated meaning. All of these colors are just used for reference and have no associated decorator classes. You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors.
Styleguide DesignBase.Colors.ColorCoding
*/
/*
COR Colors
(COR) Class of Recommendation is a color collect used in Guideline recommendations.
$cor-green - #6fc284; I
$cor-yellow - #ffd44f; IIA
$cor-yellow-orange - #faa74b; IIA
$cor-orange - #f15d4c;III and III-NoHarm
$cor-red - #ed1c00; III-harm
Weight: 10
Styleguide DesignBase.Colors.ColorCoding.COR
*/
/*
LOE Colors
(LOE) level of Evidence is a color collect used in Guideline recommendations.
$loe-dark-blue - rgb(62, 111, 183);LOE A
$loe-mid-blue - rgb(101, 156, 211);LOE B-R
$loe-light-blue - rgb(161, 193, 230);LOE B-NR
$loe-pale-blue - rgb(181, 213, 229); LOE C
Weight: 10
Styleguide DesignBase.Colors.ColorCoding.LOE
*/
/*
Credit Type Color Coding
Credit Types in the ACC have a specific color coding.
$credit-AAPA - #e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit
$credit-ABP - #007a5b; ABP-MOC: American Board of Pediatrics
$credit-ABPMOCII - #0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2
$credit-ABPMOCIV - #105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4
$credit-ATCEU - #775744; ATCEU: Athletic Trainer Continuing Education Unit
$credit-CE - #a8a8a8; CE: Continuing CCA\Tech Education
$credit-CME - #00a15b; CME: AMA PRA Category 1TM Credit(s)
$credit-CNE - #198dae; CNE: Continuing Nurse Education
$credit-CNErx - #52549e; CNErx: Continuing Nursing Education Pharmaceutical
$credit-COP - #775891; COP: Certificate of Participation
$credit-CPE - #992e2e; CPE: Continuing Pharmacy Education
$credit-ECME - #d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit
$credit-IPCE - #6c36b3; IPCE: Interprofessional Continuing Education Credit
$credit-MOCII - #9a1267; MOC II: ABIM MOC Part II
$credit-MOCIV - #d3248d; MOC IV: ABIM MOC Part IV
Weight: 0
Styleguide DesignBase.Colors.ColorCoding.Credits
*/
/*
Clinical Pathway Colors
Each of the clinical pathways has a distinctive color. These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.
$pathway-acute-coronary-syndromes - #009974; Acute Coronary Syndromes
$pathway-arrhythmias-EP - #005b37; arrhythmias and Clinical EP
$pathway-congenital-heart-disease - #fdb918; Congenital Heart Disease
$pathway-ecg-stress-test - #d9691f; Standard ECG, Stress Test
$pathway-heart-failure - #410d49; Heart Failure and Cardiomyopathies
$pathway-invasive-cardiology - #c8b02f; Invasive Cardiology Angiography and Intervention
$pathway-noninvasive-cardiology - #947b33; Noninvasive Cardiology
$pathway-pandemic - #8e2582; Pandemic "Covid"
$pathway-pericardial - #0079ad; pericardial Disease
$pathway-prevention - #a01d51; Prevention
$pathway-pulmonary-hypertension - #d60e7e; Pulmonary Hypertension and Venous Thromboembolic Disease
$pathway-special - #00b6f1; Special
$pathway-stable-ischemic-heart-disease - #0f3e65; Stable ischemic Heart Disease
$pathway-valvular-heart-disease - #4f4190; Valvular Heart Disease
$pathway-vascular-medicine - #ae171c; Vascular Medicine
Weight: -1
Styleguide DesignBase.Colors.ColorCoding.Pathways
*/
/*
Registry CC
Credit Type Color codes in the ACC have a specific color coding.
$registry-cpmi - #f22418; Chest Pain MI Registry
$registry-afib - #ffb300; AFib Ablation Registry
$registry-cathpci - #0086d5; CathPCI Registry
$registry-icd - #80b800; ICD Registry
$registry-impact - #4e1f73; IMPACT Registry
$registry-pinnacle-primary - #0e4f1b; PINNACLE Registry (Primary)
$registry-pinnacle-accent - #b3c4c4; PINNACLE Registry (Accent)
$registry-focus - #d6560d; Patient Navigator Focus MI
$registry-pcibleeding - #c0268e; Reducing Risk PCI Bleeding
$registry-laao - #00667a; LAAO Registry
$registry-pvi - #00947f; PVI Registry
$registry-auxdata - #04adad; Auxiliar Data Collection
$registry-ststvt - #a20062; STS ACC TVT Registry
$registry-diabetes - #7893b8; Diabetes Collaborative
Weight: 2000
Styleguide DesignBase.Colors.ColorCoding.Registry
*/
/*
Journal
Journals of JACC have specific branding colors.
$journal-jc - #002e5a; Journal of the American College of Cardiology: (JC)
$journal-adv - #0000FF; JACC: Advances: (JC-ADV)
$journal-asia - #ec2939; JACC: Asia: (JC-ASIA)
$journal-tran - #1788c2; JACC: Basic to Translational Science: (JC-TRAN)
$journal-cvonc - #00ae81; JACC: CardioOncology: (JC-CVONC)
$journal-case - #f37321; JACC: Case Reports: (JC-CASE)
$journal-ep - #8a5e96; JACC: Clinical Electrophysiology: (JC-EP)
$journal-hf - #991326; JACC: Heart Failure: (JC-HF)
$journal-invt - #038e92; JACC: Cardiovascular Interventions: (JC-INVT)
$journal-imag - #c18a0e; JACC: Cardiovascular Imaging: (JC-IMAG)
Weight: 2000
Styleguide DesignBase.Colors.ColorCoding.Journals
*/
/*
Social Network Colors
Each of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.
$twitter - #000; twitter
$facebook - #3b5998; facebook
$linkedin - #007bb6; linkedin
$apple-store - #ea4cc0; apple-store
$google-play - #689f38; google-play
$youtube - #bb0000; youtube
Weight: 100
Styleguide DesignBase.Colors.ColorCoding.Social Networks
*/
/*
Textures
All textures in the Arches design are a subtle variation of transparent. Allowing for colors to bleed through from behind. Different textures have intentions or are reserved for certain usagaes.
.texture_light - Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of.
.texture_medium - medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.
.texture_dust - Dust is the most transparent texture allowing for the color of the background to show through the most. This is used for the painted tops of cards, or score bars.
.texture_dark - This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.
.texture_cross - A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.
.texture_disabled - This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand.
Markup:
{{modifier_class}} with a light primary color background
Styleguide DesignBase.Textures
*/
/*
primary: Color Variations
The Modified versions of the primary color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.primary
*/
/*
secondary: Color Variations
The Modified versions of the secondary color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.secondary
*/
/*
success: Color Variations
The Modified versions of the success color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.success
*/
/*
shade: Color Variations
The Modified versions of the shade color from this theme
Markup:
shade-n5
HEX:#141414
RGB:20, 20, 20
HSL:0deg ,9.2561983471%, 7.8823529412%
shade-n4
HEX:#292828
RGB:41, 40, 40
HSL:0deg ,7.7685950413%, 15.7647058824%
shade-n3
HEX:#444242
RGB:68, 66, 66
HSL:0deg ,5.7851239669%, 26.2745098039%
shade-n2
HEX:#5f5d5d
RGB:95, 93, 93
HSL:0deg ,3.8016528926%, 36.7843137255%
shade-n1
HEX:#737171
RGB:115, 113, 113
HSL:0deg ,2.3140495868%, 44.6666666667%
shade-0
HEX:#878585
RGB:135, 133, 133
HSL:0deg, 0.826446281%, 52.5490196078%
shade-1
HEX:#939191
RGB:147, 145, 145
HSL:0deg ,0.7851239669%, 57.2941176471%
shade-2
HEX:#a5a4a4
RGB:165, 164, 164
HSL:0deg ,0.7231404959%, 64.4117647059%
shade-3
HEX:#c3c2c2
RGB:195, 194, 194
HSL:0deg ,0.6198347107%, 76.2745098039%
shade-4
HEX:#e1e1e1
RGB:225, 225, 225
HSL:0deg ,0.5165289256%, 88.137254902%
shade-5
HEX:#f3f3f3
RGB:243, 243, 243
HSL:0deg ,0.4545454545%, 95.2549019608%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.shade
*/
/*
warning: Color Variations
The Modified versions of the warning color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.warning
*/
/*
alert: Color Variations
The Modified versions of the alert color from this theme
Markup:
alert-n5
HEX:#210404
RGB:33, 4, 4
HSL:0deg ,80.7368421053%, 7.2647058824%
alert-n4
HEX:#420808
RGB:66, 8, 8
HSL:0deg ,80.4210526316%, 14.5294117647%
alert-n3
HEX:#6f0d0d
RGB:111, 13, 13
HSL:0deg ,80%, 24.2156862745%
alert-n2
HEX:#9b1212
RGB:155, 18, 18
HSL:0deg ,79.5789473684%, 33.9019607843%
alert-n1
HEX:#bc1616
RGB:188, 22, 22
HSL:0deg ,79.2631578947%, 41.1666666667%
alert-0
HEX:#dd1a1a
RGB:221, 26, 26
HSL:0deg, 78.9473684211%, 48.431372549%
alert-1
HEX:#e62b2b
RGB:230, 43, 43
HSL:0deg ,75%, 53.5882352941%
alert-2
HEX:#ea4f4f
RGB:234, 79, 79
HSL:0deg ,69.0789473684%, 61.3235294118%
alert-3
HEX:#f18989
RGB:241, 137, 137
HSL:0deg ,59.2105263158%, 74.2156862745%
alert-4
HEX:#f8c4c4
RGB:248, 196, 196
HSL:0deg ,49.3421052632%, 87.1078431373%
alert-5
HEX:#fce7e7
RGB:252, 231, 231
HSL:0deg ,43.4210526316%, 94.8431372549%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.alert
*/
/*
navigation: Color Variations
The Modified versions of the navigation color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.navigation
*/
/*
accent: Color Variations
The Modified versions of the accent color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.accent
*/
/*
info: Color Variations
The Modified versions of the info color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.info
*/
/*
highlight: Color Variations
The Modified versions of the highlight color from this theme
Markup:
highlight-n5
HEX:#120a1c
RGB:18, 10, 28
HSL:265.8536585366deg ,52.6352941176%, 7.5%
highlight-n4
HEX:#241439
RGB:36, 20, 57
HSL:265.8536585366deg ,51.8588235294%, 15%
highlight-n3
HEX:#3c215f
RGB:60, 33, 95
HSL:265.8536585366deg ,50.8235294118%, 25%
highlight-n2
HEX:#532e84
RGB:83, 46, 132
HSL:265.8536585366deg ,49.7882352941%, 35%
highlight-n1
HEX:#6538a1
RGB:101, 56, 161
HSL:265.8536585366deg ,49.0117647059%, 42.5%
highlight-0
HEX:#7742bd
RGB:119, 66, 189
HSL:265.8536585366deg, 48.2352941176%, 50%
highlight-1
HEX:#8555c4
RGB:133, 85, 196
HSL:265.8536585366deg ,45.8235294118%, 55%
highlight-2
HEX:#9971ce
RGB:153, 113, 206
HSL:265.8536585366deg ,42.2058823529%, 62.5%
highlight-3
HEX:#bba1de
RGB:187, 161, 222
HSL:265.8536585366deg ,36.1764705882%, 75%
highlight-4
HEX:#ddd0ef
RGB:221, 208, 239
HSL:265.8536585366deg ,30.1470588235%, 87.5%
highlight-5
HEX:#f1ecf8
RGB:241, 236, 248
HSL:265.8536585366deg ,26.5294117647%, 95%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.highlight
*/
/*
acc: Color Variations
The Modified versions of the acc color from this theme
Markup:
acc-n5
HEX:#000a12
RGB:0, 10, 18
HSL:206.9491525424deg ,100%, 3.4705882353%
acc-n4
HEX:#001423
RGB:0, 20, 35
HSL:206.9491525424deg ,100%, 6.9411764706%
acc-n3
HEX:#00213b
RGB:0, 33, 59
HSL:206.9491525424deg ,100%, 11.568627451%
acc-n2
HEX:#002e53
RGB:0, 46, 83
HSL:206.9491525424deg ,100%, 16.1960784314%
acc-n1
HEX:#003764
RGB:0, 55, 100
HSL:206.9491525424deg ,100%, 19.6666666667%
acc-0
HEX:#004176
RGB:0, 65, 118
HSL:206.9491525424deg, 100%, 23.137254902%
acc-1
HEX:#00579d
RGB:0, 87, 157
HSL:206.9491525424deg ,95%, 30.8235294118%
acc-2
HEX:#0077d8
RGB:0, 119, 216
HSL:206.9491525424deg ,87.5%, 42.3529411765%
acc-3
HEX:#3ba7ff
RGB:59, 167, 255
HSL:206.9491525424deg ,75%, 61.568627451%
acc-4
HEX:#9dd3ff
RGB:157, 211, 255
HSL:206.9491525424deg ,62.5%, 80.7843137255%
acc-5
HEX:#d8edff
RGB:216, 237, 255
HSL:206.9491525424deg ,55%, 92.3137254902%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.acc
*/
/*
Crayon Box
This is all of the colors of the theme broken out with its modifications written in hex code.
Weight:0
HideCodeBlock: display_none
Styleguide DesignBase.CrayonBox
*/
/*Adobe XD Color Map*/
/* $xd-color_primary-0: #198dae*/
/* $xd-color_primary-n5: #04151a*/
/* $xd-color_primary-n4: #082a34*/
/* $xd-color_primary-n3: #0d4757*/
/* $xd-color_primary-n2: #12637a*/
/* $xd-color_primary-n1: #157894*/
/* $xd-color_primary-1: #1da3c9*/
/* $xd-color_primary-2: #33bbe2*/
/* $xd-color_primary-3: #77d2eb*/
/* $xd-color_primary-4: #bbe8f5*/
/* $xd-color_primary-5: #e4f6fb*/
/* $xd-color_secondary-0: #676a72*/
/* $xd-color_secondary-n5: #0f1011*/
/* $xd-color_secondary-n4: #1f2022*/
/* $xd-color_secondary-n3: #343539*/
/* $xd-color_secondary-n2: #484a50*/
/* $xd-color_secondary-n1: #585a61*/
/* $xd-color_secondary-1: #757881*/
/* $xd-color_secondary-2: #8c8f97*/
/* $xd-color_secondary-3: #b2b4b9*/
/* $xd-color_secondary-4: #d9dadc*/
/* $xd-color_secondary-5: #f0f0f1*/
/* $xd-color_success-0: #078a2e*/
/* $xd-color_success-n5: #011507*/
/* $xd-color_success-n4: #02290e*/
/* $xd-color_success-n3: #044517*/
/* $xd-color_success-n2: #056120*/
/* $xd-color_success-n1: #067527*/
/* $xd-color_success-1: #09ad3a*/
/* $xd-color_success-2: #0be14b*/
/* $xd-color_success-3: #51f682*/
/* $xd-color_success-4: #a8fbc1*/
/* $xd-color_success-5: #dcfde6*/
/* $xd-color_shade-0: #878585*/
/* $xd-color_shade-n5: #141414*/
/* $xd-color_shade-n4: #292828*/
/* $xd-color_shade-n3: #444242*/
/* $xd-color_shade-n2: #5f5d5d*/
/* $xd-color_shade-n1: #737171*/
/* $xd-color_shade-1: #939191*/
/* $xd-color_shade-2: #a5a4a4*/
/* $xd-color_shade-3: #c3c2c2*/
/* $xd-color_shade-4: #e1e1e1*/
/* $xd-color_shade-5: #f3f3f3*/
/* $xd-color_warning-0: #da8210*/
/* $xd-color_warning-n5: #211402*/
/* $xd-color_warning-n4: #412705*/
/* $xd-color_warning-n3: #6d4108*/
/* $xd-color_warning-n2: #995b0b*/
/* $xd-color_warning-n1: #b96f0e*/
/* $xd-color_warning-1: #ee9118*/
/* $xd-color_warning-2: #f1a33e*/
/* $xd-color_warning-3: #f6c27e*/
/* $xd-color_warning-4: #fae0bf*/
/* $xd-color_warning-5: #fdf3e5*/
/* $xd-color_alert-0: #dd1a1a*/
/* $xd-color_alert-n5: #210404*/
/* $xd-color_alert-n4: #420808*/
/* $xd-color_alert-n3: #6f0d0d*/
/* $xd-color_alert-n2: #9b1212*/
/* $xd-color_alert-n1: #bc1616*/
/* $xd-color_alert-1: #e62b2b*/
/* $xd-color_alert-2: #ea4f4f*/
/* $xd-color_alert-3: #f18989*/
/* $xd-color_alert-4: #f8c4c4*/
/* $xd-color_alert-5: #fce7e7*/
/* $xd-color_navigation-0: #2b58c0*/
/* $xd-color_navigation-n5: #060d1d*/
/* $xd-color_navigation-n4: #0d1a3a*/
/* $xd-color_navigation-n3: #162c60*/
/* $xd-color_navigation-n2: #1e3e86*/
/* $xd-color_navigation-n1: #254ba3*/
/* $xd-color_navigation-1: #3564d2*/
/* $xd-color_navigation-2: #567ed9*/
/* $xd-color_navigation-3: #8fa9e6*/
/* $xd-color_navigation-4: #c7d4f2*/
/* $xd-color_navigation-5: #e9eefa*/
/* $xd-color_accent-0: #16a385*/
/* $xd-color_accent-n5: #031814*/
/* $xd-color_accent-n4: #073128*/
/* $xd-color_accent-n3: #0b5243*/
/* $xd-color_accent-n2: #0f725d*/
/* $xd-color_accent-n1: #138b71*/
/* $xd-color_accent-1: #1ac09c*/
/* $xd-color_accent-2: #28e2ba*/
/* $xd-color_accent-3: #70ecd1*/
/* $xd-color_accent-4: #b7f5e8*/
/* $xd-color_accent-5: #e2fbf6*/
/* $xd-color_info-0: #a3988c*/
/* $xd-color_info-n5: #191714*/
/* $xd-color_info-n4: #332e28*/
/* $xd-color_info-n3: #544c43*/
/* $xd-color_info-n2: #766b5e*/
/* $xd-color_info-n1: #8f8173*/
/* $xd-color_info-1: #aca298*/
/* $xd-color_info-2: #bab2a9*/
/* $xd-color_info-3: #d1ccc6*/
/* $xd-color_info-4: #e8e5e2*/
/* $xd-color_info-5: #f6f5f4*/
/* $xd-color_highlight-0: #7742bd*/
/* $xd-color_highlight-n5: #120a1c*/
/* $xd-color_highlight-n4: #241439*/
/* $xd-color_highlight-n3: #3c215f*/
/* $xd-color_highlight-n2: #532e84*/
/* $xd-color_highlight-n1: #6538a1*/
/* $xd-color_highlight-1: #8555c4*/
/* $xd-color_highlight-2: #9971ce*/
/* $xd-color_highlight-3: #bba1de*/
/* $xd-color_highlight-4: #ddd0ef*/
/* $xd-color_highlight-5: #f1ecf8*/
/* $xd-color_acc-0: #004176*/
/* $xd-color_acc-n5: #000a12*/
/* $xd-color_acc-n4: #001423*/
/* $xd-color_acc-n3: #00213b*/
/* $xd-color_acc-n2: #002e53*/
/* $xd-color_acc-n1: #003764*/
/* $xd-color_acc-1: #00579d*/
/* $xd-color_acc-2: #0077d8*/
/* $xd-color_acc-3: #3ba7ff*/
/* $xd-color_acc-4: #9dd3ff*/
/* $xd-color_acc-5: #d8edff*/
.font .font--example {
background-image: url(http://basehold.it/i/24);
}
.font .font--name {
color: #000;
}
.font .font--dropcase_2x {
color: #198dae;
}
/*
Basic HTML
The Arches Design System, at its core, is a Utility Class Styling Design. It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles. Arches rely on the browser or branding defaults for basic HTML styling. Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation.
Weight: -100
Styleguide HTML
*/
/*
Reading Typography
Reading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the "reading-typography" class is used on the parent container. Please note that the reading typography can still look a bit different look depending on the brand or the framework.
modifier class
customization
usage
.inherit_color
removes all color rules from colored typography and sets it to inherit.
inverting a block of typography where all text and headlines should be white.
.font-size_up
shifts all typography up one font size step
intro blocks of text where the text. Or in articles where you can shift all text up a size.
`.font-size_down`
shifts all typography down one font size step.
citation blocks or boiler plate content where the text should be smaller and less impactful.
.links_dark
turns all links to the dark color standard.
this is used in junction with the .inherit_color class.
.links_light
turns all links to the light color standard.
this is used in junction with the .inherit_color class when text is on a dark background.
* there are further advanced features if you want to apply CSS Property Overrides.
Markup:
This is the primary heading and there should only be one of these per page
sub heading
A small paragraph to emphasis and show important bits.
This is a list item
So is this - there could be more
Make sure to style list items to:
Not forgetting child list items
Not forgetting child list items
Not forgetting child list items
Not forgetting child list items
A couple more
top level list items
Don't forget Ordered lists:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
A sub heading which is not as important as the first, but is quite imporant overall
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Table Heading
Table Heading
table data
table data
table data
table data
table data
table data
table data
table data
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Definition list
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
This heading plays a relatively small bit part role, if you use it at all
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Table of Contents
How to Prepare for the Boards
General Principles of Cardiovascular Medicine
Arrhythmias
Coronary Artery Disease
Heart Failure & Cardiomyopathy
Valvular Disease
Pericardial Disease
Congenital Heart Disease
Vascular Diseases
Systemic Hypertension and Hypotension
Pulmonary Circulation Disorders
Systemic Disorders Affecting the Circulatory
System
Miscellaneous
Cardiovascular Genetics
CPR, Post-Resuscitation Care
Cardiac Critical Care
Sleep Disordered Breathing
Sports Cardiology
Pregnancy and Cardiac Disease
Cardiovascular Operative Management
Pharmacology
General Principles of Cardiovascular
Medicine
Weight: -9
HideCodeBlock: display_none
Styleguide HTML.Typography
*/
/*
Reading Typography Modified
This text is used as a lorem content in many of our containers.
.color_inherit.bg_acc.c_white.p_4.links_light - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.
Markup:
{{> Sub.Placeholder.Typography modifier_class=" color_inherit bg_acc c_white p_4 links_light"}}
Weight: -9
HideCodeBlock: display_none
MarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50
Styleguide HTML.Typography.Sample
*/
/*
Links States
This shows the look and feel of all the states of a text link, color, underline and decoration.
Markup:
MarkupWrapperClasses:
max-w_70 m_auto
Weight: -100
Styleguide Component.Navigation.BrandedNav
*/
/*
Mobile Menu Nav (Hamburger)
Description: A button that triggers the menu to show or hide with the site.
Markup:
MarkupWrapperClasses:
flex_auto navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_1 show
Weight:0
Styleguide Component.Navigation.BrandedNav.Hamburger
*/
/*
Login Nav
The ACC.org Nav has a shade nav that houses the login and profile nav with a shade color. To make sure it doesn't resize when the main nav expands the login nav needs to be placed absolutely.
Markup:
Weight: 100
MarkupWrapperClasses:
flex max-w_60 m_auto
Styleguide Component.Navigation.BrandedNav.Login
*/
/*
JavaScript: Snippet to Show on Hover
Description:
Markup:
Weight:0
Styleguide Component.Navigation.BrandedNav.JavaScript
*/
/*
Responsive Top Nav with Single Layer Nav
The Header Nav with no dropdown navs but with elements that show up only in the mobile viewport
Markup:
MarkupWrapperClasses:
max-w_60 m_auto
Weight: 1
Styleguide Component.Navigation.BrandedNav.Simple
*/
/*
Dropdown Double Column
The Header Nav of ACC.org
Markup:
MarkupWrapperClasses:
br_none br_solid:lg dropdown-menu font_copy br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative
Weight: 50
Styleguide Component.Navigation.BrandedNav.Dropdown
*/
/*
Dropdown with Sub Links
The Header Nav of ACC.org
Markup:
MarkupWrapperClasses:
br_none br_solid:lg dropdown-menu font_copy br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative
Weight: 2
Styleguide Component.Navigation.BrandedNav.Dropdown.SubLinks
*/
/*
Nav Dropdown with Alternate Content in Links
It is easy to add images in replace of text links in the navs.
Markup:
MarkupWrapperClasses:
br_none br_solid:lg dropdown-menu font_copy br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative
Weight: 60
Styleguide Component.Navigation.BrandedNav.Dropdown.AltContent
*/
/*
Dropdown Nav List
Description: Simple single layer of links in a drop down
Markup:
Weight:1000
Styleguide Component.Navigation.BrandedNav.Dropdown.List.Simple
*/
/*
Dropdown Nav List with Sub Links
Description: Simple single layer of links in a drop down
Markup:
Weight:1005
MarkupWrapperClasses:
flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3
Styleguide Component.Navigation.BrandedNav.Dropdown.List.SubLinks
*/
/*
Dropdown Nav List with Alt Content
Description: Some columns take images instead of text in dropdown links
Markup:
Design the layout to incorporate columns for content and sidebars.
[sidebar]
[content]
[sidebar]
the parent uses `grid-template="page-layout"`
the children uses `grid-area="content|sidebar-primary|sidebar-secondary"`
Column Configuration:
Utilize 'sidebar-primary', 'sidebar-secondary', and 'content' classes to designate columns within the layout.
Define grid areas in the DOM structure for 'fullscreen', 'sidebar-primary','sidebar-secondary','container'.
Sidebar Specifications:
Sidebars are 300px wide with 1 rem padding on the left and right. (300px + 2rem)
Sidebars do not respect the page margin but adhere to margins between themselves and content.
Sidebars placed on the edge will extend to the edge of the container.
Responsive Design:
`Primary sidebar` remains fixed and aligned with the content area. It folds under the content on mobile viewports.
`Secondary sidebar` remains fixed and shifts below the content on tablet and smaller viewports.
The sidebar widths are constant when aligned with the content and changes its width to the above content based on media breakpoints.
Content Area:
Allocate remaining space on the page for the content area, respecting a page margin.
Markup:
Document(fullscreen)
Document
Content No Sidebars
Content
Content with Primary Sidebar
sidebar primary
content
Content with Primary Sidebar - Reverse template-option="reverse"
sidebar primary (reverse)
content (reverse)
Content with Secondary Sidebar
sidebar secondary
content
Content with Secondary Sidebar - Reverse template-option="reverse"
sidebar secondary
content
Both Sidebars
sidebar secondary
content center
sidebar primary
Both Sidebars
sidebar secondary
content center
sidebar primary
{{> "Component.Structures.PageLayout.demoStyles" }}
MarkupWrapperClasses: space-holder colored-zones
Weight: 0
Styleguide Component.Structures.PageLayout
*/
/*
Demo Styles
Descripition:
Styles needed for demo and to not be included in enteprise styles
Markup:
MarkupWrapperClasses: space-holder colored-zones
Weight: 0
Styleguide Component.Structures.PageLayout.demoStyles
*/
/*
Page Layout: Article
here is a short demo of how the content will work with the page layouts.
MarkUp:
ACCEL Lite: Top Takeaways from the ACC 2023 Guideline for Chronic CAD for the
Practicing Clinician
To improve our understanding of the basic principles in the treatment and management of patients
with chronic heart disease, in this interview, Salim S. Virani, MD, PhD, FACC,
and Roger S. Blumenthal, MD, FACC, discuss top takeaways from the ACC 2023
Guideline for Chronic CAD.
Related References:
Writing Committee Members, Virani, S. S., Newby, L. K., Arnold, S. V., Bittner, V., Brewer,
L. C., Demeter, S. H., Dixon, D. L., Fearon, W. F., Hess, B., Johnson, H. M., Kazi, D. S.,
Kolte, D., Kumbhani, D. J., LoFaso, J., Mahtta, D., Mark, D. B., Minissian, M., Navar, A.
M., Patel, A. R., … Williams, M. S. (2023). 2023 AHA/ACC/ACCP/ASPC/NLA/PCNA Guideline for
the Management of Patients With Chronic Coronary Disease: A Report of the American Heart
Association/American College of Cardiology Joint Committee on Clinical Practice Guidelines.
Journal of the American College of Cardiology, 82(9), 833–955. https://doi.org/10.1016/j.jacc.2023.04.003
The cardiology clinical trial research workforce is comprised of a wide spectrum of specialists and roles.
ACC members, including cardiologists, nurses, physician assistants and PharmDs have opportunities to develop
instrumental roles, including clinical research coordinator, investigator and principle investigators.
The ACC is committed to promoting clinical research in cardiovascular care. They established the Clinical
Trials Research Program to diversify leadership and workforce in cardiovascular clinical research. Over 150
learners, including almost 100 women, have enrolled since July 2022. The ACC offers career resources and
funding opportunities in clinical trials research.
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.
Styleguide Component.MicroSite
*/
/*
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.
Markup:
MarkupWrapperClasses: wrapper-container
SubComponents:
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
Weight: 0
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.
Styleguide Component.MicroSite.HeroImageWithCTA
*/
/*
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.
Markup:
MarkupWrapperClasses: wrapper-container
SubComponents:
Component.MicroSite.Sub.HeroImage.BackgroundImage - Background Image
Component.MicroSite.Sub.PageTitleTreatment - Page Title
Component.MicroSite.Sub.HeroImage.CTAButton - CTA Button
Weight: 0
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.
Styleguide Component.MicroSite.MicroBrandingWithButtton
*/
/*
CTA Highlight
The CTA Highlight component is used to create a highlighted call-to-action section.
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.
Markup:
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.
MarkupWrapperClasses:
Weight: 0
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.
Styleguide Component.MicroSite.Sub.HeroImage.CTAHighlight
*/
/*
CTA Button
The CTA Button is just a centered button for the highlighted call-to-action.
Markup:
MarkupWrapperClasses:
Weight: 0
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.
Styleguide Component.MicroSite.Sub.HeroImage.CTAButton
*/
/*
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.
Markup:
MarkupWrapperClasses:
Weight: 0
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.
Styleguide Component.MicroSite.Sub.HeroImage.BreadcrumbNav
*/
/*
Page Title Treatment
MicroSite Page Title Treatment component is used to style and emphasize page titles.
Modifier: font-color - This modifier class is used to customize the font color of the page title.
Markup:
Hero Statement Mision of the Page ™
MarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40
Weight: 0
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.
Styleguide Component.MicroSite.Sub.PageTitleTreatment
*/
/*
Page Title Treatment Micro
Micro MicroSite Page Title Treatment has a back button in mobile.
Markup:
Hero Statement Mision of the Page™
MarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40
Weight: 0
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.
Styleguide Component.MicroSite.Sub.PageTitleTreatmentMicro
*/
/*
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
Markup:
MarkupWrapperClasses: columns_1 grid relative rows_1 w_100 overflow_hidden p_6
Weight: 0
NOTE: It utilizes the "Lorem Picsum" service for placeholder images. Replace all 4 images for best results.
Styleguide Component.MicroSite.Sub.HeroImage.BackgroundImage
*/
/** SCSS DOC: __globalshame_framework.scss **/
/*# sourceMappingURL=maps/acc_boot.css.map */
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Sub.Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Sub.Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
