@charset "UTF-8";
/**
* arches - Global style system focused on utility classes
* @version v4.1.4x
* @link https://github.com/ACC-Style/Arches/
*/
/** Build Comment: including file /setup/__preheader.scss **/
/** SCSS DOC: _preheader.scss **/
/** SCSS DOC: _helpers.scss **/
/** SCSS DOC: _utility-css.vars.scss **/
.card.testimonial .blockquote p:before, .card.testimonial .blockquote p:after,
.card.testimonial .blockquote-cite:before,
.card.testimonial .blockquote-cite:after,
.card.product .blockquote p:before,
.card.product .blockquote p:after,
.card.product .blockquote-cite:before,
.card.product .blockquote-cite:after, .carousel-alt.chevron-on .carousel-indicators li.active:before {
-webkit-font-smoothing: antialiased;
text-rendering: auto;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: 900;
line-height: 1;
font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro";
}
/** Build Comment: This Style Sheet was formatted to work best with the inclusion of Bootstrap ^5.1.0 **/
/** Build Comment: Set Active Class **/
/** SCSS DOC: __brand.base.scss **/
/** Colors **/
/** SCSS DOC: _colors.scss **/
/** Setting link color variables in scss **/
/*
Link Colors: Light
Link colors of a lighter shade in all of its states, default, hover, visited. Typically used to enhance visibility on dark backgrounds.
$link-color-dark - #126657; Link Color dark
$link-color-dark--hover - #051f1a; Link Color dark--hover
$link-color-dark--visited - #42665f; Link Color dark--visited
Weight:2
Styleguide DesignBase.Colors.LinksLight
*/
/*
Link Colors
Link colors in all of its states, default, hover, visited.
$link-color-light - #8cebda; Link Color light
$link-color-light--hover - #e8fbf8; Link Color light--hover
$link-color-light--visited - #84afa7; Link Color light--visited
$link-color-dark - #126657; Link Color dark
$link-color-dark--hover - #051f1a; Link Color dark--hover
$link-color-dark--visited - #42665f; Link Color dark--visited
Weight:1
Styleguide DesignBase.Colors.Links
*/
/** Fonts **/
/* Define the "system" font family */
@font-face {
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
font-family: system;
}
html {
-webkit-font-smoothing: antialiased;
-webkit-line-break: after-white-space;
-webkit-locale: "en";
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
line-break: white-space;
}
/** Textures **/
/** logos **/
/** CV Quality Brands *********************************/
/** SCSS DOC: __brand.cvquality.scss **/
/** CV Quality Colors **/
.c_primary-alt,.h\:c_primary-alt:hover {
color: #d2e6f6 !important;
}
.br_primary-alt,.bg_primary-alt {
background-color: #d2e6f6 !important;
}
.c_mix-teal-orange {
color: #58b5a5 !important;
}
.c_mix-orange-teal {
color: #acbd65 !important;
}
.br_mix-teal-orange {
border-color: #58b5a5 !important;
}
.br_mix-orange-teal {
border-color: #acbd65 !important;
}
.bg_mix-teal-orange {
background-color: #58b5a5 !important;
}
.bg_mix-orange-teal {
background-color: #acbd65 !important;
}
/*
Background Colors Alt
These Alternate colors are single use to embelish a design. These colors DO NOT have extra modifiers.
.bg_primary-alt - Primary Alt
.bg_mix-teal-orange - Mix of 60% Teal And 40% Orange
.bg_mix-orange-teal - Mix of 60% Orange and 40% Teal
Markup:
Background Color of {{modifier_class}}
Styleguide DesignBase.Backgrounds
*/
/*
Border Colors Alt
These Alternate colors are single use to embelish a design. These colors DO NOT have extra modifiers.
.br_primary-alt - light orange
.br_mix-teal-orange - Mix of 60% Teal And 40% Orange
.br_mix-orange-teal - Mix of 60% Orange and 40% Teal
Markup:
Styleguide HTML.Table.Scrollable
*/
.table-scrollable-container:after {
display: table;
clear: both;
content: "";
}
.table-scrollable-container thead th {
height: 112px;
height: 7rem;
}
.table-scrollable-container tbody {
white-space: nowrap;
}
.table-scrollable-container tbody tr {
white-space: normal;
}
.table-scrollable-container tbody td {
height: 112px;
height: 7rem;
}
.table-scrollable-container .instructions {
display: block;
width: 100%;
padding: 4px 16px;
padding: 0.25rem 1rem;
font-size: 0.8888888889em;
text-align: center;
}
.table-scrollable-container .instructions .fa {
margin: 0 4px;
margin: 0 0.25rem;
}
.table-scrollable .parent-cell {
font-size: 1.125em;
}
/*
Agenda Item
Description:
Agenda items are any event or sessions that are scheduled for a specific date, location, and time.
Weight:0
Styleguide Sub.Data.Agenda
*/
/*
Time Range
Description:
The range of time at which a Agenda item is in a certain state.
Markup: @ {{> Sub.Data.Agenda.Time.Start }} – {{> Sub.Data.Agenda.Time.End }} EDT
FORMAT: 12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.
NOTE: The 'a.m.'/'p.m.' if the same should only occur on the last time mark. 11:15 a.m. - 11:30 a.m. should be shortened to 11:15 - 11:30 a.m.
Weight:0
Styleguide Sub.Data.Agenda.TimeRange
*/
/*
Time Moment
Description:
The time at which a Agenda is item is scheduled to be active, give access, or start playing.
Markup: 11:15 a.m.
FORMAT: 12 hour with 'a.m.'/'p.m'.
Weight:0
Styleguide Sub.Data.Agenda.Time.Start
*/
/*
Time Moment Start End
Description:
The time at which a Agenda item is scheduled to end.
Markup: 12:15 p.m.
FORMAT: 12 hour with 'a.m.'/'p.m'.
Weight:0
Styleguide Sub.Data.Agenda.Time.End
*/
/*
Date
Description:
There is usually a delay to when recording will make it to on demand. This is the time that recording will be available.
Markup: Saturday, Nov. 20, 2021
FORMAT: Day-of-Week, Month-Abbreviation. Day, Year
Weight:0
Styleguide Sub.Data.Agenda.Date
*/
/*
Date and Time
Description:
This is when you need to show Date and Time
Markup: {{> Sub.Data.Agenda.Date }} @ {{> Sub.Data.Agenda.Time.Start }} EDT
FORMAT: Day-of-Week, Month-Abbreviation. Day, Year @ Hour:Minute 'a.m.'/'p.m' Abbreviation-of-Timezone.
NOTE: Use the simple abbreviation for the timezone without Daylight Savings Time. IE: ET not EDT or EST.
DATA:
Sub.Data.Agenda.Date - Date
Sub.Data.Agenda.Time.Start - Start Time
Weight:0
Styleguide Sub.Data.Agenda.DateTime
*/
/*
Member
Description:
Often we need to represent a member as a Faculty or Chair who created or participated an initative.
Weight:1000
Styleguide Sub.Data.Member
*/
/*
Photo
Description:
A photo of the member
Markup:
MarkupWrapperClasses: max-w_30
FORMAT: 300px by 300px
Weight:0
Styleguide Sub.Data.Member.Photo
*/
/*
Full Name
The full name of the Member member
Markup: Pepper H. Soda III, MD, FACC
FORMAT: First Name MI (if known) Last Name Suffix (Jr., Sr., the III ), Optional Degree, Optional ACC Honorifics, Optional Exceptions Honorifics
Weight:0
Styleguide Sub.Data.Member.FullName
*/
/*
Location
Description:
The location of the Member member
Markup: New York, NY, USA
Weight:0
FORMAT: City, State, Country
NOTE: if the conference country is USA you can drop the country if it is USA.
Styleguide Sub.Data.Member.Location
*/
/*
Title
Description:
the roles of the Member member within the session
Markup:
{{> "Sub.Data.Member.Title.InstitutionTitle" }}, {{> "Sub.Data.Member.Title.InstitutionDivision" }}, {{> "Sub.Data.Member.Title.Institution" }}
FORMAT: Institution Title, Institution Division, Institution
NOTE: This format is currently not being enforced.
Weight:100
Styleguide Sub.Data.Member.Title
*/
/*
Institution
Description:
Institution of the Member member where they hold a title
Markup:
Mount SugarLoaf Hospital
Weight:101
Styleguide Sub.Data.Member.Title.Institution
*/
/*
Institution Division
Description:
The Division of the Institution of the Member member where they hold a title
Markup:
Department of Cardiology
Weight:102
Styleguide Sub.Data.Member.Title.InstitutionDivision
*/
/*
Institutional Title
Description:
the roles of the Member member within the session
Markup:
Physician-in-Chief
Weight:103
Styleguide Sub.Data.Member.Title.InstitutionTitle
*/
/*
Sponsor
Description:
Sponsor are industry that has offered money or support.
Weight:0
Styleguide Sub.Data.Sponsor
*/
/*
Name
Markup:
LogoIpsum
Weight:-100
Styleguide Sub.Data.Sponsor.Name
*/
/*
Address
Description:
Sponsor's Name
Markup:
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
*/
/*
Footer
The Footer of CVQuality.org
Markup:
Weight: -50
Styleguide Recipes.Navs.FooterCardioSmart
*/
/*
Cards
Basic Cards
Markup:
Basic Card
cupidatat eu dolor dolor aliquip aliqua velit esse magna culpa qui fugiat ad culpa consectetur sint tempor elit dolor eu anim nisi quis consectetur laborum laboris proident consectetur mollit esse
Styleguide Recipes.Cards
*/
/*
Highlighted Card
Highlighted Cards are stylized cards with a soft blue background and changes all header sizes and text to a bit larger. These cards are used as hero area or for extra interest.
Markup:
Highlighted Card
Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.
Styleguide Recipes.Cards.Highlight
*/
/*
Card Positions
Placing cards inside of content areas is needed within the design. Placing some utility classes will acomplish this with a responsive toggle.
| Style Combo | Effect | Classes |
| ----------------- | ----------------------------------------------- | --------------------------------------------------------- |
| position-right-lg | floats the card when the veiwport is large up. | max-w_20 clear_right\:lg float_right\:lg w_20:lg |
| position-right-md | floats the card when the veiwport is medium up. | max-w_20 clear_right\:md float_right\:md w_40\:md w_20\:lg |
| position-right-sm | floats the card when the veiwport is small up. | max-w_20 clear_right float_right w_50 w_40\:md w_20\:lg |
| position-left-lg | floats the card when the veiwport is small up. | max-w_20 clear_left\:lg float_left\:lg w_20:lg |
| position-left-md | floats the card when the veiwport is medium up. | max-w_20 clear_left\:md float_left\:md w_40\:md w_20\:lg |
| position-left-sm | floats the card when the veiwport is large up. | max-w_20 clear_left float_left w_50 w_40\:md w_20\:lg |
Markup:
Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.
Styleguide Recipes.Cards.Positon
*/
/*
Info Card
Info Cards are stylized cards with a warm grey background and changes all headers to bold. These cards are side notes to the main content
Markup:
Info Card
aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse
Styleguide Recipes.Cards.Info
*/
/*
Notice Card
Notice Cards are side notes usually associated with an action button.
Markup:
Notice Card
aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse
Styleguide Recipes.Cards.Notice
*/
/*
Notice Card Alt
Notice Cards are side notes usually associated with an action button.
Markup:
Notice Card
aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse
Styleguide Recipes.Cards.Notice Alt
*/
/*
Address Card
Decorated address card for accreditation
Markup:
Styleguide Recipes.Cards.Address
*/
/*
Score Card
The Score Box Generic is currently used on the Assessments Page. These repeated boxes are used to show the score with each section of the assessment.
Markup:
veniam quis veniam enim
(0 of 96 possible points)0
Your Score
Overall Score(0 of 96 possible points)
0%
Styleguide Recipes.Cards.Score Card
*/
/*
Date
Style a date marker
Markup:
May122018
Styleguide Recipes.Cards.Date
*/
/*
Date
Style a date marker
Markup:
May122018
voluptate anim consequat tempor adipisicing aliquip non do
Grand Hayatt
Cincinnati, OH
May 12, 20188:00AM - 2:00PM(EST)
Eu dolore ullamco laboris veniam commodo pariatur pariatur proident ea. Esse in in nisi non eiusmod consequat pariatur officia mollit incididunt qui consectetur est. Ex aute non amet elit. Voluptate commodo minim sit Lorem occaecat sit aute reprehenderit. Dolore pariatur cupidatat velit anim enim veniam mollit aute fugiat magna do. Culpa non veniam non officia exercitation laborum dolor irure exercitation tempor adipisicing tempor elit nulla.
Styleguide Recipes.Cards.Date Event
*/
/*
Testimonial Card
Graphic areas that hold testimonials.
Markup:
cillum tempor aliquip amet commodo aute qui veniam Lorem cillum sunt laboris consectetur nisi cillum
Someone famous
Styleguide Recipes.Cards.Testimonials
*/
/*
Product Card
Graphic areas that hold a snippet of a product.
Markup:
incididunt est culpa
aliqua adipisicing sint exercitation nostrud pariatur amet ut est fugiat excepteur ad elit mollit cillum
Styleguide Recipes.Cards.Products
*/
/*
List
CVquatlity has some lists through out the design that go beyond basic lists. Below are collection of them and where they can be found.
Styleguide Recipes.Lists
*/
/*
Map Result List
Result lists is the list view of all of the pins on the map
Markup:
proident ad velit sit
sunt magna ea exercitation
nisi qui culpa labore
proident ad velit sit
sunt magna ea exercitation
nisi qui culpa labore
Styleguide Recipes.Lists.Map
*/
/*
Side Nav
Side Nav DOM
Markup:
Styleguide Recipes.Navs.SideNav
*/
/*
Side Nav Parent
Decoration classes with UC's to make the nav look like the primary level.
Markup:
Weight: 1
Styleguide Recipes.Navs.Primary Level
*/
/*
Side Nav Child
Decoration classes with UC's to make the nav look like the child of the primary level.
Markup:
Weight: 2
Styleguide Recipes.Navs.Child Level
*/
/*
Side Nav Gran Child
Decoration classes with UC's to make the nav look like the child of the primary level.
Markup:
Weight: 3
Styleguide Recipes.Navs.Grand Child Level
*/
/*
Decorators
The Cvquality design employs a collection of unique decorators that are either accomplished by styles added on top of Arches or are collections of Utility Classes to make the effect. Bellow are the list of standardized decorators in the design.
Styleguide Recipes.Decorator
*/
/*
Dividers
There are many dividers in the design. Bellow are the types and how to create them.
| Style Combo | Effect | Classes |
| --------------- | ----------------------------------------------------------------- | ----------------------------- |
| item-divider | dividing items from eachother like between paragraphs. | br_shade-4 br_dashed br_1 |
| group-divider | A mid weight divider to show the differnce between grouped items. | br_accent br_dotted br_1 |
| section-divider | A strong division between Secotions of a page | br_primary br_solid br_2 |
| spacer | No decoration but adds space between objects | br_0 |
Markup:
Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.
There is a spacer between the two sentences
Cupidatat id incididunt tempor magna consectetur laboris cillum laborum. Enim non reprehenderit eiusmod nisi velit veniam ea eiusmod esse aute proident. Laborum pariatur consequat cillum est officia exercitation esse et consectetur ea ad sint. Sunt esse do cupidatat laborum. Deserunt occaecat id tempor consectetur velit pariatur nulla fugiat sit laboris ipsum.
Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.
Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.
Styleguide Recipes.Decorator.Dividers
*/
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,"slab",serif
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: Lato
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) - #0088aa; primary
map-get($theme-palette, secondary) - #e87d1e; secondary
map-get($theme-palette, shade) - #8a817f; shade
map-get($theme-palette, accent) - #ffc425; accent
map-get($theme-palette, info) - #a3988c; info
map-get($theme-palette, highlight) - #05aee5; highlight
Weight:-1000
Styleguide DesignBase.Colors
*/
/*
Action Colors
Actionable colors used to respond to user inputs and messaging.
map-get($theme-palette, alert) - #990000; alert
map-get($theme-palette, warning) - #f4a122; 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:
primary-n5
HEX:#00141a
RGB:0, 20, 26
HSL:192deg ,100%, 5%
primary-n4
HEX:#002933
RGB:0, 41, 51
HSL:192deg ,100%, 10%
primary-n3
HEX:#004455
RGB:0, 68, 85
HSL:192deg ,100%, 16.6666666667%
primary-n2
HEX:#005f77
RGB:0, 95, 119
HSL:192deg ,100%, 23.3333333333%
primary-n1
HEX:#007491
RGB:0, 116, 145
HSL:192deg ,100%, 28.3333333333%
primary-0
HEX:#0088aa
RGB:0, 136, 170
HSL:192deg, 100%, 33.3333333333%
primary-1
HEX:#00a3cc
RGB:0, 163, 204
HSL:192deg ,95%, 40%
primary-2
HEX:#00ccff
RGB:0, 204, 255
HSL:192deg ,87.5%, 50%
primary-3
HEX:#55ddff
RGB:85, 221, 255
HSL:192deg ,75%, 66.6666666667%
primary-4
HEX:#aaeeff
RGB:170, 238, 255
HSL:192deg ,62.5%, 83.3333333333%
primary-5
HEX:#ddf8ff
RGB:221, 248, 255
HSL:192deg ,55%, 93.3333333333%
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:
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:#170000
RGB:23, 0, 0
HSL:0deg ,100%, 4.5%
alert-n4
HEX:#2e0000
RGB:46, 0, 0
HSL:0deg ,100%, 9%
alert-n3
HEX:#4d0000
RGB:77, 0, 0
HSL:0deg ,100%, 15%
alert-n2
HEX:#6b0000
RGB:107, 0, 0
HSL:0deg ,100%, 21%
alert-n1
HEX:#820000
RGB:130, 0, 0
HSL:0deg ,100%, 25.5%
alert-0
HEX:#990000
RGB:153, 0, 0
HSL:0deg, 100%, 30%
alert-1
HEX:#bd0000
RGB:189, 0, 0
HSL:0deg ,95%, 37%
alert-2
HEX:#f20000
RGB:242, 0, 0
HSL:0deg ,87.5%, 47.5%
alert-3
HEX:#ff4d4d
RGB:255, 77, 77
HSL:0deg ,75%, 65%
alert-4
HEX:#ffa6a6
RGB:255, 166, 166
HSL:0deg ,62.5%, 82.5%
alert-5
HEX:#ffdbdb
RGB:255, 219, 219
HSL:0deg ,55%, 93%
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:
accent-n5
HEX:#2c2000
RGB:44, 32, 0
HSL:43.7614678899deg ,100%, 8.5882352941%
accent-n4
HEX:#584000
RGB:88, 64, 0
HSL:43.7614678899deg ,100%, 17.1764705882%
accent-n3
HEX:#926a00
RGB:146, 106, 0
HSL:43.7614678899deg ,100%, 28.6274509804%
accent-n2
HEX:#cc9500
RGB:204, 149, 0
HSL:43.7614678899deg ,100%, 40.0784313725%
accent-n1
HEX:#f8b500
RGB:248, 181, 0
HSL:43.7614678899deg ,100%, 48.6666666667%
accent-0
HEX:#ffc425
RGB:255, 196, 37
HSL:43.7614678899deg, 100%, 57.2549019608%
accent-1
HEX:#ffca3b
RGB:255, 202, 59
HSL:43.7614678899deg ,95%, 61.5294117647%
accent-2
HEX:#ffd35c
RGB:255, 211, 92
HSL:43.7614678899deg ,87.5%, 67.9411764706%
accent-3
HEX:#ffe292
RGB:255, 226, 146
HSL:43.7614678899deg ,75%, 78.6274509804%
accent-4
HEX:#fff0c9
RGB:255, 240, 201
HSL:43.7614678899deg ,62.5%, 89.3137254902%
accent-5
HEX:#fff9e9
RGB:255, 249, 233
HSL:43.7614678899deg ,55%, 95.7254901961%
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:
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: #0088aa*/
/* $xd-color_primary-n5: #00141a*/
/* $xd-color_primary-n4: #002933*/
/* $xd-color_primary-n3: #004455*/
/* $xd-color_primary-n2: #005f77*/
/* $xd-color_primary-n1: #007491*/
/* $xd-color_primary-1: #00a3cc*/
/* $xd-color_primary-2: #00ccff*/
/* $xd-color_primary-3: #55ddff*/
/* $xd-color_primary-4: #aaeeff*/
/* $xd-color_primary-5: #ddf8ff*/
/* $xd-color_secondary-0: #e87d1e*/
/* $xd-color_secondary-n5: #241304*/
/* $xd-color_secondary-n4: #472507*/
/* $xd-color_secondary-n3: #773e0c*/
/* $xd-color_secondary-n2: #a65711*/
/* $xd-color_secondary-n1: #ca6a15*/
/* $xd-color_secondary-1: #ea8a35*/
/* $xd-color_secondary-2: #ee9e56*/
/* $xd-color_secondary-3: #f4be8f*/
/* $xd-color_secondary-4: #f9dfc7*/
/* $xd-color_secondary-5: #fdf2e9*/
/* $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: #8a817f*/
/* $xd-color_shade-n5: #151313*/
/* $xd-color_shade-n4: #2a2726*/
/* $xd-color_shade-n3: #45403f*/
/* $xd-color_shade-n2: #615a59*/
/* $xd-color_shade-n1: #766d6c*/
/* $xd-color_shade-1: #968e8c*/
/* $xd-color_shade-2: #a7a19f*/
/* $xd-color_shade-3: #c5c0bf*/
/* $xd-color_shade-4: #e2e0df*/
/* $xd-color_shade-5: #f3f2f2*/
/* $xd-color_warning-0: #f4a122*/
/* $xd-color_warning-n5: #281902*/
/* $xd-color_warning-n4: #4f3204*/
/* $xd-color_warning-n3: #845307*/
/* $xd-color_warning-n2: #b97409*/
/* $xd-color_warning-n1: #e18d0b*/
/* $xd-color_warning-1: #f5aa38*/
/* $xd-color_warning-2: #f7b959*/
/* $xd-color_warning-3: #fad091*/
/* $xd-color_warning-4: #fce8c8*/
/* $xd-color_warning-5: #fef6e9*/
/* $xd-color_alert-0: #990000*/
/* $xd-color_alert-n5: #170000*/
/* $xd-color_alert-n4: #2e0000*/
/* $xd-color_alert-n3: #4d0000*/
/* $xd-color_alert-n2: #6b0000*/
/* $xd-color_alert-n1: #820000*/
/* $xd-color_alert-1: #bd0000*/
/* $xd-color_alert-2: #f20000*/
/* $xd-color_alert-3: #ff4d4d*/
/* $xd-color_alert-4: #ffa6a6*/
/* $xd-color_alert-5: #ffdbdb*/
/* $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: #ffc425*/
/* $xd-color_accent-n5: #2c2000*/
/* $xd-color_accent-n4: #584000*/
/* $xd-color_accent-n3: #926a00*/
/* $xd-color_accent-n2: #cc9500*/
/* $xd-color_accent-n1: #f8b500*/
/* $xd-color_accent-1: #ffca3b*/
/* $xd-color_accent-2: #ffd35c*/
/* $xd-color_accent-3: #ffe292*/
/* $xd-color_accent-4: #fff0c9*/
/* $xd-color_accent-5: #fff9e9*/
/* $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: #05aee5*/
/* $xd-color_highlight-n5: #011a22*/
/* $xd-color_highlight-n4: #023445*/
/* $xd-color_highlight-n3: #035773*/
/* $xd-color_highlight-n2: #047aa0*/
/* $xd-color_highlight-n1: #0494c3*/
/* $xd-color_highlight-1: #0cbffa*/
/* $xd-color_highlight-2: #34cafb*/
/* $xd-color_highlight-3: #78dcfc*/
/* $xd-color_highlight-4: #bbedfe*/
/* $xd-color_highlight-5: #e4f8fe*/
/* $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: #0088aa;
}
/*
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:
Styleguide Recipes.Cards.Webinar
*/
/*
Webinar Buttons
Graphic areas that hold a snippet of a webinar.
| Style Combo | Effect | Classes |
| ----------- | ------------------------------------------------------------------ | -------------------------------------------- |
| primary | Alters the button style to a btn-primary instead of just a link. | btn-primary c_white |
| shade | Alters the button style to a btn-shade instead of just a link. | btn-shade c_white |
| success | Alters the button style to a btn-success instead of just a link. | bg_success h:bg_success-n2 br_radius c_white |
.btn-primary.c_white - Alters the button style to a btn-primary instead of just a link.
.btn-shade.c_white - Alters the button style to a btn-shade instead of just a link.
.bg_success.h:bg_success-n2.br_radius.c_white - Alters the button style to a btn-success instead of just a link.
Markup:
Styleguide Recipes.Cards.Webinar Buttons
*/
.webinar {
width: 100%;
height: 140px;
background-image: url(../img/cvquality/webinar/webinar-thumbnail.jpg);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
.webinar.ep-webinar {
background-image: url(../img/cvquality/webinar/ep-webinar-thumbnail.jpg);
}
.webinar.afib-webinar {
background-image: url(../img/cvquality/webinar/afib-webinar-thumbnail.jpg);
}
.webinar.cathlab-webinar {
background-image: url(../img/cvquality/webinar/cathlab-webinar-thumbnail.jpg);
}
.webinar.cpc-webinar {
background-image: url(../img/cvquality/webinar/cpc-webinar-thumbnail.jpg);
}
.webinar.fsed-webinar {
background-image: url(../img/cvquality/webinar/fsed-webinar-thumbnail.jpg);
}
.webinar.hf-webinar {
background-image: url(../img/cvquality/webinar/hf-webinar-thumbnail.jpg);
}
/*
Jumbotron
Jumbotron are hero content areas. Larger marketing text with a colored backgrounds to grab the user or mark the page as important. By default Jumbotron is dark text on a light grey background the UC's add some predefined colored backgrounds allow for modificaiton of the area. The backgrounds were generated by this online generator https://qrohlf.com/trianglify-generator/.
| Class | Effect |
| ------------ | ---------------------------------------------------- |
| .orange-blue | orange to blue background |
| .orange-grey | orange to grey background |
| .blue-grey | blue to grey background |
| .soft | softens the edges of the triangles in the background |
| .blur | blurs the back to a smooth gradient |
.orange-blue - orange to blue background
.orange-grey - orange to grey background
.blue-grey - blue to grey background
.soft - softens the edges of the triangles in the background
.blur.blue-grey - blurs the back to a smooth gradient
Markup:
Weight: 50
Styleguide Recipes.Containers.Jumbotron
*/
.jumbotron:before {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
display: block;
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url("../img/cvquality/pattern-grey.png") no-repeat center center;
background-size: cover;
content: "";
}
.jumbotron.orange-blue:before {
background-image: url("../img/cvquality/pattern-orange-blue.png");
}
.jumbotron.orange-grey:before {
background-image: url("../img/cvquality/pattern-orange-grey.png");
}
.jumbotron.blue-grey:before {
background-image: url("../img/cvquality/pattern-blue-grey.png");
}
.jumbotron.soft:before {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
filter: blur(3px);
}
.jumbotron.blur:before {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
top: -25px;
right: -25px;
bottom: -25px;
left: -25px;
filter: blur(25px);
}
.jumbotron .container {
z-index: 3;
}
/*
Triangles
Colored Triangles are used through out the cvquality design. To add triangle that adhears to the side of a container and takes on the color of the border color of the container.
.triangle_left - left placed triangle.
.triangle_right - right placed triangle.
.triangle_bottom - bottom placed triangle.
.triangle_top - top placed triangle.
Markup:
Highlighted Card
Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.
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:
