The breakdown of the names for UCs follow a structured patter for easy muscle memory learning.
All of the Style Names follow this ordered pattern of construction.
State - Hover (Optional: always ends with a colon)
Style Name
Style Name Modifier (Optional: always starts with a hyphen)
Divider or Equal To (Optional: if it is a style value pair use the underscore as an equals)
Value
Value Modifier (Optional: always starts with a hyphen)
Breakpoint (Optional: always starts with a colon)
Example 1
Make the background color primary modified by the shading of negative 2 when the cursor has hovered over it.
I have the class h:bg_primary-n2
Long Name
hover:
background-color
_
primary
Modify Negative 2
Utility Class
h:
bg
_
primary
-n2
'h' => Interaction State
'bg' => Style Name
`_` => Value Divider think of this as an equal mark
`primary` => Value
`n2` => Modifier Values most follow a [n5 , n4, n3, n2, n1, {0 is
default} , 1, 2, 3, 4, 5, color names, or shade values]
`lg`=> Breakpoint Value
Long Name Example 2
Add 1 rem of padding to the top when screen is medium and up
padding
top
Equals
value 4 = 1rem
at the medium breakpoint
Utility Class Example
p
-t
_
4
:md
Styleguide Anatomy.Parts
*/
/*
Interaction State
Pseudo DOM states
| states | Short Name | CSS | Currently Used |
| ----------- | ---------- | -------- | -------------------------------------- |
| hover | h: | :hover | Yes |
| active | a: | :active | Partial |
| ~~visited~~ | ~~v:~~ | :visited | Not Used |
Weight: 100
Styleguide Anatomy.State
*/
/*
Style Names
## List of the short hand for style names
The breakdown of the names for UCs follow a structured patter for easy muscle memory learning.
| CSS Style | Short Name | has modifier | Uses Stepped Value |
| --------------------------------------- | ---------- | ---------------------------- | ------------------------------------------ |
| background-color | .bg | | as a modifier |
| border-color | .br | | as a modifier |
| border-radius | .br | | |
| border-width | .br | | |
| color | .c | | as a modifier |
| clear | .clear | | |
| display | . | | |
| flex | .flex | | |
| float | .float | | |
| font-size | .font | | |
| font-family | .font | | |
| font-weight | .font | | |
| font-style | .font | | |
| height | .h | | |
| justify-content | .justify | | |
| margin | .m | | |
| overflow | .overflow | | |
| padding | .p | | |
| position | . | | |
| top | .t | | |
| right | .r | | |
| bottom | .b | | |
| left | .l | | |
| line-height | .lh | | |
| width | .w | | |
| max-width | .max-w | | |
Weight:200
Styleguide Anatomy.Style
*/
/*
Name Modifiers
## List of CSS Style Name Modifiers
The breakdown of the names for UCs follow a structured patter for easy muscle memory learning.
| Style | Short Name | Example |
| ------------ | ---------- | -------------------------- |
| top | -t | margin-top |
| bottom | -b | margin-bottom |
| left | -l | margin-left |
| right | -r | margin-right |
| top-right | -tr | border-top-right-radius |
| top-left | -tl | border-top-left-radius |
| bottom-right | -br | border-bottom-right-radius |
| bottom-left | -bl | border-bottom-left-radius |
Weight:300
Styleguide Anatomy.StyleModifiers
*/
/*
Common Values
## List of the positive to negative stepped values
### Values
| Value Postfix | Font Size | Margin, top, left, right, bottom | Padding | Line Height | border-width | Color Modifier |
| ------------- | --------- | -------------------------------- | -------------------- | ----------- | ------------ | ---------------------- |
| n5 | ms(-5) | -2 \* X† | N/A | N/A | N/A | mix(color, black, 90%) |
| n4 | ms(-4) | -1 \* X† | N/A | N/A | N/A | mix(color, black, 70%) |
| n3 | ms(-3) | -.5 \* X† | N/A | N/A | N/A | mix(color, black, 50%) |
| n2 | ms(-2) | -.25 \* X† | N/A | N/A | N/A | mix(color, black, 30%) |
| n1 | ms(-1) | -.1 \* X† | N/A | N/A | N/A | mix(color, black, 10%) |
| 0 | ms(0) | 0 | 0 | 0 | 0 | color @ 100% |
| 1 | ms(1) | .1 \* X† | .1 \* X† | 1 | 1px | mix(color, white, 10%) |
| 2 | ms(2) | .25 \* X† | .25 \* X† | 1.45 | 3px | mix(color, white, 30%) |
| 3 | ms(3) | .5 \* X† | 5 \* X† | 1.65 | 5px | mix(color, white, 50%) |
| 4 | ms(4) | 1 \* X† | 1 \* X† | 1.75 | .5rem | mix(color, white, 70%) |
| 5 | ms(5) | 2 \* X† | 2 \* X† | 2 | 1rem | mix(color, white, 90%) |
† x = global spacing 1 rem
Weight:400
Styleguide Anatomy.ValuesStepped
*/
/*
Alternate Values
## Alternate Values
#### Border Radius
| Value Postfix | Border Radius Values |
| ------------- | -------------------- |
| square | 0 |
| radius | 5px or Global Radius |
| round | 25px |
| circle | 100% |
#### Border Style
| Value Postfix | Border Style Values |
| ------------- | ------------------- |
| none | none |
| dashed | dashed |
| solid | solid |
#### Display
| Value Postfix | Display |
| ------------- | ------------ |
| none | none |
| block | block |
| inline | inline |
| inline-block | inline-block |
| flex | flex |
#### Overflow
| Value Postfix | Overflow |
| ------------- | -------- |
| auto | auto |
| clip | clip |
| scroll | scroll |
| hidden | hidden |
| ellipsis | ellipsis |
| visible | visible |
| unset | unset |
#### max-width
| Value Postfix | dimension | Use case |
| ------------- | --------- | ------------------- |
| 5 | 5 rem | |
| 10 | 10rem | |
| 15 | 15rem | |
| 20 | 20rem | Small Phone Size |
| 25 | 25rem | |
| 30 | 30rem | Short Readable Zone |
| 35 | 35rem | Short Readable Zone |
| 40 | 40rem | Short Readable Zone |
| 45 | 45rem | Readable Zone |
| 50 | 50rem | Readable Zone |
| 55 | 55rem | Readable Zone |
| 60 | 60rem | Readable Zone |
| 65 | 65rem | Readable Zone |
| 70 | 70rem | Readable Zone |
| 75 | 75rem | |
| 80 | 80rem | |
| 85 | 85rem | Max Desktop Range |
| 90 | 90rem | Max Desktop Range |
| 95 | 95rem | Max Desktop Range |
Weight: 450
Styleguide Anatomy.ValuesAlternate
*/
/*
Break Points
| break point | Short Name | css | dimension | Currently Used |
| ----------- | ---------- | --------------- | --------- | ------------------------------- |
| all sizes | '' | min-width: 0em | 0px | default |
| ~~small~~ | ':sm' | min-width: 30em | 480px | No |
| medium | ':md' | min-width: 40em | 640px | Yes |
| large | ':lg' | min-width: 40em | 1024px | Yes |
Weight: 500
Styleguide Anatomy.Breakpoints
*/
/*
Extra Credit
## Reserved Names
#### Reserved Words and Modifier Descriptors
These words should be used to describe states and generic elements of the UI and should be used instead of some variation or alternate name.
#### Component Name Modifier
Components styling is most are
- ** -container ** or UI Name with no modifier (Use instead of holder when items are UI based)
- ** -group ** or UI Name with no modifier (Use instead of list, holder, collection when items or repeatable Content)
- ** -item ** or UI Name with no modifier (generic child of container or group)
- ** -separator ** (a visual treatment or break between items within a container or group )
#### States
- show
- hide
- is-active
- is-complete
- is-disabled
- is-current
- is-selected
- focus
- success
- hover
- warning
- alert (Depreciate the use of ‘error’ for the native descriptor from foundation)
- primary
- secondary
- reverse
## Colors
- State Colors
- -success, -green
- -warning, -orange
- -alert, -red
- -primary, -productColor
- -secondary
- -highlight
- Black
- White
- Black and White have transparencies
- -10 alpha,
- -20 alpha,
- -30 alpha,
- -40 alpha,
- -50 alpha,
- -60 alpha,
- -70 alpha,
- -80 alpha,
- -90 alpha
Weight: 1000
Styleguide Anatomy.ExtraCredit
*/
.reading-typography {
text-rendering: auto;
}
:where(.reading-typography) {
font-weight: var(--font_regular);
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_copy);
}
:where(.reading-typography) :where(h1,h2,h3,h4,h5,h6) {
margin-bottom: 12px;
margin-bottom: 0.75rem;
color: inherit;
}
:where(.reading-typography) :where(h1,h2,h3,h4,h5,h6):not(:first-child) {
margin-top: 24px;
margin-top: 1.5rem;
}
:where(.reading-typography) :where(h1,h2,h3,h4,h5,h6) + :where(h1,h2,h3,h4,h5,h6):not(:first-child) {
margin-top: -6px;
margin-top: -0.375rem;
}
:where(.reading-typography) h6, :where(.reading-typography) h5, :where(.reading-typography) h4, :where(.reading-typography) h3, :where(.reading-typography) h2, :where(.reading-typography) h1 {
font-family: var(--font-family_display);
}
:where(.reading-typography) li, :where(.reading-typography) p {
line-height: 1.35;
font-family: var(--font-family_copy);
}
:where(.reading-typography) h3, :where(.reading-typography) h2, :where(.reading-typography) h1 {
line-height: 1.125;
}
:where(.reading-typography) h6, :where(.reading-typography) h5, :where(.reading-typography) h4 {
line-height: 1.35;
}
:where(.reading-typography) h1 {
font-size: 28.832px;
font-size: 1.8020324707rem;
}
:where(.reading-typography) h2 {
font-size: 25.628px;
font-size: 1.6018066406rem;
}
:where(.reading-typography) h3 {
font-size: 22.781px;
font-size: 1.423828125rem;
}
:where(.reading-typography) h4 {
font-size: 20.25px;
font-size: 1.265625rem;
}
:where(.reading-typography) h5 {
font-weight: var(--font_bold);
font-size: 18px;
font-size: 1.125rem;
}
:where(.reading-typography) h6 {
font-weight: var(--font_bold);
font-size: 18px;
font-size: 1.125rem;
}
:where(.reading-typography) li {
margin-top: 4px;
margin-top: 0.25rem;
margin-bottom: 8px;
margin-bottom: 0.5rem;
padding-left: 4px;
padding-left: 0.25rem;
}
:where(.reading-typography) ul,
:where(.reading-typography) ol {
padding-left: 32px;
padding-left: 2rem;
list-style-position: outside;
}
:where(.reading-typography) ul {
list-style-type: disc;
}
:where(.reading-typography) ul ul {
list-style-type: circle;
}
:where(.reading-typography) ol {
list-style-type: decimal;
}
:where(.reading-typography) ol ol {
list-style-type: lower-alpha;
}
:where(.reading-typography) li > ul,
:where(.reading-typography) li > ol {
margin-left: 16px;
margin-left: 1rem;
padding-left: 16px;
padding-left: 1rem;
}
:where(.reading-typography) li + li {
margin-top: 8px;
margin-top: 0.5rem;
}
:where(.reading-typography) li:last-child {
margin-bottom: 8px;
margin-bottom: 0.5rem;
}
:where(.reading-typography) p + p {
margin-top: 8px;
margin-top: 0.5rem;
}
:where(.reading-typography) abbr {
-webkit-text-decoration: 1px dotted inherit;
text-decoration: 1px dotted inherit;
}
:where(.reading-typography) hr {
margin: 16px 0;
margin: 1rem 0;
}
:where(.reading-typography) img, :where(.reading-typography) a img {
width: 100%;
margin: 0;
border: 0px none;
}
:where(.reading-typography) a:has(> img) {
display: inline-block;
}
:where(.reading-typography) p,
:where(.reading-typography) ul,
:where(.reading-typography) ol,
:where(.reading-typography) dl,
:where(.reading-typography) table {
margin-top: 8px;
margin-top: 0.5rem;
margin-bottom: 16px;
margin-bottom: 1rem;
font-size: max(16px, 16px);
font-size: max(1rem, 16px);
}
:where(.reading-typography) table {
border-color: inherit;
color: inherit;
}
:where(.reading-typography) table {
width: 100%;
}
:where(.reading-typography) thead {
border-block-end: 1px solid currentColor;
}
:where(.reading-typography).no-margins h1,
:where(.reading-typography).no-margins h2,
:where(.reading-typography).no-margins h3,
:where(.reading-typography).no-margins h4,
:where(.reading-typography).no-margins h5,
:where(.reading-typography).no-margins h6 {
margin: 0 !important;
}
:where(.reading-typography) code {
color: inherit;
font-family: var(--font-family_mono);
}
:where(.reading-typography) a:not([href], [class]), :where(.reading-typography) a:not([href], [class]):hover {
color: inherit;
text-decoration: none;
}
:where(.reading-typography) a:not(.btn, .not-link) {
font-weight: var(--font_medium);
}
:where(.reading-typography):not(.color_inherit) :where(h1,h2,h3,h4,h5,h6) {
color: var(--custom-color, #157894);
}
:where(.reading-typography):not(.color_inherit) table {
border-color: var(--custom-color, #157894);
}
:where(.reading-typography):not(.color_inherit) thead {
border-block-end-color: var(--custom-color, #157894);
color: var(--custom-color, #157894);
}
:where(.reading-typography):not(.color_inherit) code {
color: var(--code-color, var(--accent));
}
:where(.reading-typography):not(.color_inherit) abbr {
-webkit-text-decoration: 1px dotted var(--highlight);
text-decoration: 1px dotted var(--highlight);
}
:where(.reading-typography):not(.color_inherit) ::marker {
color: var(--custom-color, currentColor);
}
.color_inherit:where(.reading-typography) {
--custom-color:inherit;
}
.color_inherit:where(.reading-typography) :where(h1,h2,h3,h4,h5,h6) {
color: var(--custom-color, inherit);
}
.color_inherit:where(.reading-typography) table {
border-color: var(--custom-color, inherit);
}
.color_inherit:where(.reading-typography) thead {
border-block-end-color: var(--custom-color, inherit);
color: var(--custom-color, inherit);
}
.color_inherit:where(.reading-typography) code {
color: currentColor;
}
.color_inherit:where(.reading-typography) abbr {
-webkit-text-decoration: 1px dotted var(--custom-color, inherit);
text-decoration: 1px dotted var(--custom-color, inherit);
}
.color_inherit:where(.reading-typography) ::marker {
color: var(--custom-color, currentColor);
}
:root {
--custom-font-size-modifier: 1.5;
}
.font-size_up:where(.reading-typography) {
--custom-font-size-up: var(--custom-font-size-modifier);
font-size: calc(1rem * var(--custom-font-size-down));
}
.font-size_up:where(.reading-typography) h1 {
font-size: calc(2.0272865295rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) h2 {
font-size: calc(1.8020324707rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) h3 {
font-size: calc(1.6018066406rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) h4 {
font-size: calc(1.423828125rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) h5, .font-size_up:where(.reading-typography) h6 {
font-size: calc(1.265625rem * var(--custom-font-size-up));
}
.font-size_up:where(.reading-typography) p,
.font-size_up:where(.reading-typography) ul,
.font-size_up:where(.reading-typography) ol,
.font-size_up:where(.reading-typography) dl,
.font-size_up:where(.reading-typography) table {
font-size: calc(1.125rem * var(--custom-font-size-up) );
}
.font-size_down:where(.reading-typography) {
--custom-font-size-down:calc( 1/ var(--custom-font-size-modifier) );
font-size: calc(1rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h1 {
font-size: calc(1.6018066406rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h2 {
font-size: calc(1.423828125rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h3 {
font-size: calc(1.265625rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h4 {
font-size: calc(1.125rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h5 {
font-size: calc(1rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) h6 {
font-size: calc(1rem * var(--custom-font-size-down));
}
.font-size_down:where(.reading-typography) p,
.font-size_down:where(.reading-typography) ul,
.font-size_down:where(.reading-typography) ol,
.font-size_down:where(.reading-typography) dl,
.font-size_down:where(.reading-typography) table {
margin-block-start: 4px;
margin-block-start: 0.25rem;
margin-block-end: 8px;
margin-block-end: 0.5rem;
font-size: calc(1rem * var(--custom-font-size-down));
}
/*
Typography
These utility classes enable the manipulation of features such as font size, weight, decoration, white-space, and overflow, providing greater control over the typographic elements in your design.
Weight: -100
Styleguide Typography
*/
/*
Font
Weight: 0
Styleguide Typography.Font
*/
/*
Text
Weight: 1
Styleguide Typography.Text
*/
/* No Styleguide reference. */
.font_unset {
font-style: unset;
font-weight: unset;
font-size: unset;
text-align: unset;
text-decoration: unset;
text-transform: unset;
white-space: unset;
}
/*
Font Weight
These classes are examples of CSS styles that operate as utility classes to control font weight across various text elements.
.font_light - Light, 100
.font_regular - Regular, 300
.font_medium - Medium, 500
.font_bold - Bold, 700
.font_xbold - Extra Bold, 900
Markup:
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
Weight: -80
Styleguide Typography.Font.Weight
*/
:root {
--font_light:300;
--font_regular:400;
--font_medium:500;
--font_bold:700;
--font_xbold:900;
}
.font_light {
font-weight: var(--font_light, 300);
}
.font_regular, .reading-typography {
font-weight: var(--font_regular, 400);
}
.font_medium, .btn_acc-primary {
font-weight: var(--font_medium, 500);
}
.font_bold, strong, b {
font-weight: var(--font_bold, 700);
}
.font_xbold {
font-weight: var(--font_xbold, 900);
}
/*
Font Family
You can modify the font family used in your text elements with these simple utility classe.
.font_accent - Font Accent: Primarily used in main navigation elements and certain headers.
.font_display - Font Display: Employed in headlines and buttons.
.font_copy - Font Copy: Typically used in content text.
.font_ui - Font UI: Applied to components like navigation elements and dense user interface elements.
.font_mono - Font Mono: This is commonly used in quotations, data displays, or code snippets
Markup:
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
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
Styleguide Typography.Font.Style
*/
.font_normal {
font-style: normal !important;
}
.font_italic {
font-style: italic !important;
}
/*
Font Color
Using these straightforward utility classes, you can adjust the color of your text.
.c_white - text that's white
.c_black - text that's black
.c_primary - text that's primary
.c_alert - text that's alert
.c_info - text that's info
.c_warning - text that's warning the user
.c_inherit - text that inherits from its parent
Markup:
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
You can alter the wrapping style with these UCs.
.wrap - alter the wrapping style to wrap
.pre-wrap - alter the wrapping style to pre-wrap
.nowrap - alter the wrapping style to nowrap
Markup:
Quae sapiente reprehenderit explicabo esse consequatur error fugiat. Voluptas odit ipsam architecto quae perspiciatis nostrum autem at. Ut veritatis molestiae distinctio autem repudiandae voluptatem voluptatibus aspernatur.
Styleguide Typography.Text.Wrap
*/
.wrap {
white-space: normal;
}
.pre-wrap {
letter-spacing: -0.01em;
white-space: pre-wrap;
}
.nowrap {
white-space: nowrap;
}
@media only screen and (min-width : 768px) {
.wrap\:md {
white-space: normal;
}
.pre-wrap\:md {
letter-spacing: -0.01em;
white-space: pre-wrap;
}
.nowrap\:md {
white-space: nowrap;
}
}
@media only screen and (min-width : 1024px) {
.wrap\:lg {
white-space: normal;
}
.pre-wrap\:lg {
letter-spacing: -0.01em;
white-space: pre-wrap;
}
.nowrap\:lg {
white-space: nowrap;
}
}
.wb_break-all {
word-break: break-all;
}
.wb_word-break {
word-break: word-break;
}
.wb_keep-all {
word-break: keep-all;
}
.wb_normal {
word-break: normal;
}
.wb_unset {
word-break: unset;
}
@media only screen and (min-width : 1024px) {
.wb_break-all {
word-break: break-all;
}
.wb_word-break {
word-break: word-break;
}
.wb_keep-all {
word-break: keep-all;
}
.wb_normal {
word-break: normal;
}
.wb_unset {
word-break: unset;
}
.wb_break-all {
word-break: break-all;
}
.wb_word-break {
word-break: word-break;
}
.wb_keep-all {
word-break: keep-all;
}
.wb_normal {
word-break: normal;
}
.wb_unset {
word-break: unset;
}
}
@media only screen and (min-width : 1024px) {
}
/*
Text Decoration
Decoration can be easily added to text through these UCs.
.underline - solid underline the text
.dotted - dotted underline the text
.double - double underline the text
.dashed - dashed underline the text
.undecorated - unset the decoration of the text
.uppercase - uppercase the text
.lowercase - lowercase the text
.capitalize - capitalize the text
Markup:
Styleguide Typography.Text.Decoration
*/
.lowercase {
text-transform: lowercase;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.underline {
text-decoration: underline;
}
.dotted {
-webkit-text-decoration: dotted;
text-decoration: dotted;
}
.double {
-webkit-text-decoration: double;
text-decoration: double;
}
.dashed {
-webkit-text-decoration: dashed;
text-decoration: dashed;
}
.undecorated {
text-decoration: none;
}
/*
Text Shadows
Shadows can be easily added to text there is limited shadows black and white and negative black and white
.text-shadow_white-n1 - inset white shadow
.text-shadow_white-1 - white shadow
.text-shadow_black-n1 - inset black shadow
.text-shadow_black-1 - black shadow
.text-shadow_none - no shadow
Markup:
text has shadow of {{modifier_class}}
Styleguide Typography.Text.Shadow
*/
.text-shadow_none {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
.text-shadow_white-1 {
text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.25);
}
.text-shadow_black-1 {
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}
.text-shadow_white-n1 {
text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.5);
}
.text-shadow_black-n1 {
text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.5);
}
/*
Text Indent
Indent text needs to have a modifier to like `text-indent_2
text-indent_n3 - text-indent of negative 3 rem
text-indent_n2 - text-indent of negative 2 rem
text-indent_n1 - text-indent of negative 1 rem
text-indent_0 - text-indent of positive 0 rem
text-indent_1 - text-indent of positive 1 rem
text-indent_2 - text-indent of positive 2 rem
text-indent_3 - text-indent of positive 3 rem
Markup:
text that has no indent/p>
text that has an indent magnitude of {{modifier_class}}
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Styleguide Typography.Text.Alignment
*/
.text_unset {
text-align: unset !important;
}
.text_center, .btn_acc-primary {
text-align: center !important;
}
.text_left {
text-align: left !important;
}
.text_right {
text-align: right !important;
}
.text_start {
text-align: start !important;
}
.text_end {
text-align: end !important;
}
@media only screen and (min-width : 768px) {
.text_unset\:md {
text-align: unset !important;
}
.text_center\:md {
text-align: center !important;
}
.text_left\:md {
text-align: left !important;
}
.text_right\:md {
text-align: right !important;
}
.text_start\:md {
text-align: start !important;
}
.text_end\:md {
text-align: end !important;
}
}
@media only screen and (min-width : 1024px) {
.text_unset\:lg {
text-align: unset !important;
}
.text_center\:lg {
text-align: center !important;
}
.text_left\:lg {
text-align: left !important;
}
.text_right\:lg {
text-align: right !important;
}
.text_start\:lg {
text-align: start !important;
}
.text_end\:lg {
text-align: end !important;
}
}
/*
List
Description: A major part of the construction of the web and the content of the web are lists.
Weight: 110
Styleguide List
*/
/*
List Type
Change the type of a list.
.ul_none - none
.ul_bullet - bullet
.ul_square - square
Markup:
{{modifier_class}}
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Weight: 0
Styleguide List.Type
*/
.ul_none {
margin: 0;
padding: 0;
list-style-type: none !important;
}
.ul_bullet {
list-style-type: disc !important;
}
.ul_circle {
list-style-type: circle !important;
}
.ul_square {
list-style-type: square !important;
}
.ul_lowercase {
list-style-type: lower-alpha !important;
}
.ul_uppercase {
list-style-type: upper-alpha !important;
}
/*
Marker
Markers classes change the styles and looks of the the list item maker. Marker must attach to the parent UL or Ol and will not style the grand children.
.marker_primary - primary colored list markers.
.marker_secondary - secondary colored list markers.
.marker_accent - accent colored list markers.
.marker_alert - alert colored list markers.
.marker_warning - warning colored list markers.
.marker_success - success colored list markers.
.marker_highlight - highlight colored list markers.
.marker_black - black colored list markers.
.marker_white - white colored list markers.
Markup:
List Item Text
List Item Text
List Item Text
List Item Grand Children
List Item Grand Children
List Item Text
List Item Text
List Item Text
MarkupWrapperClasses: bg_black-2 p_5
Weight:10
Styleguide List.Marker
*/
.marker_primary > *::marker {
color: #198dae;
}
.marker_secondary > *::marker {
color: #676a72;
}
.marker_success > *::marker {
color: #078a2e;
}
.marker_shade > *::marker {
color: #878585;
}
.marker_warning > *::marker {
color: #da8210;
}
.marker_alert > *::marker {
color: #dd1a1a;
}
.marker_navigation > *::marker {
color: #2b58c0;
}
.marker_accent > *::marker {
color: #16a385;
}
.marker_info > *::marker {
color: #a3988c;
}
.marker_highlight > *::marker {
color: #7742bd;
}
.marker_acc > *::marker {
color: #004176;
}
.marker_black > *::marker {
color: #131212;
}
.marker_white > *::marker {
color: white;
}
/*
Counters
Add counters in front of collections without the need of an OL or UL for an advanced list type. Counters cannot be nested!
Weight: 250
Styleguide List.counters
*/
/* No styleguide reference. */
/*
Counter Basics
Counter can be incremented by the `counter_increment` class.
Markup:
: Item, Object, or Section
: Item, Object, or Section
: Item, Object, or Section
Weight: -100
Styleguide List.counters.basics
*/
.counter_reset {
counter-reset: a;
}
.counter_increment {
counter-increment: a;
}
.counter:before {
content: counter(a);
}
/*
Counter Sub
Counter Subs can be nested inside of counters
Markup:
Item, Object, or Section
. Sub Item
. Sub Item
. Sub Item
Item, Object, or Section
Item, Object, or Section
Styleguide List.counters.sub counters
*/
.counter-sub_reset {
counter-reset: b;
}
.counter-sub_increment {
counter-increment: b;
}
/*
Counter Types
Create different types of list with the counter types
counter - Defualt Number Listing
counter_lower-alpha - Lowercase Alphabetic Listing
counter_upper-alpha - Uppercase Alphabetic Listing
counter_lower-roman - Lowercase Roman Listing
counter_upper-roman - Uppercase Roman Listing
Markup:
Item, Object, or Section
Item, Object, or Section
Item, Object, or Section
Styleguide List.counters.types
*/
.counter_lower-alpha:before {
content: counter(a, lower-alpha);
}
.counter_upper-alpha:before {
content: counter(a, upper-alpha);
}
.counter_lower-roman:before {
content: counter(a, lower-roman);
}
.counter_upper-roman:before {
content: counter(a, upper-roman);
}
.counter-sub:before {
content: counter(b);
}
.counter-sub_lower-alpha:before {
content: counter(b, lower-alpha);
}
.counter-sub_upper-alpha:before {
content: counter(b, upper-alpha);
}
.counter-sub_lower-roman:before {
content: counter(b, lower-roman);
}
.counter-sub_upper-roman:before {
content: counter(b, upper-roman);
}
/*
Order Markers
Quickly decorate the counter with a circle. Change the bgground and font color with utility classes to acheive different effects.
Markup:
Item, Object, or Section
Item, Object, or Section
Item, Object, or Section
Item, Object, or Section
Weight: 100
Styleguide List.counters.markers
*/
.order-marker {
box-sizing: border-box;
display: inline-block;
position: relative;
width: 1.5em;
height: 1.5em;
margin-right: 0;
margin-right: 0.5em;
margin-bottom: 0;
padding: 0.75em 0 0 0;
line-height: 0;
text-align: center;
vertical-align: top;
}
/*
Inline Lists
Inline Lists are for separated items on a single line.
.ul_row.gap_4 - basic ul with no separators but formatted with flex row
.ul_inline - basic inline ul with no separators
.ul_inline-comma - wrapping line of text that is separated by commas
.ul_inline-semicolon - wrapping line of text that is separated by semicolons
.ul_inline-pipe - wrapping line of text that is separated by pipes
Markup:
{{modifier_class}}
Evelyn Watsica II
Linda Lang
Laurie Greenfelder
Katie Wiegand
Brittany Conn
NOTE: The limitations of the styleguide around compound pseudo selector :not(:last-child):after means a trailing divider shows up in documentation but not in production applications. Added a workaround to hide the divider via the following style tag in the example. This is not necessary in production applications.
Weight: 1000
Styleguide List.InlineType
*/
.ul_row, .ul_inline, .ul_inline-comma,
.ul_inline-semicolon,
.ul_inline-pipe {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
justify-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.ul_row > li, .ul_inline > li, .ul_inline-comma > li,
.ul_inline-semicolon > li,
.ul_inline-pipe > li {
flex: 0 1 auto;
margin: 0;
}
.ul_inline, .ul_inline-comma,
.ul_inline-semicolon,
.ul_inline-pipe {
display: inline-flex;
}
.ul_inline-comma > li:not(:last-child)::after,
.ul_inline-semicolon > li:not(:last-child)::after,
.ul_inline-pipe > li:not(:last-child)::after {
margin: 0;
padding-inline-start: 0;
padding-inline-end: 0.5em;
opacity: 0.6;
}
.ul_inline-comma li.no-after,
.ul_inline-semicolon li.no-after,
.ul_inline-pipe li.no-after {
padding-inline-end: 0.5em;
}
.ul_inline-comma li.no-after::after,
.ul_inline-semicolon li.no-after::after,
.ul_inline-pipe li.no-after::after {
display: none !important;
}
.ul_inline-comma > li:not(:last-child)::after {
content: ",";
}
.ul_inline-semicolon > li:not(:last-child)::after {
content: ";";
}
.ul_inline-pipe > li:not(:last-child)::after {
padding-inline-start: 0.5em;
content: "|";
}
/*
Margin
Is Responsive: breakpoint modifiers
Margin classes are mobile first with postfix modifier for `:md`and `:lg` variations for responsive sizing. Margins that use the short codes of all margin, auto, x margins, and y margin are override by specific side margins.
m_0 - margin: 0
m_n5 - margin: -2rem
m_n2 - margin: -0.25rem
m_4 - margin: 1rem
m-l_n5 - margin-left: -2rem
m-l_1 - margin-left: 1px
m-l_2 - margin-left: 0.25rem
m-l_3 - margin-left: 0.5rem
m-x_auto - margin-left, margin-right: auto
m-y_3 - margin-top, margin-bottom: 0.5rem
Markup:
.p_0 - padding: 0
.p_1 - padding: 1px
.p_2 - padding: 0.25rem
.p_3 - padding: 0.5rem
.p_4 - padding: 1rem
.p_5 - padding: 2rem
.p-x_5 - left and right paddings set to 2x of global padding
.p-y_5 - top and bottom paddings set to 2x of global padding
.p-t_4 - Top padding set to global padding
.p-r_4 - Right padding set to global padding
.p-l_4 - Left padding set to global padding
.p-b_4 - Bottom padding set to global padding
Markup:
Quickly alter the position type and location of an object with 'absolute' and 'top'
.initial - position: initial
.inherit - position: inherit
.relative - position: relative
.absolute - position: absolute
.fixed - position: fixed
.sticky - position: sticky
.unset - position: unset
Markup:
Position {{modifier_class}}
Styleguide Layouts.Position
*/
.initial {
position: initial !important;
}
.inherit {
position: inherit !important;
}
.relative {
position: relative !important;
}
.absolute {
position: absolute !important;
}
.fixed {
position: fixed !important;
}
.sticky {
position: sticky !important;
}
.unset {
position: unset !important;
}
@media only screen and (min-width : 768px) {
.initial\:md {
position: initial !important;
}
.inherit\:md {
position: inherit !important;
}
.relative\:md {
position: relative !important;
}
.absolute\:md {
position: absolute !important;
}
.fixed\:md {
position: fixed !important;
}
.sticky\:md {
position: sticky !important;
}
.unset\:md {
position: unset !important;
}
}
@media only screen and (min-width : 1024px) {
.initial\:lg {
position: initial !important;
}
.inherit\:lg {
position: inherit !important;
}
.relative\:lg {
position: relative !important;
}
.absolute\:lg {
position: absolute !important;
}
.fixed\:lg {
position: fixed !important;
}
.sticky\:lg {
position: sticky !important;
}
.unset\:lg {
position: unset !important;
}
}
/*
Location Position
Directional Position
The directional positioning classes are used to specify the positioning of an element in a specific direction. The directional positioning classes are most useful when combined with the "absolute" positioning mode, but it can also be used with other positioning modes. It allows you to specify the positioning of an element in a specific direction, such as inset, top, right, bottom, or left.
Styleguide Layouts.Location
*/
/*
Inset
Is Responsive: breakpoint modifiers
The "inset" CSS property allows you to specify the positioning of an element's four edges within its containing element. It provides a convenient shorthand for defining the values of "top," "right," "bottom," and "left" properties simultaneously. By using the "inset" property, you can easily control the placement of an element without the need to specify each edge individually.
.inset_auto - modify inset of an absolute positioned block
.inset_0 - modify inset of an absolute positioned block
.inset_3 - modify inset of an absolute positioned block
.inset_5 - modify inset of an absolute positioned block
.inset_n3 - modify inset of an absolute positioned block
.inset_n5 - modify inset of an absolute positioned block
Markup:
Position Absolute {{modifier_class}}
NOTE: The ".inset_x" CSS class has lower specificity in the cascade, enabling a corresponding directional class to override its positioning at that specific responsive layer.
Styleguide Layouts.Location.Inset
*/
/*
Directional Position
Is Responsive: breakpoint modifiers
Quickly alter the position type and location of an object with top, bottom, left, and right position modifiers. All of these modifiers will follow the rules of the containers position type. All of the examples below are using absolute positions to have the greatest effect.
.t_1 - modify top of an absolute positioned block
.t_5 - modify top of an absolute positioned block
.b_1 - modify bottom of an absolute positioned block
.b_5 - modify bottom of an absolute positioned block
.r_5 - modify left of an absolute positioned block
.l_5 - modify right of an absolute positioned block
Markup:
Easily Add Float to an object
.float_unset - float: unset
.float_none - float: none
.float_left - float: left
.float_right - float: right
Markup:
Position Absolute {{modifier_class}}
Styleguide Layouts.Float
*/
/*
Clear
Is Responsive: breakpoint modifiers
Quickly alter the position type and location of an object with 'absolute' and 'top'
clear_fix - unset positioned block
clear_left - inital positioned block
clear_right - inherit positioned block
clear_both - relative positioned block
Styleguide Layouts.Clear
*/
.clear_fix:after {
display: table;
clear: both;
content: "";
}
.clear_both {
clear: both;
}
.clear_left {
clear: left;
}
.clear_right {
clear: right;
}
.float_unset {
float: unset;
}
.float_none {
float: none;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
@media only screen and (min-width : 768px) {
.float_unset\:md {
float: unset;
}
.float_none\:md {
float: none;
}
.float_left\:md {
float: left;
}
.float_right\:md {
float: right;
}
.clear_both\:md {
clear: both;
}
.clear_left\:md {
clear: left;
}
.clear_right\:md {
clear: right;
}
}
@media only screen and (min-width : 1024px) {
.float_unset\:lg {
float: unset;
}
.float_none\:lg {
float: none;
}
.float_left\:lg {
float: left;
}
.float_right\:lg {
float: right;
}
.clear_both\:lg {
clear: both;
}
.clear_left\:lg {
clear: left;
}
.clear_right\:lg {
clear: right;
}
}
/*
Layout
Padding, Margins, and Positions are the most common usage for Utility Classes. Layout UC's are responsive and can be postfixed with `:md` and with `:lg` to have finer control on the spacing of objects.
Weight: 120
Styleguide Layouts
*/
/*
Display
Is Responsive: breakpoint modifiers
Alter the display of an object to create more complicated UI and Layouts.
class
responsive modifiers
css property
value
.block
.block:md, .block:lg
display :
block
.inline
.inline:md, .inline:lg
display :
inline
.inline-block
.inline-block:md, .inline-block:lg
display :
inline-block
.table-cell
.table-cell:md, .table-cell:lg
display :
table-cell
.table
.table:md, .table:lg
display :
table
.table-row
.table-row:md, .table-row:lg
display :
table-row
.table-row-group
.table-row-group:md, .table-row-group:lg
display :
table-row-group
.flex
.flex:md, .flex:lg
display :
flex
.inline-flex
.inline-flex:md, .inline-flex:lg
display :
inline-flex
.grid
.grid:md, .grid:lg
display :
grid
.display_contents
.display_contents:md, .display_contents:lg
display :
contents
.display_none
.display_none:md, .display_none:lg
display :
none
Styleguide Layouts.Display
*/
/*
Display Nothing on Empty
This utility class is used to hide an element when it contains no content. This is super useful for creating a space that needs to be decorated but also doesn't need to be shown when empty.
Markup:
Does Not Have class display_none:empty and has No Content
Has class display_none:empty and has No Content
Has class display_none:empty has Content
any content including space will show the element
MarkupWrapperClasses: w_100
NOTE: !! Whitespace counts as not empty !!
Weight:10
Styleguide Layouts.Display.Empty
*/
/*
Display For Touch Devices
Display has extra breakpoints `:touch` that can be used to create layouts that are more friendly for touch screen inputs. Touch devices are often smaller than desktop devices and input method is a finger that can't hover. This utility class can be used to create a layout that is more friendly for touch devices. Touch layouts are often needed to uncover UI that only appears on Hover.
Markup:
This element shows for both desktop and Touch devices
Styleguide Layouts.z-index
*/
.z_0 {
z-index: -1;
}
.z_1 {
z-index: 1;
}
.z_2 {
z-index: 100;
}
.z_3 {
z-index: 1000;
}
.z_4 {
z-index: 5000;
}
.z_5 {
z-index: 9999;
}
.vertical-align_top {
vertical-align: top;
}
.vertical-align_middle {
vertical-align: middle;
}
.vertical-align_bottom {
vertical-align: bottom;
}
.vertical-align_baseline {
vertical-align: baseline;
}
/*
Isolation
Altering the isolation of an object to create more complicated UI and Layouts when dealing with z-index.
class
css property
value
.isolation_isolate
isolation :
isolate
.isolation_auto
isolation :
auto
.isolation_inherit
isolation :
inherit
.isolation_revert
isolation :
revert
.isolation_unset
isolation :
unset
Markup:
Styleguide Layouts.Isolation
*/
.isolation_isolate {
isolation: isolate;
}
.isolation_auto {
isolation: auto;
}
.isolation_inherit {
isolation: inherit;
}
.isolation_revert {
isolation: revert;
}
.isolation_unset {
isolation: unset;
}
/*
Vertical Align
Quickly alter the vertical alignment of the child. caution the vertical only works on valid combinations.
.vertical-align_top - the child is aligned to the Top
.vertical-align_middle - the child is aligned to the Middle
.vertical-align_bottom - the child is aligned to the Bottom
.vertical-align_baseline - the child is aligned to the Baseline
Styleguide Layouts.Display.VerticalAlignment
*/
/*
Flex
Structure Objects quickly and change the order of the
.flex_row - flex_row
.flex_column - flex_column
.flex_row-reverse - flex_column-reverse
.flex_column-reverse - flex_row-reverse
Markup:
1 - gap space modifier
2 - gap space modifier
3 - gap space modifier
4 - gap space modifier
5 - gap space modifier
6 - gap space modifier
Markup:
gap_{{modifier_class}}
1
2
3
4
5
6
7
8
9
gap-y_{{modifier_class}}
1
2
3
4
5
6
7
8
9
gap-x_{{modifier_class}}
1
2
3
4
5
6
7
8
9
Weight: -1000
Styleguide Layouts.Grid.Gap
*/
/*
Equal-width Columns
Description: This group of utility classes sets the grid-template-columns property to create a responsive grid layout with equal-width columns.
.columns_1 - Creates a grid layout with a single column that takes up the entire available space.
.columns_2 - Creates a grid layout with two equal-width columns.
.columns_3 - Creates a grid layout with three equal-width columns.
.columns_4 - Creates a grid layout with four equal-width columns.
.columns_5 - Creates a grid layout with five equal-width columns.
.columns_6 - Creates a grid layout with six equal-width columns.
Markup:
1
2
3
4
5
6
Weight: 0
NOTE: These utility classes are a basic method for creating grid layouts with equal-width columns. However, for more advanced column manipulation techniques, please refer to the documentation below.
Styleguide: Layouts.Grid.Columns.EqualWidth
*/
/*
Advanced Columns
Description: This group of utility classes sets the grid-template-columns property to create a responsive grid layout with custom-width columns using CSS variables. In the below example the `--col-2` variable is set to `3rem` rather thenthe default `fr.`
.columns_1 - repeat on 1 the `--col-2` is never used
.columns_2 - repeat on 2 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide
.columns_3 - repeat on 3 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide
.columns_4 - repeat on 4 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide
.columns_5 - repeat on 5 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide
.columns_6 - repeat on 6 and the second column is stet to be 3rem when smaller then 768 then the column will be 30rem wide
Markup:
1
2
3
4
5
6
Weight: 10
NOTE: These utility classes allow you to easily create grid layouts with columns of customized widths. Simply define the desired width for each row using CSS variables (--col-1, --col-2, etc.). By default, the width is set to 1fr for equal-width columns. However, you can override these values as needed by including inline styles, as shown in this example, or by using in-page style tags. To make responsive adjustments to the CSS variables, you can use in-page style tags to define responsive media queries that modify the values of the CSS variables. For a reference, you can look at the Advanced Rows Advanced example, which uses a style tag to achieve this.
Styleguide: Layouts.Grid.Columns.EqualWidth.Advanced
*/
/*
Equal-Height Rows
Description: This group of utility classes sets the grid-template-rows property to create a responsive grid layout with equal-height rows. Most of the time the rows should be handled automatically unless you are going to use the advanced features referenced in `Advanced Rows `
Weight: 0
NOTE: These utility classes are a basic method for creating grid layouts with equal-height rows. However, for more advanced column manipulation techniques, please refer to the documentation below.
Styleguide: Layouts.Grid.Rows.EqualHeight
*/
/*
Advanced Rows
Description: This group of utility classes sets the grid-template-Rows property to create a responsive grid layout with custom-height Rows using CSS variables. In the below example the `--row-2` variable is set to `10rem` rather thenthe default `fr.`
.rows_1 - repeat on 1 the `--row-2` is never used because it is looping just over the first row.
.rows_2 - repeat on 2 and the second row is stet to be 10rem
.rows_3 - repeat on 3 and the second row is stet to be 10rem
.rows_4 - repeat on 4 and the second row is stet to be 10rem
.rows_5 - repeat on 5 and the second row is stet to be 10rem
.rows_6 - repeat on 6 and the second row is stet to be 10rem
Markup:
1
2
3
4
5
6
Weight: 10
NOTE: These utility classes allow you to easily create grid layouts with rows of customized heights. Simply define the desired height for each column using CSS variables (--row-1, --row-2, etc.). By default, the height is set to 1fr for equal-height rows. However, you can override these values as needed by including inline styles, as shown in this example, or by using in-page style tags. To make responsive adjustments to the CSS variables, you can use in-page style tags to define responsive media queries that modify the values of the CSS variables. For a reference, you can look at the `Advanced Columns Advanced` example, which uses a style tag to achieve this.
Styleguide: Layouts.Grid.Rows.EqualHeight.Advanced
*/
/*
Grid: Column and Row Start/End
This group of utility classes allows you to control the starting and ending positions of grid columns and rows.
NOTE: the class `.justify_around` is a great addition to this pattern because it allows the gap bettween grids to flex allowing for the space to be filled.
Weight: 1000
Styleguide Layouts.Grid.Columns.StaticWidth
*/
/*
Overflow
Control some basics of how content overflows.
.overflow_hidden - hidden
.overflow_auto - auto
.overflow_visible - visible
.overflow_scroll - scroll
.overflow_clip - clip
.overflow_ellipsis - ellipsis
.overflow_unset - unset
Markup:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore quisquam vero, accusamus repellendus rerum sed dolorem quidem harum, neque odit dolor minima, quia et recusandae voluptatibus similique! Earum, unde laborum.
MarkupWrapperClasses:
grid template-x_30 texture_light overflow_hidden
Weight: 100
Styleguide Layouts.Display.overflow
*/
.overflow_hidden, .overflow_ellipsis, .overflow_clip {
overflow: hidden;
}
.overflow_visible {
overflow: visible;
}
.overflow_auto {
overflow: auto;
}
.overflow_scroll {
overflow-x: scroll;
overflow-y: scroll;
}
.overflow_scroll-x {
overflow-x: scroll;
overflow-y: hidden;
}
.overflow_scroll-y {
overflow-x: hidden;
overflow-y: scroll;
}
.overflow_clip {
text-overflow: clip;
}
.overflow_ellipsis {
text-overflow: ellipsis;
}
.overflow_unset {
overflow: unset;
}
.scroll-snap_y {
scroll-snap-type: y mandatory;
}
.scroll-snap_x {
scroll-snap-type: x mandatory;
}
.scroll-snap_y, .scroll-snap_x {
scroll-padding: 1rem;
}
.scroll-snap_y > *, .scroll-snap_x > * {
scroll-snap-align: start;
}
/*
Aspect Ratio
Aspect Ratio lets you define the ratio of width to height of the container. This is a great utility for images, videos, icons and layouts that need to conform to a ratio shape as it responds. It will set the object to 100% width of the container.
{{ modifier_class }} Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus
ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed
lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem,
at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue
elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.
Styleguide Layouts.MaxWidth
*/
/*
Custom Max Width
Add "max-w_custom" class to the component that you want to set a custom width for. Then the custom width value can be passed to that component from either the parent component or itself using `style="--max-w_custom:rem value"`
MarkupWrapperClasses:
grid template-x_30
Styleguide Decorator.Background.Color
*/
/*
Background Color Tint
Background colors can be shifted by appending a modifier of n5 through 5. The negative(n) numbers mix the color with black and the positive numbers mix the color with white.
Classes
Effect
.bg_(color)-0, .bg_(color)
pure color
.bg_(color)-1
color with 15% white mixed in
.bg_(color)-2
color with 37% white mixed in
.bg_(color)-3
color with 60% white mixed in
.bg_(color)-4
color with 78% white mixed in
.bg_(color)-5
color with 90% white mixed in
.bg_(color)-n1
color with 10% black mixed in
.bg_(color)-n2
color with 25% black mixed in
.bg_(color)-n3
color with 45% black mixed in
.bg_(color)-n4
color with 58% black mixed in
.bg_(color)-n5
color with 75% black mixed in
bg_primary - background using primary color
bg_secondary - background using secondary color
bg_shade - background using shade color
bg_alert - background using alert color
bg_warning - background using warning color
bg_success - background using success color
bg_info - background using info color
bg_highlight - background using highlight color
Weight: -50
Markup:
MarkupWrapperClasses:
flex p_4 bg_primary
Styleguide Decorator.Background.Color.With Alphas
*/
/*
Background Position
For many images you will need top place background images in to a cardnial location.
.bg_left - cardnial left
.bg_top - cardnial top
.bg_right - cardnial right
.bg_bottom - cardnial bottom
.bg_center - cardnial center center
Markup:
{{modifier_class}}
MarkupWrapperClasses:
bg_shade-2 max-w_40 br_solid br_primary br_1
Styleguide Decorator.Background.Image Positon
*/
.bg_left {
background-position: left center !important;
}
.bg_right {
background-position: right center !important;
}
.bg_top {
background-position: center top !important;
}
.bg_bottom {
background-position: center bottom !important;
}
.bg_center {
background-position: center center !important;
}
/*
Background Size
For many images you will need top place background images in to a cardnial location.
.bg_unset - removes any css background size
.bg_auto - auto
.bg_cover - cover
.bg_contain - contain
Markup:
MarkupWrapperClasses:
bg_shade-2 max-w_40 br_solid br_primary br_1
Styleguide Decorator.Background.Image Repeat
*/
.bg_no-repeat {
background-repeat: no-repeat;
}
.bg_repeat {
background-repeat: repeat;
}
.bg_repeat-x {
background-repeat: repeat-x;
}
.bg_repeat-y {
background-repeat: repeat-y;
}
.bg_repeat-space {
background-repeat: space;
}
/*
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. It is easy to apply textures using the texture utlities.
.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}}
Weight: 125
Styleguide Decorator.Background.Textures
*/
.texture_light {
background-image: url("../img/whisper.png");
}
.texture_medium {
background-image: url("../img/billie-holiday-speck.png");
}
.texture_dark {
background-image: url("../img/cross_stripes.png");
}
.texture_dust {
background-image: url("../img/dust.png");
}
.texture_disabled {
background-image: url("../img/cross_disabled.png");
}
.texture_cross {
background-image: url("../img/cross_color.png");
}
.texture_dynamic {
background-image: url("../img/connectwork.png");
}
/*
Textures Plus Background Colors
All textures are slightly transparent. You can acheive different effects with using the combo of textures and background colors.
.texture_light.bg_primary - textures are slightly transparent so they can be colored with background-color classess
.texture_dust.bg_primary - textures are slightly transparent so they can be colored with background-color classess
.texture_medium.bg_primary - textures are slightly transparent so they can be colored with background-color classess
.texture_dark.bg_primary - textures are slightly transparent so they can be colored with background-color classess
.texture_light.bg_alert - textures are slightly transparent so they can be colored with background-color classess
.texture_medium.bg_alert - textures are slightly transparent so they can be colored with background-color classess
.texture_dust.bg_alert - textures are slightly transparent so they can be colored with background-color classess
.texture_dark.bg_alert - textures are slightly transparent so they can be colored with background-color classess
.texture_cross.bg_alert - textures are slightly transparent so they can be colored with background-color classess
.texture_disabled.bg_alert - textures are slightly transparent so they can be colored with background-color classess
Markup:
{{modifier_class}}
Styleguide Decorator.Background.Textures.BackgroundColor
*/
/*
Textures Plus Background Shades
All textures are slightly transparent. You can further shade the background colors to achieve even more flexablity.
.texture_light.bg_primary - textures are slightly transparent so they can be colored with background-color classess
.texture_dust.bg_primary - textures are slightly transparent so they can be colored with background-color classess
.texture_medium.bg_primary - textures are slightly transparent so they can be colored with background-color classess
.texture_dark.bg_primary - textures are slightly transparent so they can be colored with background-color classess
.texture_light.bg_warning - textures are slightly transparent so they can be colored with background-color classess
.texture_medium.bg_warning - textures are slightly transparent so they can be colored with background-color classess
.texture_dust.bg_warning - textures are slightly transparent so they can be colored with background-color classess
.texture_dark.bg_warning - textures are slightly transparent so they can be colored with background-color classess
.texture_cross.bg_warning - textures are slightly transparent so they can be colored with background-color classess
.texture_disabled.bg_warning - textures are slightly transparent so they can be colored with background-color classess
Markup:
n3
n1
1
3
Styleguide Decorator.Background.Textures.Shaded
*/
/*
Gradient
Simple Gradients that are either linear or radial. These gradients can be modified by passing in the css properties to change the start and end color and the direction the gradient is rendered. `style="--start-color:hexcolor;--end-color:hexcolor;--origin:top right"`
css property
definition
acceptable options
--start-color
the starting color of the gradient or center color for radial
proper formatted color: hex, hsl, hsla, rgb, rgba
--end-color
the ending color or the outside color when radial
proper formatted color: hex, hsl, hsla, rgb, rgba
--origin
point in the container where the gradients starts
these words depend on the type of gradient
Weight: 121
Styleguide Decorator.Background.Gradient
*/
:root {
--start-color: hsla(var(--primary-h), calc( var(--primary-s) + ((100% - var(--primary-s)) * 0.015) ), calc( var( --primary-l ) - ( var( --primary-l ) * 0.15 ) ), 1);
--end-color: hsla(var(--acc-h), calc( var(--acc-s) + ((100% - var(--acc-s)) * 0.015) ), calc( var( --acc-l ) - ( var( --acc-l ) * 0.15 ) ), 1);
--origin:at top left;
}
.radial-gradient_custom {
--origin:at top left;
background-image: radial-gradient(var(--origin), var(--start-color), var(--end-color));
background-color: var(--start-color);
}
.linear-gradient_custom {
--origin:to top left;
background-image: linear-gradient(var(--origin), var(--start-color), var(--end-color));
background-color: var(--start-color);
}
/*
Linear Gradient
The default gradient is the ACC Blue to the Primary Color of the Brand. Pass in css properties to manipulate the colors you want to use. linear gradient css documentation
Default Coloring
Modified Coloring
MarkupWrapperClasses:
flex flex_row bg_shade-5 p_2 texture_light
Weight: 1
Styleguide Decorator.Background.Gradient.linear
*/
/*
Radial Gradient
The default gradient is the ACC Blue to the Primary Color of the Brand. Pass in css properties to manipulate the colors you want to use. radial gradient css documentation
Default Coloring
Modified Coloring
MarkupWrapperClasses:
flex flex_row bg_shade-5 p_2 texture_light
Weight: 2
Styleguide Decorator.Background.Gradient.Radial
*/
/*
Logos
Logos in the design come in 4 variations the primary logo, the condensed logo, and alte version which are the reverse of primary and reversed. All logos are controled by the width and will maintain there aspect ratios to respond to the container they are in. For 508 compliance please place the brand name in the logo.
.logo_primary - Primary Logo great for desktop displays best used for when the logo can be taller then 80px.
.logo_primary-alt - Primary Logo reversed for dark background situations.
.logo_condensed.max-w_15 - Smaller Mobile Friendly Logo these logos and be readable between 40px to 80px in height.
.logo_primary-alt.max-w_15 - Smaller Logo Reversed.
Markup:
{{modifier_class}}
MarkupWrapperClasses:
bg_shade-2 max-w_40
Styleguide DesignBase.Logos
*/
[class*=logo_],
[class*=seal_] {
overflow: hidden;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
text-indent: -9999px;
}
[class*=logo_]:before,
[class*=seal_]:before {
width: 1px;
height: 0;
margin-left: -1px;
float: left;
content: "";
}
[class*=logo_]:after,
[class*=seal_]:after {
display: table;
clear: both;
content: "";
}
[class*=logo_] > .alt-text:before,
[class*=seal_] > .alt-text:before {
display: none;
}
.logo_primary {
background-image: url("../img/ACC_primaryLogo.svg");
}
.logo_primary:before {
padding-top: 33.3333333333%;
}
.logo_primary > span.alt-text:before {
content: "Logo of the American College Of Cardiology";
}
.logo_primary-alt {
background-image: url("../img/ACC_primaryLogo-alt.svg");
}
.logo_primary-alt:before {
padding-top: 33.3333333333%;
}
.logo_primary-alt > span.alt-text:before {
content: "Logo of the American College Of Cardiology";
}
.logo_condensed {
background-image: url("../img/ACC_mobileLogo.svg");
}
.logo_condensed:before {
padding-top: 33.3333333333%;
}
.logo_condensed > span.alt-text:before {
content: "Logo of the American College Of Cardiology";
}
.logo_condensed-alt {
background-image: url("../img/ACC_mobileLogo-alt.svg");
}
.logo_condensed-alt:before {
padding-top: 33.3333333333%;
}
.logo_condensed-alt > span.alt-text:before {
content: "Logo of the American College Of Cardiology";
}
/*
Seals
Seals in the design come in 3 variations the default, small, and tiny. All Seals will maintain their aspect ratios and will respond to the container, but seals have a max width. For 508 compliance, please place the brand name in the seal.
.seal_normal - Full size seal great for desktop displays best used for when the seal can be taller then 100px.
.seal_small - Condensed size seal great for Tablet displays best used for when the seal is between 100px to 40px.
.seal_tiny - Smallest of the seals best used for icons when seal is 40px and bellow
Markup:
{{modifier_class}}
MarkupWrapperClasses:
bg_shade-2 max-w_40
Styleguide DesignBase.Seals
*/
.seal_normal {
background-image: url("../img/ACC_seal.svg");
}
.seal_normal:before {
padding-top: 100%;
}
.seal_normal > span.alt-text:before {
content: "Seal of the American College Of Cardiology";
}
.seal_small {
max-width: 100px;
background-image: url("../img/ACC_sealCondensed.svg");
}
.seal_small:before {
padding-top: 100%;
}
.seal_small > span.alt-text:before {
content: "Seal of the American College Of Cardiology";
}
.seal_tiny {
max-width: 40px;
background-image: url("../img/ACC_sealCondensed-alt.svg");
}
.seal_tiny:before {
padding-top: 100%;
}
.seal_tiny > span.alt-text:before {
content: "Seal of the American College Of Cardiology";
}
.seal_normal-alt {
background-image: url("../img/ACC_seal-reverse.svg");
}
.seal_normal-alt:before {
padding-top: 100%;
}
.seal_normal-alt > span.alt-text:before {
content: "Seal of the American College Of Cardiology";
}
.seal_small-alt {
max-width: 100px;
background-image: url("../img/ACC_sealCondensed-reverse.svg");
}
.seal_small-alt:before {
padding-top: 100%;
}
.seal_small-alt > span.alt-text:before {
content: "Seal of the American College Of Cardiology";
}
.seal_tiny-alt {
max-width: 40px;
background-image: url("../img/ACC_sealCondensed-alt-reverse.svg");
}
.seal_tiny-alt:before {
padding-top: 100%;
}
.seal_tiny-alt > span.alt-text:before {
content: "Seal of the American College Of Cardiology";
}
/*
Borders
Borders a complex utility that demands a combo UCs to acheive their effect. The three UCs that must be used in combo are `style`, `color`, and `width`. To make an object with single black pixel border that is solid you would have to add '.br_solid.br_1.br_black'
Weight: 125
Styleguide Decorator.Border
*/
/* No styleguide reference. */
/*
Style
Depends on base border module in _borders.css
.br_none - makes a border none
.br_dotted - makes a border dotted
.br_dashed - makes a border dashed
.br_solid - makes a border solid
Markup:
{{modifier_class}} border
Styleguide Decorator.Border.Style
*/
.br_inherit {
border-color: inherit;
}
.br_none, .btn_acc-primary {
border-style: none;
}
.br_solid {
border-style: solid;
}
.br_dashed {
border-style: dashed;
}
.br_dotted {
border-style: dotted;
}
@media only screen and (min-width : 768px) {
.br_none\:md {
border-style: none;
}
.br_solid\:md {
border-style: solid;
}
.br_dashed\:md {
border-style: dashed;
}
.br_dotted\:md {
border-style: dotted;
}
}
@media only screen and (min-width : 1024px) {
.br_none\:lg {
border-style: none;
}
.br_solid\:lg {
border-style: solid;
}
.br_dashed\:lg {
border-style: dashed;
}
.br_dotted\:lg {
border-style: dotted;
}
}
/*
Color
Alter the border color of and object by adding the border color utitlity class.
br_primary - border color
br_shade - border color
br_alert - border color
br_warning - border color
br_info - border color
br_highlight - border color
Markup:
{{modifier_class}} border
Styleguide Decorator.Border.Colors
*/
/*
Color:Black with Alphas
Border black has attached alpha modifiers to allow for greater flexibility
br_black - border black with alpha of 100%
br_black-0 - border black with alpha of 2%
br_black-1 - border black with alpha of 10%
br_black-2 - border black with alpha of 20%
br_black-3 - border black with alpha of 30%
br_black-4 - border black with alpha of 40%
br_black-5 - border black with alpha of 50%
br_black-6 - border black with alpha of 60%
br_black-7 - border black with alpha of 70%
br_black-8 - border black with alpha of 80%
br_black-9 - border black with alpha of 90%
Markup:
{{modifier_class}} border
Styleguide Decorator.Border.Colors.Black
*/
/*
Color: White with Alphas
Border white has attached alpha modifiers to allow for greater flexablity
br_white - border white with alpha of 100%
br_white-0 - border white with alpha of 2%
br_white-1 - border white with alpha of 90%
br_white-2 - border white with alpha of 80%
br_white-3 - border white with alpha of 70%
br_white-4 - border white with alpha of 60%
br_white-5 - border white with alpha of 50%
br_white-6 - border white with alpha of 40%
br_white-7 - border white with alpha of 30%
br_white-8 - border white with alpha of 20%
br_white-9 - border white with alpha of 10%
Markup:
.opacity_2 - set opacity: 0.1
.opacity_6 - set opacity: 0.62
.opacity_8 - set opacity: 0.9
.opacity_none - set opacity: 1
Markup:
{{modifier_class}}
MarkupWrapperClasses:
p_4 bg_primary
Styleguide Decorator.Opacity.basic
*/
.opacity_0 {
opacity: 0;
}
.opacity__01 {
opacity: 0.005;
}
.opacity__05 {
opacity: 0.0075;
}
.opacity_1 {
opacity: 0.025;
}
.opacity_2 {
opacity: 0.1;
}
.opacity_3 {
opacity: 0.25;
}
.opacity_4 {
opacity: 0.38;
}
.opacity_5 {
opacity: 0.5;
}
.opacity_6 {
opacity: 0.62;
}
.opacity_7 {
opacity: 0.75;
}
.opacity_8 {
opacity: 0.9;
}
.opacity_9 {
opacity: 0.975;
}
.opacity_none {
opacity: 1;
}
/*
active
A common class name given to the parent container can effect the color, background and opacity of the children. The active class is different depending if you are using Bootstrap or Foundation.
This Variation of Arches uses "active"
Weight: 135
Styleguide Interaction.States.Active
*/
/*
active Full Opacity
Click the areas below to toggle the `active` state.
`.active .a:opacity` Set the Opacity of an objects children to 100% when it has the class is-active.
Markup:
0
1
2
3
4
5
6
7
8
9
Weight: 60
Styleguide Interaction.States.Active.opacity
*/
/*
active Black n White
Click the areas below to toggle the "active" state.
Set the background to full white or black when the parent has a class of "active".
bg_white - text color modified light to dark
bg_black - text color modified light to dark
Markup:
0
1
2
3
4
5
6
7
8
9
default
Weight: 50
Styleguide Interaction.States.Active.black and white
*/
/*
active font color
Click the areas below to toggle the "active" state.
Set the font color of the child by setting the parent to .active. `a:c_primary`
c_primary - text color modified light to dark
c_shade - text color modified light to dark
c_info - text color modified light to dark
c_highlight - text color success color
c_success - text color modified light to dark
c_warning - text color modified light to dark
c_alert - text color modified light to dark
Markup:
5
4
3
2
1
0
n1
n2
n3
n4
n5
Weight: 10
Styleguide Interaction.States.Active.text
*/
/*
active Background Color
Click the areas below to toggle the "active" state.
Set the font color of the child by setting the parent to .active. `a:c_primary`
bg_primary - text color modified light to dark
bg_shade - text color modified light to dark
bg_info - text color modified light to dark
bg_highlight - text color success color
bg_success - text color modified light to dark
bg_warning - text color modified light to dark
bg_alert - text color modified light to dark
Markup:
5
4
3
2
1
0
n1
n2
n3
n4
n5
Weight: 10
Styleguide Interaction.States.Active.background color
*/
/*
active Icons
Click the areas below to toggle the "active" state.
Toggle the display and hide of a an icon with applying `is-active_icon-show` or `is-active_icon-hide`
fa-award - toggle the award icon
fa-bell - toggle the bell icon
fa-bell-slash - toggle the bell slash icon
fa-bug - toggle the bug icon
Markup:
Click the areas below to toggle the "active" state.
Toggle the display type of an object when it's parent 'active'
none - make the display none when parent is-active
inline - make the display inline when parent is-active
inline-block - make the display inline-block when parent is-active
block - make the display block when parent is-active
Markup:
Click to Toggle parent is-activeSpan with display:{{modifier_class}} when parent is active
Weight: 10
Styleguide Interaction.States.Active.display
*/
/*
Hover
Decorate containers and text to show user interaction with simple hover, and focus effects.
Weight: 130
Styleguide Interaction.States.Hover
*/
/* No styleguide reference. */
/*
Hover: Background Color
hovers can easily be added to objects by adding `h:` in front of the background color utility like `h:bg_primary`
bg_alert - background color modified light to dark
bg_primary - background color modified light to dark
bg_shade - background color modified light to dark
bg_info - background color modified light to dark
bg_highlight - background color success color
bg_success - background color modified light to dark
bg_warning - background color modified light to dark
Markup:
Weight: 10
Styleguide Interaction.States.Hover.text
*/
.h\:c_white:hover, .btn_acc-primary:hover,
.active > .a\:c_white,
.active.a\:c_white {
color: white !important;
}
.h\:c_black:hover,
.active > .a\:c_black,
.active.a\:c_black {
color: #131212 !important;
}
.h\:underline:hover, .h\:underline:focus {
text-decoration: underline;
}
.h\:underline-none:hover, .h\:underline-none:focus,
.h\:undecorated:hover,
.h\:undecorated:focus {
text-decoration: none !important;
}
.h\:dashed:hover, .h\:dashed:focus {
text-decoration: underline;
-webkit-text-decoration-style: dashed;
text-decoration-style: dashed;
}
.h\:double:hover, .h\:double:focus {
text-decoration: underline;
-webkit-text-decoration-style: double;
text-decoration-style: double;
}
.h\:dotted:hover, .h\:dotted:focus {
text-decoration: underline;
-webkit-text-decoration-style: dotted;
text-decoration-style: dotted;
}
/*
Hover: Underline
Sometimes is is needed to add an underline on a piece of text when it hovers adding `h:` in front of the type of underline you would like gives that type of underline to the text when hovered.
underline.c_primary - classic anchor text
dotted.c_warning - great for popups or hint text
double.c_highlight - extra loud underlines for the really important links or modals
dashed.c_accent - extra loud dots for info and hint texts reveals.
Markup:
Lorem ipsum dolor sit amet,
consectetur
adipisicing elit.
Tenetur, similique.
Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi
harum magni
adipisicing elit aut nulla et.
Weight: 50
Styleguide Interaction.States.Hover.opacity.whiteblack
*/
/*
Hover: Full Opacity
Set the Opacity of an object to 100% while hovered.
Markup:
0
1
2
3
4
5
6
7
8
9
Weight: 60
Styleguide Interaction.States.Hover.opacity
*/
.h\:opacity:hover,
.active > .a\:opacity,
.active.a\:opacity {
opacity: 1;
}
/*
Hover: Border Color
hovers can easily effect the border style to toggle between styles. Very useful fo toggling from a border type to none or vice versa.
| Class | Effect |
| -------------- | ------------------------------------------------------------------------------------------- |
| br_none | Border is None on Hover |
| br_dotted | Border is Dotted on Hover |
| br_dashed | Border is Dashed on Hover |
| br_solid | Border is Solid on Hover |
| br_transparent | Sometimes shifting to transparent is better so as to not cause the UI to flicker and resize |
Markup:
None
Transparent
Solid
Dashed
Dotted
Weight: 40
Styleguide Interaction.States.Hover.borders
*/
.h\:br_dotted:hover {
border-style: dotted !important;
}
.h\:br_dashed:hover {
border-style: dashed !important;
}
.h\:br_solid:hover {
border-style: solid !important;
}
.h\:br_none:hover {
border-style: none !important;
}
.h\:br_transparent:hover {
border-color: transparent !important;
}
/*
Disabled
Description: The antithesis of active or hover is disabled. combined with the standard for background and color UI elements styled with `disable` look very inactive and untouchable
Markup:
Weight:0
Styleguide Recipes.
*/
.disabled {
background-image: url("../img/cross_disabled.png");
}
.disabled, .disabled > * {
cursor: not-allowed;
}
.disabled.c_disabled, .disabled.c_disabled:hover, .disabled > *.c_disabled, .disabled > *.c_disabled:hover {
color: rgba(19, 18, 18, 0.5) !important;
}
.disabled.bg_disabled, .disabled.bg_disabled:hover, .disabled > *.bg_disabled, .disabled > *.bg_disabled:hover {
background-color: rgba(19, 18, 18, 0.1) !important;
}
.disabled.c_disabled-inverted, .disabled.c_disabled-inverted:hover, .disabled > *.c_disabled-inverted, .disabled > *.c_disabled-inverted:hover {
color: rgba(255, 255, 255, 0.5) !important;
}
.disabled.bg_disabled-inverted, .disabled.bg_disabled-inverted:hover, .disabled > *.bg_disabled-inverted, .disabled > *.bg_disabled-inverted:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.disabled.opacity_disabled, .disabled.opacity_disabled:hover, .disabled > *.opacity_disabled, .disabled > *.opacity_disabled:hover {
opacity: 0.5 !important;
}
.disabled:hover, .disabled *:hover, .disabled > *:hover, .disabled > * *:hover {
text-decoration: none;
}
/*
Animation
Transitions Eases and Transforms.Create simple toggleable animations with a combination of classes.
Weight: 140
Styleguide Interaction.Animation
*/
/*
Transition
Soften the harshness of the switch of the style by adding transitions to the change the speed of transition from decorators.
0 - 0 second transition
1 - .1 second transition
2 - .25 second transition
3 - .3 second transition
4 - .5 second transition
5 - 1 second transition
Markup:
0
1
2
3
4
5
6
7
8
9
default
Styleguide Interaction.Animation.transition
*/
*[class*=transition] {
transition-property: all;
transition-timing-function: ease;
}
.transition_0 {
transition: all 0s;
}
.transition_1, .btn_acc-primary {
transition: all 0.1s;
}
.transition_2 {
transition: all 0.2s;
}
.transition_3 {
transition: all 0.35s;
}
.transition_4, *[data-bs-toggle=collapse] .a\:rotation {
transition: all 0.5s;
}
.transition_5 {
transition: all 1s;
}
/*
Easing the on Hover
Dynamic adjustment of transition with easing.
out-in - ease timing
out - ease-out timing
in - ease-in timing
in-out - ease-in-out timing
linear - linear timing
Markup:
0
1
2
3
4
5
6
7
8
9
default
Styleguide Interaction.Animation.ease
*/
.ease_linear {
transition-timing-function: linear;
}
.ease_out-in {
transition-timing-function: ease;
}
.ease_in {
transition-timing-function: ease-in;
}
.ease_out, .btn_acc-primary {
transition-timing-function: ease-out;
}
.ease_in-out {
transition-timing-function: ease-in-out;
}
/*
Transform Scale
Dynamic adjustment of objects scale for toggling between
0 - Scale to 0%
100 - Scale to 100%
X-0 - Scale the X to 0%
X-100 - Scale the X to 100%
Y-0 - Scale the X to 0%
Y-100 - Scale the X to 100%
Markup:
This is content that will be scaled.
Styleguide Interaction.Animation.scale
*/
.scale_X-0 {
transform: scaleX(0);
}
.scale_X-100 {
transform: scaleX(1);
}
.scale_Y-0 {
transform: scaleY(0);
}
.scale_Y-100 {
transform: scaleY(1);
}
.scale_0 {
transform: scale(0, 0);
}
.scale_100 {
transform: scale(1, 1);
}
.origin_tl {
transform-origin: left top;
}
.origin_rt {
transform-origin: right top;
}
.origin_c {
transform-origin: center center;
}
.origin_lb {
transform-origin: left bottom;
}
.origin_rb {
transform-origin: right bottom;
}
.origin_t {
transform-origin: center top;
}
.origin_b {
transform-origin: center bottom;
}
.origin_r {
transform-origin: right center;
}
.origin_l {
transform-origin: left center;
}
.rotate_45 {
transform: rotate(45deg);
}
.rotate_90 {
transform: rotate(90deg);
}
.rotate_135 {
transform: rotate(135deg);
}
.rotate_180 {
transform: rotate(180deg);
}
.rotate_225 {
transform: rotate(225deg);
}
.rotate_270 {
transform: rotate(270deg);
}
.rotate_315 {
transform: rotate(315deg);
}
.active.a\:rotate_45,
.active > .a\:rotate_45 {
transform: rotate(45deg);
}
.active.a\:rotate_90,
.active > .a\:rotate_90 {
transform: rotate(90deg);
}
.active.a\:rotate_135,
.active > .a\:rotate_135 {
transform: rotate(135deg);
}
.active.a\:rotate_180,
.active > .a\:rotate_180 {
transform: rotate(180deg);
}
.active.a\:rotate_225,
.active > .a\:rotate_225 {
transform: rotate(225deg);
}
.active.a\:rotate_270,
.active > .a\:rotate_270 {
transform: rotate(270deg);
}
.active.a\:rotate_315,
.active > .a\:rotate_315 {
transform: rotate(315deg);
}
/*
Rotation
Rotation through transform. Transform doesn't modify the displacement of the flow. This also have an active class modifier
rotate_45 - Rotate by 45 degrees
rotate_90 - Rotate by 90 degrees
rotate_135 - Rotate by 135 degrees
rotate_180 - Rotate by 180 degrees
rotate_225 - Rotate by 225 degrees
rotate_270 - Rotate by 270 degrees
rotate_315 - Rotate by 315 degrees
Markup:
Weight: 100
Styleguide Interaction.Animation.Rotation
*/
/*
Rotation on Active
Add in the `a:` in front of these classes gives you the rotation only when the item is active.
These classes are effected by the parent having `active` state.
rotate_45 - Rotate by 45 degrees
rotate_90 - Rotate by 90 degrees
rotate_135 - Rotate by 135 degrees
rotate_180 - Rotate by 180 degrees
rotate_225 - Rotate by 225 degrees
rotate_270 - Rotate by 270 degrees
rotate_315 - Rotate by 315 degrees
Markup:
Not Active Active
Weight: 100
Styleguide Interaction.Animation.RotationActive
*/
*[data-bs-toggle=collapse] .a\:rotation.fa-times, *[data-bs-toggle=collapse] .a\:rotation.fa-chevron-up, *[data-bs-toggle=collapse] .a\:rotation.fa-minus.rotate_90 {
transform: rotate(0deg);
}
*[data-bs-toggle=collapse].collapsed .a\:rotation.fa-times, *[data-bs-toggle=collapse].show .a\:rotation.fa-times {
transform: rotate(135deg);
}
*[data-bs-toggle=collapse].collapsed .a\:rotation.fa-chevron-up, *[data-bs-toggle=collapse].show .a\:rotation.fa-chevron-up {
transform: rotate(180deg);
}
*[data-bs-toggle=collapse].collapsed .a\:rotation.fa-minus.rotate_90, *[data-bs-toggle=collapse].show .a\:rotation.fa-minus.rotate_90 {
transform: rotate(90deg);
}
.bg-blend_normal {
background-blend-mode: normal;
mix-blend-mode: normal;
}
.bg-blend_multiply {
background-blend-mode: multiply;
mix-blend-mode: multiply;
}
.bg-blend_screen {
background-blend-mode: screen;
mix-blend-mode: screen;
}
.bg-blend_overlay {
background-blend-mode: overlay;
mix-blend-mode: overlay;
}
.bg-blend_darken {
background-blend-mode: darken;
mix-blend-mode: darken;
}
.bg-blend_lighten {
background-blend-mode: lighten;
mix-blend-mode: lighten;
}
.bg-blend_color-dodge {
background-blend-mode: color-dodge;
mix-blend-mode: color-dodge;
}
.bg-blend_color-burn {
background-blend-mode: color-burn;
mix-blend-mode: color-burn;
}
.bg-blend_hard-light {
background-blend-mode: hard-light;
mix-blend-mode: hard-light;
}
.bg-blend_soft-light {
background-blend-mode: soft-light;
mix-blend-mode: soft-light;
}
.bg-blend_difference {
background-blend-mode: difference;
mix-blend-mode: difference;
}
.bg-blend_exclusion {
background-blend-mode: exclusion;
mix-blend-mode: exclusion;
}
.bg-blend_hue {
background-blend-mode: hue;
mix-blend-mode: hue;
}
.bg-blend_saturation {
background-blend-mode: saturation;
mix-blend-mode: saturation;
}
.bg-blend_color {
background-blend-mode: color;
mix-blend-mode: color;
}
.bg-blend_luminosity {
background-blend-mode: luminosity;
mix-blend-mode: luminosity;
}
.bg-blend_initial {
background-blend-mode: initial;
mix-blend-mode: initial;
}
.bg-blend_inherit {
background-blend-mode: inherit;
mix-blend-mode: inherit;
}
.bg-blend_unset {
background-blend-mode: unset;
mix-blend-mode: unset;
}
.font-blend_normal {
mix-blend-mode: normal;
}
.font-blend_multiply {
mix-blend-mode: multiply;
}
.font-blend_screen {
mix-blend-mode: screen;
}
.font-blend_overlay {
mix-blend-mode: overlay;
}
.font-blend_darken {
mix-blend-mode: darken;
}
.font-blend_lighten {
mix-blend-mode: lighten;
}
.font-blend_color-dodge {
mix-blend-mode: color-dodge;
}
.font-blend_color-burn {
mix-blend-mode: color-burn;
}
.font-blend_hard-light {
mix-blend-mode: hard-light;
}
.font-blend_soft-light {
mix-blend-mode: soft-light;
}
.font-blend_difference {
mix-blend-mode: difference;
}
.font-blend_exclusion {
mix-blend-mode: exclusion;
}
.font-blend_hue {
mix-blend-mode: hue;
}
.font-blend_saturation {
mix-blend-mode: saturation;
}
.font-blend_color {
mix-blend-mode: color;
}
.font-blend_luminosity {
mix-blend-mode: luminosity;
}
.font-blend_initial {
mix-blend-mode: initial;
}
.font-blend_inherit {
mix-blend-mode: inherit;
}
.font-blend_unset {
mix-blend-mode: unset;
}
/*
Text Blend
Color blending modes for text on backgrounds.
.font-blend_normal - blend text with a normal
.font-blend_multiply - blend text with a multiply
.font-blend_screen - blend text with a screen
.font-blend_overlay - blend text with a overlay
.font-blend_darken - blend text with a darken
.font-blend_lighten - blend text with a lighten
.font-blend_color - blend text with a color
.font-blend_color - blend text with a color
.font-blend_hard - blend text with a hard
.font-blend_soft - blend text with a soft
.font-blend_difference - blend text with a difference
.font-blend_exclusion - blend text with a exclusion
.font-blend_hue - blend text with a hue
.font-blend_saturation - blend text with a saturation
.font-blend_color - blend text with a color
.font-blend_luminosity - blend text with a luminosity
.font-blend_initial - blend text with a initial
.font-blend_inherit - blend text with a inherit
.font-blend_unset - blend text with a unset
Weight: 150
Styleguide Decorator.Background.Blend
*/
/*
Mixed Blend Mode
Background Image blending modes on top of other layers like other images, text, and svg.
Weight: 150
Styleguide Decorator.Background.MixedBlendMode
*/
/*
Interaction
Modify how the user gets feed back of changes from hover effects to active states and how things animate or select.
Weight: 1000
Styleguide Interaction.States
*/
/*
Expanded Click Area
allows for a relative container to be clickable by the link.
Markup:
This is a header
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Styleguide Recipes.InteractiveExtras.Links
*/
/*
Scrollbar Mini
Give a mini scroll bar to a content area.
Markup:
This is a header
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!
Styleguide Recipes.InteractiveExtras.Scrollbar
*/
/* Let's get this party started */
.scrollbar-mini::-webkit-scrollbar {
width: 6.4px;
width: 0.4rem;
height: 6.4px;
height: 0.4rem;
}
/* Track */
.scrollbar-mini::-webkit-scrollbar-track {
background-color: hsla(var(--shade-h), calc( var(--shade-s) + ((100% - var(--shade-s)) * 0.05) ), calc( var( --shade-l ) - ( var( --shade-l ) * 0.5 ) ), 0.1);
box-shadow: inset 1px 1px 4px 0.5px rgba(0, 0, 0, 0.2);
}
/* Handle */
.scrollbar-mini::-webkit-scrollbar-thumb {
border-radius: 25px;
background: hsla(var(--accent-h), calc( var(--accent-s) + ((100% - var(--accent-s)) * 0.015) ), calc( var( --accent-l ) - ( var( --accent-l ) * 0.15 ) ), 1);
box-shadow: inset 1px 1px 4px 0.5px rgba(0, 0, 0, 0.2);
}
.scrollbar-mini::-webkit-scrollbar-thumb:window-inactive {
background: hsla(var(--accent-h), calc( var(--accent-s) + ((100% - var(--accent-s)) * 0.015) ), calc( var( --accent-l ) - ( var( --accent-l ) * 0.15 ) ), 0.1);
}
.scrollbar-mini::-webkit-scrollbar-track:window-inactive {
background: hsla(var(--shade-h), calc( var(--shade-s) + ((100% - var(--shade-s)) * 0.05) ), calc( var( --shade-l ) - ( var( --shade-l ) * 0.5 ) ), 0.1);
}
/*
States
Prefixed before class rules the h: for hover or a: for active class allows for some dynamics with very little efforts.
Weight: -100
Styleguide Interaction.States
*/
.display_none\:screen {
display: none !important;
}
@media only print {
.display_none\:print {
display: none !important;
}
.block\:print {
display: block !important;
}
.inline\:print {
display: inline !important;
}
.inline-block\:print {
display: inline-block !important;
}
.table\:print {
display: table !important;
}
.flex\:print {
display: flex !important;
}
}
/*
User Select
User interaction classes that define how the user can interact with the text of the element.
.user-select_all - User on click will select All
.user-select_none - User on click will select Nothing
.user-select_auto - User on click will select Browser Default
.user-select_text - User on click will select Only the text
Weight:0
Styleguide Interaction.User.UserSelect
*/
.user-select_all {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
.user-select_none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.user-select_auto {
-webkit-user-select: auto;
-moz-user-select: auto;
user-select: auto;
}
.user-select_text {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
/*
Hover:Border Color
hovers can easily effect the border style to toggle between styles. Very useful fo toggling from a border type to none or vice versa.
| Class | Effect |
| -------------- | ------------------------------------------------------------------------------------------- |
| cursor_pointer | pointer |
| cursor_not-allowed | no touch |
| cursor_grab | open hand |
| cursor_grabbing | closed hand |
| cursor_wait | spinning ball |
Weight: 100
Styleguide Interaction.States.Hover.cursor
*/
.cursor_pointer {
cursor: pointer;
}
.cursor_not-allowed {
cursor: not-allowed;
}
.cursor_grab {
cursor: grab;
}
.cursor_grabbing {
cursor: grabbing;
}
.cursor_wait {
cursor: wait;
}
/*
Content Query
Description: A mass improvement on how to design components with alteration based on the container dimensions rather than the page width. In attempts to reduce the increase in size of the style sheet container queries are only reserved to responsive class properties.
Markup:
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.
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 Structures.Tabs
*/
/*
Simple Tabs
Simple in page tabs
Markup:
Styleguide Structures.Tabs.Tabs
*/
/*
Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Markup:
Weight: 0
Styleguide Structures.Tabs.TabsDark
*/
/*
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 Structures.Tabs.TabsDark.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 Structures.Tabs.TabsDark.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 Structures.Tabs.Tabs.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 Structures.Tabs.Tabs.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 Structures.Tabs.Tabs.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:
{{> HTML.Typography.Sample }}
{{> HTML.Typography.Sample }}
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide 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:
{{> HTML.Typography.Sample }}
{{> HTML.Typography.Sample }}
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 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 Structures.UITabs.Tabs
*/
/*
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 Structures.UITabs.Tabs.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 Structures.UITabs.Tabs.LinkDisabled
*/
/*
Scroll Overflow Script
Description: Javascript is needed to make the scrolls work on the page
Markup:
Weight:0
Styleguide 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 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 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 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 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 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 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 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 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 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 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 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 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 Structures.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 Structures.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 Structures.Accordion.Nested
*/
/*
Buttons
Basic Buttons
default - Medium buttons (default)
.btn-primary - Primary Class Button (default)
.btn-secondary - Second Class Button
.btn-accent - Button for call out actions
.btn-success - Success State.
.btn-danger - Alert State.
.btn-warning - Warning State
.clear - All button states can become hollow
.radius - Give the button softer corners
.shadow.clear - Give a button a shadow
.btn-sm - Small buttons
.btn-lg - Large buttons
.disabled - Disabled buttons
Markup:
{{modifier_class}} button
Styleguide Bootstrap.Button
*/
/*
Agenda Item
Description:
Agenda items are sessions that are scheduled for a specific date, location, and time.
Weight:0
Styleguide Data.Agenda
*/
/*
Agenda ID
Description:
The ID given to an Agenda. This number is unique to the Agenda and is incremented for each new Agenda created.
Markup:
101
Weight:1
Styleguide Data.Agenda.ID
*/
/*
Channel Name
Description:
A channel is a visible category that an Agenda Item belongs to.
Markup:
Navigating Health Care Economics
Weight:1
Styleguide Data.Agenda.ChannelName
*/
/*
Live Time
Description:
The time at which a Agenda is live.
Markup: @ {{> Data.Agenda.ReleaseTime }} – {{> Data.Agenda.ReleaseTime }} 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 Data.Agenda.LiveTime
*/
/*
Release Time
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 Data.Agenda.ReleaseTime
*/
/*
End Time
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 Data.Agenda.EndTime
*/
/*
Live 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 Data.Agenda.LiveDate
*/
/*
On Demand Release Date and Time
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 @ 8:00 p.m. 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.
Weight:0
Styleguide Data.Agenda.onDemandReleaseTime
*/
/*
Session
A Session is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.
Markup:
Electrical Disorders - Rhythm and Conduction Disorders
Experiential: This is not an approved data point.
Weight:100
Styleguide Data.Session
*/
/*
Session Subtitle
The subtitle of a Session.
Markup:
Electrical Disorders - Rhythm and Conduction Disorders
Experiential: This is not an approved data point.
Weight:2
Styleguide Data.Session.Subtitle
*/
/*
Session Title
Description:
The title of a Session.
Markup:
Cardiovascular Update for the Clinician III
Weight:1
Styleguide Data.Session.Title
*/
/*
Session Identifier
Description:
The ID given to a session
Markup:
3652
Weight:0
Styleguide Data.Session.ID
*/
/*
Session Description
The description of a session.
Markup:
Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.
Weight:3
Styleguide Data.Session.Description
*/
/*
Presentation
Description:
A presentation is a single part of education that can not be subdivided.
Weight:0
Styleguide Data.Presentation
*/
/*
Presentation Description
Description:
The Description of a presentation
Markup:Drug Coated Balloons
Weight:500
Styleguide Data.Presentation.Description
*/
/*
Presentation Title
Description:
The title of a presentation
Markup:
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
Weight:0
Styleguide Data.Presentation.Title
*/
/*
Presentation Live Time
Description:
The Live Time of a Presentation
Markup:
11:45 – 11:49 a.m. ET
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 Data.Presentation.LiveTime
*/
/*
Presentation ID
Description:
Unique system generated identifier for a presentation.
Markup:
15612
Weight:0
Styleguide Data.Presentation.ID
*/
/*
Faculty
Description:
An educator who created or participated in a presentation
Weight:1000
Styleguide Data.Faculty
*/
/*
Photo
Description:
A photo of the faculty member
Markup:
MarkupWrapperClasses: max-w_30
FORMAT: 300px by 300px
Weight:0
Styleguide Data.Faculty.Photo
*/
/*
Full Name
The full name of the faculty 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 Data.Faculty.FullName
*/
/*
Location
Description:
The location of the faculty 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 Data.Faculty.Location
*/
/*
Title
Description:
the roles of the faculty member within the session
Markup:
{{> "Data.Faculty.Title.InstitutionTitle" }}, {{> "Data.Faculty.Title.InstitutionDivision" }}, {{> "Data.Faculty.Title.Institution" }}
FORMAT: Institution Title, Institution Division, Institution
NOTE: This format is currently not being enforced.
Weight:100
Styleguide Data.Faculty.Title
*/
/*
Institution
Description:
Institution of the faculty member where they hold a title
Markup:
Mount SugarLoaf Hospital
Weight:101
Styleguide Data.Faculty.Title.Institution
*/
/*
Institution Division
Description:
The Division of the Institution of the faculty member where they hold a title
Markup:
Department of Cardiology
Weight:102
Styleguide Data.Faculty.Title.InstitutionDivision
*/
/*
Institutional Title
Description:
the roles of the faculty member within the session
Markup:
Physician-in-Chief
Weight:103
Styleguide Data.Faculty.Title.InstitutionTitle
*/
/*
Twitter Handle
Description:
The handle of the faculty member on twitter
Markup:
Tweat_DrSoda
Weight:0
Styleguide Data.Faculty.TwitterHandle
*/
/*
Role
Description:
the roles of the faculty member within the session
Markup:
Co-Chair
Weight:0
Styleguide Data.Faculty.Role
*/
/*
Bio
Description:
simple html text that describes the faculty member
Markup:
Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.
Weight:0
Styleguide Data.Faculty.Bio
*/
/*
Identification Number
Description:
this id can both be used to link to the faculty member's page, the member's image, and disclosures
Markup:
122154254
Weight:0
Styleguide Data.Faculty.ID
*/
/*
Sponsor
Description:
Sponsor are industry that has offered money or support to an event.
Weight:0
Styleguide Data.Sponsor
*/
/*
Name
Markup:
LogoIpsum
Weight:-100
Styleguide Data.Sponsor.Name
*/
/*
Address
Description:
Sponsor's Name
Markup:
Weight:20
Styleguide Data.Sponsor.Address
*/
/*
Logo
Description:
Logo of the Company
Markup:
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
Website
Weight:26
Styleguide Data.Sponsor.WebLink
*/
/*
Website Link
Markup:
More
Weight:26
Styleguide Data.Sponsor.MoreLink
*/
/*
PDF Link
Markup:
PDF
Weight:26
Styleguide Data.Sponsor.PDFLink
*/
/*
Description
Description: Short html description of the sponsor or the product.
Markup:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?
Ut reiciendis et possimus rerum animi.
Reprehenderit quia et eaque cupiditate illo explicabo architecto.
Et cumque distinctio maxime maiores aut labore ut est esse.
Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.
Weight:3
Styleguide Data.Sponsor.Description
*/
/*
Award
Description: Awards and Recognition
Weight:5
Styleguide Data.Award
*/
/*
Award Title
Description: Title of the award
Markup:
Pamela S. Douglas Distinguished Award for Leaderiship in Diversity and Inclusion
Weight:5
Styleguide Data.Award.Title
*/
/*
Award Description
Description: Description of the award can be html or text and may include a link.
Markup:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?
Ut reiciendis et possimus rerum animi.
Reprehenderit quia et eaque cupiditate illo explicabo architecto.
Et cumque distinctio maxime maiores aut labore ut est esse.
Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.
Watch Video
Weight:5
Styleguide Data.Award.Description
*/
/*
Abstract
A Abstract is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.
Markup:
Electrical Disorders - Rhythm and Conduction Disorders
Experiential: This is not an approved data point.
Weight:100
Styleguide Data.Abstract
*/
/*
Abstract Subtitle
The subtitle of a Abstract.
Markup:
Electrical Disorders - Rhythm and Conduction Disorders
Experiential: This is not an approved data point.
Weight:2
Styleguide Data.Abstract.Subtitle
*/
/*
Abstract Title
Description:
The title of a Abstract.
Markup:
Abstract on Cardiovascular Update for the Clinician Success H2
Weight:1
Styleguide Data.Abstract.Title
*/
/*
Abstract Identifier
Description:
The ID given to a Abstract
Markup:
3652
Weight:0
Styleguide Data.Abstract.ID
*/
/*
Abstract Description
The description of a Abstract.
Markup:
Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.
Weight:3
Styleguide Data.Abstract.Description
*/
/*
Header Nav
The header nav for the website.
Markup:
Weight: 0
SubComponents:
Navigation.HeaderNav.MobileButton - Primary
Navigation.HeaderNav.Active - Primary: Active
Navigation.HeaderNav.Disabled - Primary: Disabled
Navigation.HeaderNav.MobileToggle - Mobile Menu Toggle
Navigation.HeaderNav.MobileHidden - Secondary
Navigation.HeaderNav.MobileHiddenDisabled - Secondary: Disabled
Navigation.HeaderNav.ExpandMobileLinks - Mobile Menu Link
Navigation.HeaderNav.ExpandMobileLinksDisabled - Mobile Menu Link: Disabled
Styleguide Navigation.HeaderNav
*/
/*
Base Header Nav (Primary)
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Navigation.HeaderNav.MobileButton
*/
/*
Mobile Toggle
Toggle button for the expanding mobile menu.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Navigation.HeaderNav.MobileToggle
*/
/*
Base Header Nav (Secondary)
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Navigation.HeaderNav.MobileHidden
*/
/*
Mobile Hidden Header Nav Disabled
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Navigation.HeaderNav.MobileHiddenDisabled
*/
/*
Mobile Menu Link
Header Nav in mobile view has an expanded more list that hides the secondary nav items.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Navigation.HeaderNav.ExpandMobileLinks
*/
/*
Mobile Menu Link Disabled
Header Nav in mobile view has an expanded more list that hides the secondary nav items.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Navigation.HeaderNav.ExpandMobileLinksDisabled
*/
/*
Nav Active
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Markup:
MarkupWrapperClasses: ul_none
Weight: -1
Styleguide Navigation.HeaderNav.Active
*/
/*
Nav Disabled
Disabled Header Nav is used when the conference site is open but all pages should be accessible. This is limited to the early stages of the conference before the site is fully open.
Markup:
MarkupWrapperClasses: ul_none
Weight: 10
Styleguide Navigation.HeaderNav.Disabled
*/
/*
Header Branding Area
Conferences can have a header branding area which gives the design team the ability to add a logo, graphics, and or text to the header or the site.
Weight: -999
Styleguide Structures.BrandArea
*/
/*
Header Brand Area - Logged in
Description: This is the logged in header brand area.
Markup:
{{> "Structures.BrandArea.LoggedIn.Button"}}
MarkupWrapperClasses: relative
Weight: -999
Styleguide Structures.BrandArea.LoggedIn
*/
/*
Logged Buttons
Description: The logged in buttons.
Markup:
MarkupWrapperClasses: relative
Weight:0
Styleguide Structures.BrandArea.LoggedIn.Button
*/
/*
Unsafe Area
Description: Because the UI is floats on top of the images there are area that are unsafe to contain text.
Markup:
MarkupWrapperClasses: relative
Weight: -999
Styleguide Structures.BrandArea.UnSAFE
*/
/*
Header Brand Area - Logged Out
Description: This is the logged Out header brand area.
Markup:
MarkupWrapperClasses: relative
Weight: -1000
Styleguide Structures.BrandArea.LoggedOut
*/
/*
Certified Education Block
Description: This block is added to all sites that offer any level of certification. Most of it links to other area or products but the user must see it on pages.
Markup:
Certified Education Credit Claim
This section of Care of the Athletic Heart 2020 Virtual contains certified education content. If a session offers credit, it is indicated. Credit information and disclosures may be accessed by selecting the below button.
Credit must be claimed by
December 31, 2020, 5:00 PM ET. You may only complete the evaluation and credit claim once; therefore, please do not proceed until you have finished your participation in the certified content for which you wish to claim credit.
MarkupWrapperClasses:
max-w_40
Weight:0
Styleguide Structures.Evergreen.Credits
*/
/*
Sub Components
These sub elements are used in many of the patterns and may be useful when building more complex components.
Weight: 200000
Styleguide Sub
*/
/*
Program
Programs are build via sessions, presentations, and workshops.
Weight: 200000
Styleguide Sub.Program
*/
/*
Date Time Separators
Sessions are divided by date time markers that have been set to east coast time with a reference to GMT.
Markup:
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
Data:
Data.Agenda.LiveDate - Live Date
Data.Agenda.LiveTime - Live Time
MarkupWrapperClasses: p_4 br_inherit
Weight: 100
Styleguide Sub.DateTimeDividers
*/
/*
Credit Dot
Dots are used to indicate the credit that this education offers.
CME - CME
CNE - CNE
AAPA - AAPA
ABP - ABP
ABPMOCII - ABPMOCII
ABPMOCIV - ABPMOCIV
ACHE - ACHE
Markup:
{{ modifier_class }}
Note: This pattern requires the inclusion of the credit color stylesheets.
FORMAT: This element uses data that has strict data formatting requirements. See color codes => credits.
Weight:0
Styleguide Sub.Credits
*/
/*
Simple Credit Dots
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
Markup:
Note: This pattern requires the inclusion of the credit color stylesheets.
SubComponents: Sub.Credits
Weight:0
Styleguide Sub.Credits.Dots
*/
/*
Non Accredited
description
Markup:
Industry Session | Nonaccredited
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Credits.NonAccredited
*/
/*
Category Flags
Description: A graphic treatment for the category flags which are tags applied like channel and type.
Markup:
{{>"Data.Agenda.ChannelName"}}
Category Tag
Data: Data.Agenda.ChannelName - Channel Name
Weight:0
Styleguide Sub.CategoryFlags
*/
/*
Tags
A full data driven system uses tagging to categorize content, separate the content into groups, or describe the content in ways that are directly applied by the Titles and labels.
Markup:
Weight:0
Styleguide Sub.Tags
*/
/*
Category Tag
Category Tags are singular tags that divide content. An item can only have a single tag from a category group.
Markup:
Channel 1
{{>"Data.Agenda.ChannelName"}}
Weight:0
Styleguide Sub.Tags.Category
*/
/*
Filter Tags
Filter Tags are decorative tags that are used to filter content. Many tags from a single group can be applied to a single item.
Markup:
Tag Name 1
Daugherty - Larkin
relationships
web-readiness
Weight:0
Styleguide Sub.Tags.Filter
*/
/*
Presentation List Item
When sessions have more then one presentation they are listed in a list. Presentations are colored with bg_white and bg_white-9 to have color differences.
Markup:
MarkupWrapperClasses: ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
Data:
Data.Presentation.Title - Title
Data.Presentation.LiveTime - Live Time
SubComponents:
Sub.FacultyList - Faculty List
Sub.ActionButtons.Favorite.Small - Small Action Button
ClassList:
Sub.ClassList.Border.BlackTop - Border Top
Weight:0
Styleguide Sub.Presentation.ListItem
*/
/*
Presentation List Item With Details
When sessions have more then one presentation they are listed in a list. Presentations are colored with bg_white and bg_white-9 to have color differences.
Markup:
MarkupWrapperClasses: ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
NOTE: This might not function completely because of the JavaScript on the page in side the styleguide documentation.
Data:
Data.Presentation.Title - Title
Data.Presentation.LiveTime - Live Time
SubComponents:
Sub.FacultyList - Faculty List
Sub.ActionButtons.Favorite.Small - Small Action Button
ClassList:
Sub.ClassList.Border.BlackTop - Border Top
Weight:0
Styleguide Sub.Presentation.ListItemWithDetails
*/
/*
Presentation List
List of Presentations is similar DOM independent of the context.
Markup:
SubComponents:
Sub.Presentation.ListItem - List Item
Sub.Presentation.ListItemWithDetails - List Item with Details
Weight:0
Styleguide Sub.Presentation.List
*/
/*
Auxiliary Data
Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.
Markup:
SubComponents:
Sub.Credits.NonAccredited - Non Accredited
Sub.FacultyList.AuxSession - Session Faculty Lists
Sub.Credits.Dots - Credit Dots
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Weight:0
Styleguide Sub.Player.AuxData
*/
/*
Auxiliary Data Not Accredited
Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.
Markup:
SubComponents:
Sub.Credits.NonAccredited - Non Accredited
Sub.FacultyList.AuxSession - Session Faculty Lists
Sub.Credits.Dots - Credit Dots
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Weight:0
Styleguide Sub.Player.AuxData.NotAccredited
*/
/*
Auxiliary Data Abstracts
Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.
Markup:
SubComponents:
Sub.Credits.Dots - Credit Dots
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Weight:0
Styleguide Sub.Player.AuxData.Abstracts
*/
/*
Attachments Modal
Description:
Markup:
Attachments
Really long name of a files so the text might wrap because we can never keep titles short and we have to medically explain everything.
lorem text link
MarkupWrapperClasses: relative
Note: A `block relative` class was added to this DOM element to make it visible in this documentation.
Weight: 200
Styleguide Sub.Attachments
*/
/*
Playing Date Time
When presenting the playing date and time this simple dot pattern is a good solution.
Markup:
{{> "Data.Agenda.LiveDate"}} {{> "Data.Agenda.LiveTime" }}
Weight:0
Styleguide Sub.PlayingDateTime
*/
/*
Video Thumbnail
Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.
bg_primary - is the default background color
bg_accent - any background color can be swapped out
Markup:
Weight:0
Styleguide Sub.Header.VideoThumbnail
*/
/*
Abstract Thumbnail
Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.
bg_primary - is the default background color
bg_accent - any background color can be swapped out
Markup:
Weight:0
Styleguide Sub.Header.AbstractThumbnail
*/
/*
Favorite Button
The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.
active - when the favorite is active
Markup:
Weight:0
Styleguide Sub.ActionButtons.Favorite
*/
/*
Favorite Button (Disabled)
The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.
active - when the favorite is active
Markup:
Weight:0
Styleguide Sub.ActionButtons.Favorite.Disabled
*/
/*
Favorite Button Small
The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.
active - when the favorite is active
Markup:
Weight:0
Styleguide Sub.ActionButtons.Favorite.Small
*/
/*
Action Buttons
The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.
Watch - when the main asset of the loaded page is a video or live stream.
Join - when the main asset of the loaded page is an online meeting or webinar.
Listen - when the main asset of the loaded page is a podcast or audio.
View - when the main asset of the loaded page is a graphic, pdf, or slide deck.
Markup:
Weight:0
Styleguide Sub.ActionButtons
*/
/*
Locked Attachment Button
Attachments can be released after access to the presentation or session UI has been granted. In these cases the button is disabled. And an alert is displayed giving the time when it will be available.
Markup:
Attachments
Weight:0
NOTE: This pattern is using bootstrap modal to display the message. The IDs of the modal and bs-targets are hard coded in the pattern and need to be dynamic for production.
Styleguide Sub.ActionButtons.LockedAttachments
*/
/*
Embargoed Attachment Actions Buttons
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.ActionButtons.EmbargoedAttachments
*/
/*
Action Buttons No Details
Description: The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.
watch - watch action button
Markup:
Weight:0
Styleguide Sub.ActionButtons.NoDetails
*/
/*
Action Buttons Only
The Actions buttons are a combination of functions and a link to the education materials player.
watch - watch action button
Markup:
Weight:0
Styleguide Sub.ActionButtons.Only
*/
/*
Action Buttons On Demand
The On Demand Actions buttons never have the calendar reminder button.
Markup:
Weight:200
Styleguide Sub.ActionButtons.OnDemand
*/
/*
Action Buttons Featured
The Featured Actions buttons never have the calendar reminder button.
Markup:
Weight:200
Styleguide Sub.ActionButtons.Featured
*/
/*
Abstract Flag
Abstract flags are used to indicate that an abstract is awarded for some reason. Use the default and star for most reasons. If there is a need for three levels of awards then use star and trophy alt or the angle up icons. In the content of the page you should denote the legend of the icons used.
fa-star - this denote the premium awarded abstracts (e.g. top 10)
fa-angle-up - this denote the premium awarded abstracts (level up 1)
fa-angle-double-up - this denote the premium awarded abstracts (level up 2)
Markup:
Weight:0
Styleguide Sub.Award.Flags
*/
/*
Abstract Flag Legend
Markup:
{{> "Sub.Award.Flags" modifier_class="fa-star"}}
Special Category
{{> "Sub.Award.Flags" modifier_class=""}}
Top Ten
Weight:0
Styleguide Sub.Award.FlagLegend
*/
/*
Attachments Big Button
On player pages use the big button for attachments. The text only displays when the view port is medium and up.
Markup:
Attachments
Weight:0
Styleguide Sub.Attachments.BigButton
*/
/*
Attachments Big Button (Disabled)
On player pages use the big button for attachments. The text only displays when the view port is medium and up.
Markup:
Attachments
Weight:0
Styleguide Sub.Attachments.BigButton.Disabled
*/
/*
Chat Window
The chat window is used to display the chat in player pages.
Markup:
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
(2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
(2:19 PM) Lovely Day : Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
(3:48 PM) Lovely Day : test
(3:50 PM) Matt Watier : hello
Weight:0
Styleguide Sub.Player.Chat
*/
/*
CIO Window
CIO is a survey widget that allows faculty to collect questions and polls from participants.
Markup:
Weight:0
Styleguide Sub.Player.CIO
*/
/*
Program Borders OutSide
CSS Classes on the Article tag of all program elements
Markup:
c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Style.OuterBorder
*/
/*
Program Borders Inside
CSS Classes on the Article tag of all program elements
Markup:
br_1 br-b_0 br-tr_radius br-tl_radius br_solid br_black-3 flex flex_column font_ui m-t_n2 relative
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Style.InnerBorder
*/
/*
Section Header
default - Grid
Markup:
Weight:0
Styleguide Sub.LayoutBlock
*/
/*
Border Top Primary
Used in dividing lists of items.
Markup:
br-t_1 br_black-3 br_solid
MarkupWrapperClasses:
Weight:0
Styleguide Sub.ClassList.Border.BlackTop
*/
/*
Faculty List
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
Data:
Data.Faculty.FullName - Full Name
Data.Faculty.FullName - Location
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
Weight:0
Styleguide Sub.FacultyList
*/
/*
Aux Session Faculty List
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
Role Type 1
Marty Little ( {{> "Data.Faculty.Location" }})
Eileen Marvin ( {{> "Data.Faculty.Location" }})
Chelsea Dach DVM ( {{> "Data.Faculty.Location" }})
SubComponents:
Data.Faculty.FullName - Full Name
Data.Faculty.Location - Location
Weight:0
Styleguide Sub.FacultyList.AuxSession
*/
/*
Combined Faculty List
When a presentation is in a single state the combination of session roles and presentation roles are shown.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
SubComponents:
Data.Faculty.FullName - Full Name
Data.Faculty.FullName - Location
Weight:0
Styleguide Sub.FacultyList.SessionAndPresentation
*/
/*
Session Faculty List
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
SubComponents:
Data.Faculty.FullName - Full Name
Data.Faculty.FullName - Location
Weight:0
Styleguide Sub.FacultyList.Session
*/
/*
No Location Faculty List
When you list non-event areas like Posters, and Abstracts the list removes the location of the person.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
Role Type 1:
{{> "Data.Faculty.FullName" }}
Role Type 2:
Dianna Denesik III
Miguel Romaguera
Jeanette Franecki
SubComponents:
Data.Faculty.FullName - Full Name
Weight:0
Styleguide Sub.FacultyList.NoLocation
*/
/*
Action Buttons Clear Search
This action button is used to clear the search filters and parameters.
Markup:
Weight:0
Styleguide Sub.ActionButtons.ClearSearch
*/
/*
Faceted Search
Facet Groups
Markup:
MarkupWrapperClasses: max-w_30 ul_none
NOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count. The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.
SubComponents:
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Weight:0
Styleguide Sub.Search.Faceted
*/
/*
Faceted Search
Facet Groups
Markup:
MarkupWrapperClasses: max-w_30 ul_none
NOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count. The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.
SubComponents:
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Weight:0
Styleguide Sub.Search.FacetedPrimary
*/
/*
Faceted Type Ahead
A type ahead search that adds a selected faceted filter to the search page. This is used when filters are exceptionally long and could be difficult to read when listed out. Authors, and mesh terms can use this pattern to add them as a filter to the search page.
Markup:
MarkupWrapperClasses:
Weight:100
Styleguide Sub.Search.Faceted.TypeAhead
*/
/*
Collapse/Expand
The collapse/expand icon is used to collapse and expand the facet group.
Markup:
collapse
Weight:0
Styleguide Sub.CollapseIcon
*/
/*
Collapse/Expand No Text
The collapse/expand icon is used to collapse and expand the facet group.
Markup:
Weight:0
Styleguide Sub.CollapseIcon.NoText
*/
/*
Facet Checkbox
The single checkbox for a facet.
Markup:
MarkupWrapperClasses: ul_none
Weight:0
Styleguide Sub.Search.FacetCheckbox
*/
/*
Facet Checkbox With Trash
The single checkbox that is generated by the type ahead filter search. The trash button removes the filter.
Markup:
MarkupWrapperClasses: ul_none
Weight:0
Styleguide Sub.Search.FacetCheckboxWithTrash
*/
/*
Search Bar
Simple Search Bar
Markup:
Program
MarkupWrapperClasses:
Weight: 0
Styleguide Sub.Search.Bar
*/
.jump-buttons_top {
top: 0;
}
/*
Program Bar
Some events don't need a search bar the program bar remains because it is need to hide the jump links.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Sub.Search.NoBar
*/
/*
Result Overview
Small strip of data that shows the number of results and the time it took to search.
Markup:
Weight:0
Styleguide Sub.Search.ResultOverview
*/
/*
Pagination
Pagination is used to navigate through the results.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Pagination
*/
/*
Member Profile Data
Data for the Member Profile that is visible for the user.
Markup:
Account Information
User Name:Regina Rutherford
Member ID:0152151214
Email:test@boo.com
Click the 'Member Help' button to send along your member information to help diagnose this issue.
MarkupWrapperClasses:
Weight:0
Styleguide Sub.System.MemberData
*/
/*
No Access Trouble Shooting
The instructions to the user when they land on the "No Access" to the page.
Markup:
No Access to [PRODUCT NAME]
[PRODUCT DESCRIPTION]. To read more about the details of [PRODUCT NAME] click the learn more button.
To purchase, please click the "Register" button below. Once you have completed your purchase, please wait 15 minutes to allow the system to process the information.
If you have just registered and you have waited 15 minutes and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vitae ex minus voluptas, debitis consequuntur, voluptatem, ad nostrum quod eum pariatur natus? Aspernatur repellendus a sapiente iure quibusdam molestias nulla?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vitae ex minus voluptas, debitis consequuntur, voluptatem, ad nostrum quod eum pariatur natus? Aspernatur repellendus a sapiente iure quibusdam molestias nulla?
Dolorem quo eos quibusdam illo eveniet. Eius repellendus totam nam atque aut dicta molestias et. Molestiae nobis rerum possimus voluptatem non. Natus soluta aliquam occaecati libero blanditiis sed sed non. Aut asperiores enim ut mollitia. Ea aliquam exercitationem consectetur temporibus laudantium harum voluptatem.Blanditiis sapiente accusantium in dolorem adipisci. Quibusdam nihil voluptates tempora. Itaque nihil iste nulla assumenda velit nam et corporis dolorem. Illo ea officia quibusdam harum. At quisquam ullam nam. Fugiat et debitis.
Weight:0
Styleguide Structures.ImageContentSimple
*/
/*
Call-to-Action Card
Description: Some content areas are chunked out to drive usage through a call to action card.
Markup:
Member Section
Connect with ACC’s Sports and Exercise Member Section, THE home for sports and exercise professionals within the ACC, advocating for and advancing the priorities of the community, and serving as a College-wide resource for issues related to sports and exercise professionals.
Weight:100
Styleguide Structures.Call To Action
*/
/*
External Resource
External Sections of content that are helpful to cross promote other products from the conferences.
primary - Change the color of the block to primary.
accent - Change the color of the block to accent.
Markup:
ACC’sCOVID-19 HUB
MarkupWrapperClasses:
gap-x_4 gap-y_4 grid template-x_30
Styleguide Structures.External Resource
*/
/*
Alpha List
Long list of alpha ordered items with quick link jumping to the letter.
Markup:
Weight:0
Styleguide Structures.AlphaList
*/
/*
Style - Container Classes
Markup:
relative br-t_1 br_dotted br_primary-3 w_100 p-y_4 font_0 flex_row flex
Styleguide Structures.AlphaList.container_classes
*/
/*
Style - Marker Classes
Markup:
c_white font_8 font_accent font_bold inline-block uppercase shadow_overlap-light bg_primary-n2 lh_0 br_radius p_2 p-x_4 m-x_3 sticky t_4 flex_none
Styleguide Structures.AlphaList.marker_classes
*/
/*
Style - List Item Nav Classes
Markup:
c_black-7 text_center
Styleguide Structures.AlphaList.li_classes
*/
/*
Style - List Item Nav Link Classes
Markup:
bg_primary-4 br_radius h:c_white h:bg_primary-n3 p-x_3 block h:undecorated
Styleguide Structures.AlphaList.link_classes
*/
/*
Sub - List Item Name
Markup:
{{ modifier_class }}
{{> "Data.Faculty.Title" }}
{{> "Data.Faculty.Location" }}
Styleguide Structures.AlphaList.list_item_name
*/
/*
Style - List Item Container Classes
Markup:
flex_auto gap-x_5 gap-y_4 grid columns_1 columns_2:md columns_3:lg p-t_0 p_4 ul_none
Weight:0
Styleguide Structures.AlphaList.list_item_container_classes
*/
/*
Awardee
The basic Data of an awardee.
Markup:
HeadShot
Display Name
{{> "Data.Faculty.FullName" }}
Title
{{> "Data.Faculty.Title" }}
Location
{{> "Data.Faculty.Location" }}
MarkupWrapperClasses: reading-typography
Weight: 300
Styleguide Awards.Awardee
*/
/*
Awardee Avatar
When a head shot is missing it should use the avatar.
Markup:
MarkupWrapperClasses: br_round br_solid br_black-3 br_1 overflow_hidden shadow_bevel-light max-w_20
Weight: 0
Styleguide Awards.Awardee.Avatar
*/
/*
Awardee Avatar No Video
When a head shot is missing it should use the avatar.
Markup:
MarkupWrapperClasses: br_round br_solid br_black-3 br_1 overflow_hidden shadow_bevel-light max-w_20
Weight: 0
Styleguide Awards.Awardee.AvatarNoVideo
*/
/*
Awardee Premium
The base DOM and Data that represent an awardee. Head shots images are maxed at 350px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Data.Faculty.Photo"}}
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.Title" }}
{{> "Data.Faculty.Location" }}
MarkupWrapperClasses: font_2
Weight: -100
Styleguide Awards.Awardee.Premium
*/
/*
Awardee Premium with Video
The base DOM and Data that represent an awardee. Head shots images are maxed at 350px wide.
flex_column - The stacked version of the awardee.
Markup:
Video EMBED
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.Title" }}
{{> "Data.Faculty.Location" }}
MarkupWrapperClasses: font_2
Weight: -100
Styleguide Awards.Awardee.Premium.Video
*/
/*
Awardee Standard
The base DOM and Data that represent an awardee. Head shots images are maxed at 240px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Data.Faculty.Photo"}}
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.Title" }}
{{> "Data.Faculty.Location" }}
MarkupWrapperClasses: font_1
Weight: -50
Styleguide Awards.Awardee.Standard
*/
/*
Awardee Standard with Avatar
The base DOM and Data that represent an awardee. Head shots images are maxed at 240px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Awards.Awardee.Avatar"}}
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.Title" }}
{{> "Data.Faculty.Location" }}
MarkupWrapperClasses: font_1
Weight: -50
Styleguide Awards.Awardee.Standard.Avatar
*/
/*
Awardee Condensed
The base DOM and Data that represent an awardee. Head shots images are maxed at 160px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Data.Faculty.Photo"}}
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.Title" }}
{{> "Data.Faculty.Location" }}
MarkupWrapperClasses:
Weight: 50
Styleguide Awards.Awardee.Condensed
*/
/*
Awardee Ultra Condensed
The base DOM and Data that represent an awardee. Head shots images are maxed at 80px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Data.Faculty.Photo"}}
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.Title" }}
{{> "Data.Faculty.Location" }}
MarkupWrapperClasses:
Weight: 100
Styleguide Awards.Awardee.UltraCondensed
*/
/*
Awards
Awards in the system is a looped collections of information with a title and optional description of the award and the looped recipients. Depending on the type of award, the level of the award is more or less decorated.
MarkupWrapperClasses:
Weight:0
Styleguide Awards.Level
*/
/*
Award Premiere
The Premiere award is a special award that includes additional information about the award and the awardee. The content can be html and event include embeds of video and images.
MarkupWrapperClasses:
Weight:0
Styleguide Awards.Level.Premiere
*/
/*
Award Premiere Tier Stacked
Awards are blocks design to display the awards for the conference.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Awards.Level.Premiere.Column
*/
/*
Award Premiere Tier Row
Awards are blocks design to display the awards for the conference.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Awards.Level.Premiere.Row
*/
/*
Award Premiere Video
Awards are blocks design to display the awards for the conference.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Awards.Level.Standard.Status
*/
/*
Award Condensed
Awards are blocks design to display the awards for the conference.
Markup:
SubComponents:
Sub.Award.FlagLegend - Award Flags
Sub.Attachments.BigButton - Attachments
Sub.FacultyList - Faculty List
Sub.Player.AuxData.Abstracts - Aux Data
Data:
Data.Abstract.Title - Title
Weight:1000
Styleguide Page.Player.Abstract
*/
/*
On Demand
Description:
Markup:
SubComponents:
Sub.Award.FlagLegend - Award Flags
Sub.Attachments.BigButton - Attachments
Sub.FacultyList - Faculty List
Sub.Player.AuxData - Aux Data
Data:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Presentation.Title - Presentation Title
Weight:1000
Styleguide Page.Player.OnDemand
*/
/*
Page Layouts
Combination Patterns to split up the page into sections.
Weight: 5000
Styleguide Page.Layouts
*/
/*
Filter List
Search filter
Markup:
MarkupWrapperClasses:
Weight: 0
NOTE: Note that this page design is supposed to be full screen so in the documentation it might collapse incorrectly or seem too crunched.
Styleguide Page.Search.Filter
*/
/*
Search Bar with Filter
Search filter
Markup:
MarkupWrapperClasses:
Weight: 0
NOTE: Note that this page design is supposed to be full screen so in the documentation it might collapse incorrectly or seem too crunched.
caution: This item is not finalized and might be subject to change
SubComponents:
Sub.CollapseIcon.NoText - Collapse Icon
Sub.Search.Faceted - Search Facet Group
Sub.Search.Bar - Search Bar
Sub.Search.ResultOverview - Search Result Overview
Sub.Pagination - Pagination
Program.Session - Session
Program.Session.Shell - Session Shell
Program.Session.Collapsible - Session Collapsible
Styleguide Page.Search.BarAndFilter
*/
/*
No Results
When the search returns no results or the user has filters all results away.
Markup:
MarkupWrapperClasses:
Weight: 0
NOTE: Note that this page design is supposed to be full screen so in the documentation it might collapse incorrectly or seem too crunched.
caution: This item is not finalized and might be subject to change
SubComponents:
Sub.CollapseIcon.NoText - Collapse Icon
Sub.Search.Faceted - Search Facet Group
Sub.Search.Bar - Search Bar
Sub.Search.ResultOverview - Search Result Overview
Sub.Pagination - Pagination
Program.Session.NoResults - No Result Response
Styleguide Page.Search.NoResults
*/
/*
No Access with Registration Preview
Description:
Markup:
Sorry, but it appears this account doesn't have access to [PRODUCT NAME ShortCode]
{{> 'Sub.System.AccessTroubleShooting'}}
Registration information on this account
Correct Registration [ PRODUCT NAME ]
You do have a Registration for [ PRODUCT NAME ]. Some how you have gotten here by mistake.
Please click the "Refresh Access" button to get to the homepage.
Wrong type of Registration to give you access. [Product Code Title]
[ Product Code Description ... ] Gain access to conference hall in Washington DC. Maiores necessitatibus quis. Numquam tenetur dolorem voluptatem. Eum cum ipsam atque tempore velit tempora cupiditate deleniti et.
Voluptas sint fugiat molestiae error. Culpa odit quas consequuntur. Ut non qui.
You can purchase the upgrade to your Registration to include the virtual platform by clicking the button.
Event Registrations Found
You do have Registrations on this account but it is not for [ PRODUCT NAME ]. Could you have possibly registered for [PRODUCT NAME] on another account?
Do you have a Secondary Account?
If you do have a secondary account you might try to logging out of this account and logging into that account and return to [PRODUCT NAME].
Event Registrations On this Account
[Product Code Title X]
[Product Code Title Y]
[Product Code Title Z]
You have NO Registrations Associated with this Account
Do you have a Secondary Account?
If you do have a secondary account you might try to logging out of this account and logging into that account and return to [PRODUCT NAME].
NOTE: Only one of the "Event Registrations Found Cards" show at a time. The cards fail in the order of the above list.
Weight:0
Styleguide Page.Access.NoAccess
*/
/*
Program
The central UI of an event is the program which displays all educational content from the conference.
MarkupWrapperClasses:
Weight: 0
Styleguide Program
*/
/*
Session
The basic session is Session with a title that has a playlist of presentations
Markup:
MarkupWrapperClasses:
Weight: 0
Data:
Data.Session.ID - Session ID
Data.Session.Title - Session title
SubComponents:
Sub.Presentation.List - Presentation List
Sub.ActionButtons.NoDetails - Action Buttons
Sub.ActionButtons.Favorite.Small - Favorite Button
Sub.PlayingDateTime - Playing Date Time
Sub.CategoryFlags - Category Flags
Styleguide Program.Session
*/
/*
Session Collapse
The basic session is Session with a title that has a playlist of presentations
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Program.Session.Collapsible
*/
/*
Session Shell
A session shell is when there is only one presentation.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Program.Session.Shell
*/
/*
On Demand
After the completion of a video the Sessions are broken down to the individual presentations and stored in the On Demand Area for viewing.
Markup:
Weight: 10000
Data:
Data.Presentation.Title - Presentation Title
Data.Session.Title - Session Title
Data.Session.ID - Session ID
SubComponents:
Sub.Credits.Dots - Credit Dots
Sub.FacultyList.SessionAndPresentation - Session & Presentation Faculty List
Sub.PlayingDateTime - Playing Date Time
Sub.ActionButtons.OnDemand - Action Buttons
Sub.CategoryFlags - Category Flags
Styleguide Program.OnDemand
*/
/*
Condensed Session
Condensed Sessions are used for listing designs that are not full featured.
.p_4.bg_black-1.shadow_emboss-light.br_radius.br_1.br_solid.br_black-3 - embossed background
Markup:
{{> Data.Session.ID }}
{{> Data.Session.Title }}
{{> Data.Agenda.LiveTime }}
MarkupWrapperClasses: max-w_30:md
Weight: 10000
Data:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.LiveTime - Live Time
SubComponents:
Sub.ActionButtons - Watch Button
Styleguide Program.CondensedSession
*/
/*
No Results
When the results are empty the user is presented with a message.
Markup:
OH NO!We couldn't find any results for your search.
Search Help
It is easy to search for a session, but its also easy to have a typo. Check your spelling and try again.
Click the `Clear Search` button to return to all sessions.
MarkupWrapperClasses:
Weight:0
Styleguide Program.Session.NoResults
*/
/*
Non Accredited Session
There are sessions that are tagged as non accredited which means they are not eligible for credit and are industry specific.
Markup:
MarkupWrapperClasses:
Components:
Sub.FacultyList.SessionAndPresentation - Session Faculty & Faculty List
Sub.Credits.NonAccredited - Non Accredited Message
Sub.ActionButtons.NoDetails - Action Button w/o Details
Weight:0
Styleguide Program.Session.NonAccredited
*/
/*
Abstracts
Abstracts are a presentation of a static slide deck, or pdf with a possible attached video. These cards link to an abstract player page.
Markup:
MarkupWrapperClasses: grid columns_3:lg columns_2:md columns_1 grid gap_4
Data:
Data.Abstract.Title - Title
SubComponents:
Sub.Award.Flags - Award Flags
Sub.Header.AbstractThumbnail - Image Thumbnail
Sub.FacultyList.NoLocation - Faculty List w/o Location
Sub.Credits.Dots - Credit Dots
Sub.ActionButtons - Action Buttons
Weight:0
Styleguide Program.GridFormat.Abstract
*/
/*
Abstracts Grid
Abstracts are presented in a grid view.
Markup:
{{> Program.GridFormat.Abstract }}
{{> Program.GridFormat.Abstract modifier_class="Arrhythmia Side Effect Electrocardiographic Clinical " }}
{{> Program.GridFormat.Abstract modifier_class="" }}
MarkupWrapperClasses:
NOTE: A grid-item at its smallest is 300px wide the grid column size needs to be set depending on the width the parent container.
Weight:0
Styleguide Program.GridFormat.Abstract.Grid
*/
/*
Featured Presentation
Featured Sessions are On Demand Presentations.
Markup:
{{> "Sub.CategoryFlags" }}
MarkupWrapperClasses:
NOTE: A grid-item at its smallest is 300px wide the grid column size needs to be set depending on the width the parent container.
Weight:0
Styleguide Program.GridFormat.FeaturedPresentation.Grid
*/
/*
Whats Happening Now
Condensed Sessions are used for listing designs that are not full featured.
Markup:
MarkupWrapperClasses: max-w_30:md
Data:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Weight: 10000
Styleguide Program.GridFormat.WhatsNow
*/
/*
Whats Happening Now NON-Accredited
Condensed Sessions are used for listing designs that are not full featured.
Markup:
MarkupWrapperClasses: max-w_30:md
Data:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Weight: 10000
Styleguide Program.GridFormat.WhatsNow.NonAccredited
*/
/*
Whats Now Item - Horizontal
Whats happening now items are used for listing designs that are not full featured. When there is only one on a full width page you can use this horizontal design.
Markup:
MarkupWrapperClasses:
Data:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Weight: 10000
Styleguide Program.GridFormat.WhatsNow.Horizontal
*/
/*
Whats Happening Now Grid
A zone on the page that displays the current live session.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Program.GridFormat.WhatsNow.Grid
*/
/*
Whats Happening Next
During the day there will be gaps that will not have a video or session playing so we want to broadcast the information of what will be playing soon.
Markup:
MarkupWrapperClasses: max-w_30:md
Data:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
NOTE: the Date in the Starting message is conditional. If the session starts on a day that isn't today then the date will be displayed.
Weight: 10000
Styleguide Program.GridFormat.WhatsNext
*/
/*
Whats Happening Next - Non Accredited
During the day there will be gaps that will not have a video or session playing so we want to broadcast the information of what will be playing soon.
Markup:
MarkupWrapperClasses: max-w_30:md
Data:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Sub.Credits.NonAccredited - Non Accredited Tag
NOTE: the Date in the Starting message is conditional. If the session starts on a day that isn't today then the date will be displayed.
Weight: 10000
Styleguide Program.GridFormat.WhatsNext.NonAccredited
*/
/*
Whats Happening Next - Grid
At times between breaks of sessions the whats happening next will be a grid will show a whats happening next grid because there are no sessions playing.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Program.GridFormat.WhatsNext.Grid
*/
/*
Whats Happening Next - Grid
At times before the end of the conference but if there is no scheduled session.
Markup:
{{> "Sub.SectionHeader" modifier_class="End of Current Scheduled Program" }}
The Current Program has ended
But the event is not over yet and there could possibly be more. Check back soon for more information or view pass sessions from the On Demand Page.
Weight:0
Styleguide Program.GridFormat.WhatsNext.EndOfProgram
*/
/*
Agenda Grid
The agenda grid is a day layout for the agenda view.
MarkupWrapperClasses:
Weight:0
Styleguide Program.AgendaGrid
*/
/*
Non-Accredited Session
Based on the Session the Non-accredited session is styled to represent that it does not have an accreditation.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Program.AgendaGrid.Session.NonAccredited
*/
/*
Grid Session
The day grid sessions are light on information because the limitations of the layout.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Program.AgendaGrid.Session
*/
/*
Day Grid with Channels.
There is need to override the default css variables of this design if you are going to shift away from the default. The units of time are set to increments of 5 minutes.
Markup:
Full Program
Channel Name 1Channel Name 2Channel Name 3Channel Name 4
{{> "Program.AgendaGrid.Hour" modifier_class="9" }}
{{> "Program.AgendaGrid.Session" modifier_class="time-start_9-00 time-end_10-00 channel-start_3 channel-end_4" }}
{{> "Program.AgendaGrid.Hour" modifier_class="10" }}
{{> "Program.AgendaGrid.Session" modifier_class="time-start_10-00 time-end_11-40 channel-start_1 channel-end_1" }}
{{> "Program.AgendaGrid.Session.NonAccredited" modifier_class="time-start_10-00 time-end_11-40 channel-start_2 channel-end_3" }}
{{> "Program.AgendaGrid.Hour" modifier_class="11" }}
{{> "Program.AgendaGrid.Hour" modifier_class="12" }}
{{> "Program.AgendaGrid.Session" modifier_class="time-start_12-00 time-end_13-00 channel-start_1 channel-end_3" }}
{{> "Program.AgendaGrid.Hour" modifier_class="13" }}
{{> "Program.AgendaGrid.Session" modifier_class="time-start_13-30 time-end_15-10 channel-start_3 channel-end_4" }}
{{> "Program.AgendaGrid.Hour" modifier_class="14" }}
{{> "Program.AgendaGrid.Hour" modifier_class="15" }}
{{> "Program.AgendaGrid.Hour" modifier_class="16" }}
{{> "Program.AgendaGrid.Hour" modifier_class="17" }}
MarkupWrapperClasses:
Weight:0
FORMAT: In the real design the hours should be in the format of "3 p.m" and not military time of "15:00"
NOTE: Limitation of this design because of the pattern library. The Hours could be formatted differently to reflect the AM and PM. But this build needs to be done in military time because of lack of dynamic labels for the hours.
Styleguide Program.AgendaGrid.Day
*/
/*
Hour Line
description
Markup:
{{ modifier_class }}:00
MarkupWrapperClasses: day_grid
Weight:0
Styleguide Program.AgendaGrid.Hour
*/
/*
Content Filler
This is a styleguide only element to show structure edges.
Markup:
Layout Zone: {{ modifier_class }}
MarkupWrapperClasses:
Weight: 100
Styleguide Page.Layouts.Filler
*/
/*
Grid Filler
This is a styleguide only element to show structure edges.
Markup:
Grid Area: {{ modifier_class }}
MarkupWrapperClasses:
Weight: 100
Styleguide Page.Layouts.GridFiller
*/
/*
Sub Grid Filler
This is a styleguide only element to show structure edges.
Markup:
Grid Area: {{ modifier_class }}
MarkupWrapperClasses:
Weight: 100
Styleguide Page.Layouts.SubGridFiller
*/
/*
Side Bar Area
This pattern is often used to push the sidebar bellow the main content area.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Page.Layouts.Sidebar
*/
/*
Side Bar Area With Ad
This pattern is often used to push the sidebar bellow the main content area.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Page.Layouts.SidebarAndAd
*/
/*
Sponsor Tiles
Description: A tile version of sponsor information
Weight:0
Styleguide Sponsor.Tile
*/
/*
Sponsor Grid
Description:
Markup:
{{> Sponsor.Tile.WebLink }}
{{> "Data.Sponsor.Name"}}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?
{{> "Data.Sponsor.Address"}}
{{> "Data.Sponsor.Name"}}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?
Quia cum enim voluptates quas qui assumenda omnis qui. Modi ducimus totam amet et vel aut eveniet. Perferendis temporibus distinctio eos labore quaerat eius rerum. Ipsam qui et eveniet quo necessitatibus.
Data:
Data.Sponsor.Name - Name
Data.Sponsor.Description - Description in HTML
Data.Sponsor.Address - Address
MarkupWrapperClasses: grid columns_3:lg columns_2:md columns_1 gap_4
Weight:0
Styleguide Sponsor.Tile.WebLink
*/
/*
Faculty
Description: Faculty are the people who are responsible for the design and development of the sessions used in an event. They can take many roles in the session or presentation, such as: chair, panelist, presenter, facilitator, or even a author. There can be many faculty members to a single presentation.
Weight:0
Styleguide Faculty
*/
/*
Full Data with Photo
Description: The most basic way we represent a faculty.
br_radius - The border radius of the image.
br_round - The border radius of the image.
br_circle - The border radius of the image.
Markup:
{{> "Data.Faculty.Photo" }}
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.Title" }}
{{> Data.Faculty.Location }}
{{> Data.Faculty.Bio }}
{{> "Sub.Faculty.TwitterButton"}}
MarkupWrapperClasses: grid-col_4 grid
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
SupComponents:
Sub.Faculty.TwitterButton - Twitter Button
Data:
Data.Faculty.Photo - Profile Photo
Data.Faculty.FullName - Full Name
Data.Faculty.Title - Title
Data.Faculty.Bio - Bio
Weight:0
Styleguide Faculty.PhotosHorizontal
*/
/*
Twitter Button
Description: When a faculty member has a twitter handle, we can display a twitter button.
Markup:
{{> Data.Faculty.TwitterHandle }}
Data:
Data.Faculty.TwitterHandle - Twitter Handle
Weight:0
Styleguide Sub.Faculty.TwitterButton
*/
/*
Full Data with Photo
Description:
This component is used to display full information about faculty members, including a headshot, name, title, location, biography, and social media links.
Markup:
{{> "Data.Faculty.Photo"}}
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.Title" }}
{{> "Data.Faculty.Location" }}
{{> "Data.Faculty.Bio"}}
{{> "Sub.Faculty.TwitterButton"}}
MarkupWrapperClasses: p_4
SubComponents:
Sub.Faculty.TwitterButton - Twitter Button
Data:
Data.Faculty.Photo - Faculty Photo
Data.Faculty.FullName - Faculty Full Name
Data.Faculty.Title - Faculty Title
Data.Faculty.Location - Faculty Location
Data.Faculty.Bio - Faculty Bio
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
NOTE: Please ensure that the faculty data, especially the biography, is properly formatted HTML.
Weight:0
Styleguide Faculty.Photos
*/
/*
Full Data Without Photo
Description: The most basic way we represent a faculty.
Markup:
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.Title" }}
{{> Data.Faculty.Location }}
{{> Data.Faculty.Bio }}
{{> "Sub.Faculty.TwitterButton"}}
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
Weight:0
Styleguide Faculty.NoPhotos
*/
/*
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 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 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 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 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 Navigation.Toggle.AdvancedSquare
*/
/*
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 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 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 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 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 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 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 Navigation.Sidebar.GreatGrandchild
*/
/*
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:
{{> HTML.Typography.Sample }}
{{> HTML.Typography.Sample }}
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide 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:
{{> HTML.Typography.Sample }}
{{> HTML.Typography.Sample }}
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 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 Structures.UITabs.Tabs
*/
/*
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 Structures.UITabs.Tabs.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 Structures.UITabs.Tabs.LinkDisabled
*/
/*
Scroll Overflow Script
Description: Javascript is needed to make the scrolls work on the page
Markup:
Weight:0
Styleguide Structures.UITabs.Script
*/
/*
Tabs
Description: 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.
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 Structures.Tabs
*/
/*
Simple Tabs
Simple in page tabs
Markup:
Styleguide Structures.Tabs.Tabs
*/
/*
Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Markup:
Weight: 0
Styleguide Structures.Tabs.TabsDark
*/
/*
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 Structures.Tabs.TabsDark.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 Structures.Tabs.TabsDark.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 Structures.Tabs.Tabs.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 Structures.Tabs.Tabs.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 Structures.Tabs.Tabs.LinkDisabled
*/
/*
Pages
Combination of UI brought together for pages on the site.
Weight: 0
Styleguide Page
*/
/*
Retired Designs
The virtual product has evolved from its original form, and has made some designs that are no longer available or in use. This area is the graveyard for those designs.
Weight: 400000
Styleguide Graveyard
*/
/*
Deprecated: Video Block Dual Channel
Description: These video blocks are used in combination with grid templates and dividers.
Markup:
{{> "Sub.DateTimeDividers" }}
{{> "Graveyard.Program.Live Video" }}
{{> "Graveyard.Program.Live Video" }}
{{> "Sub.DateTimeDividers" }}
{{> "Graveyard.Program.Live Video" }}
Weight: 100000
Styleguide Graveyard.Program.Channels
*/
/*
Deprecated: Video Block Session
Description: These video blocks are used in combination with grid templates and dividers.
Markup:
MarkupWrapperClasses:
gap_5 grid justify_around p_4 p_5 columns_1 columns_2:md
Weight: 10000
FORMAT: this element uses data that has strict data formatting requirements. See the data tab for more information.
Styleguide Graveyard.Program.Live Video
*/
/*
Deprecated: Video Block Presentation
Description: These video blocks are used in combination with grid templates and dividers.
Markup:
{{> "Sub.Header.VideoThumbnail" }}
{{> "Data.Session.Title" }}
{{> "Data.Faculty.FullName" }}
{{> "Data.Faculty.FullName" }}
{{> "Sub.ActionButtons.NoDetails" }}
{{> "Sub.Credits.Dots" }}
MarkupWrapperClasses:
gap_5 grid justify_around p_4 p_5 columns_1 columns_2:md
Weight: 10000
FORMAT: this element uses data that has strict data formatting requirements. See the data tab for more information.
Styleguide Graveyard.Program.Presentation
*/
/*
Deprecated: Five Channel Max
Description:
Block Designs are Great for a few channels but there is a maximum of 5 channels without the design crushing too much.
Markup:
{{> "Sub.DateTimeDividers" }}
Weight: 100000
Styleguide Graveyard.Program.Max Channels
*/
/*
Deprecated: Channels Banners
Description: Conferences have added branding on the on demand area with category or channels banners.
generic - Channel Branding
track1 - Channel Branding
track2 - Channel Branding
track3 - Channel Branding
Markup:
Weight: 100
Styleguide Graveyard.LiveVideo.Channels.Banners
*/
/*
Deprecated: Video Block (Light)
Description: These video blocks are used in combination with grid templates and dividers.
generic_video - the default Channel for videos.
generic_video-nolabel - the default Channel for videos with no label.
track1_video - track 1 videos will have these decorations.
track2_video - track 2 videos will have these decorations.
track3_video - track 3 videos will have these decorations.
Markup:
Weight: 100
Styleguide Graveyard.Live Video
*/
/*
Deprecated: Twitter Tag
Description: Every conference has a common #tag structure asking user to join in to the conversation.;
Markup:
Join The Conversation
ACCAthleticHeart
Weight:0
Styleguide Graveyard.PageElements.TwitterTag
*/
/*
Deprecated: Branded Header
This is a templated banner that uses as the central branding of a conference product.
Markup:
Styleguide Graveyard.Header
*/
/*
Deprecated: Branded Header Overrides
This is a templated banner that uses as the central branding of a conference product.
acc21 - Annual Scientific Session 2021
ah20 - Care of the Athletic Heart
ada20 - ADA/Siegfried Conf
Markup:
Styleguide Graveyard.Header.Overrides
*/
/*
Lobby
This page brings together all active and future conferences. The page is hosted at the root domain of virtual.acc.org. This is the banner that uses as the umbrella brand of the conferences.
Markup:
Weight: 10000
Deprecated: Old Designs from Virtual 2020
Styleguide Graveyard.Lobby
*/
/*
Conference Teaser
This container holds the brand of the conferences with some high level information.
Markup:
ACC.20/WCC Virtual brings cutting-edge science and practice-changing updates directly to you. Watch videos and industry presentations, hear from experts, browse posters, download slides, and explore virtual exhibits — all On Demand and all for FREE.
live
March 28 - 30, 2020
on demand
Until June 30, 2020
available credits
cme
cne
Weight: 150
Deprecated: Old Designs from Virtual 2020
Styleguide Graveyard.Lobby.Cards.ACC20
*/
/*
COVID Conference CARD
Summer COVID-19 Education Series
Markup:
Weekly episodes of targeted and easy-to-consume education to address current and evolving knowledge and practice gaps to help you manage your patients with COVID-19 and heart disease.
live
June 6, 2020
updates
Every Thursday 12:00 p.m. – 1 p.m. ET June – August
on demand
Until December 31, 2020
Weight: 200
Deprecated: Old Designs from Virtual 2020
Styleguide Graveyard.Lobby.Cards.CVCOVID
*/
/*
Athletic Heart CARD
Care of the Athletic Heart Virtual
Markup:
MarkupWrapperClasses:
max-w_70
Weight: 10
Styleguide Graveyard.Block.LiveVideo.Horizontal
*/
/*
Locking Graphics
Showing assets before they are intractable is needed
Markup:
{{> "Graveyard.Program.Live Video"}}
MarkupWrapperClasses:
gap_5 grid justify_around p_4 p_5 grid-col_1 grid-col_2:md
Weight: 1000
Styleguide Graveyard.Program.LiveVideo.Locked Graphic
*/
/*
Workshops
Description: A collection of Workshops that are available for the user to select from.
Weight:10
Styleguide Graveyard.Program.Workshops
*/
/*
Simple
Description: Simple Design for Workshops.
Markup:
Weight: 10
Styleguide Graveyard.Program.Workshops.Simple
*/
/*
Workshops Button
Description: Workshops are interactive buttons that open a webex page and have the call to action "Join Now".
Markup:
Weight:0
Styleguide Graveyard.Program.Workshops.Button
*/
/*
Video Block
Description: These video blocks are used in combination with grid templates and dividers.
Markup:
MarkupWrapperClasses:
p_4 bg_white grid template-x_25 gap-x_5 gap-y_4
Weight: -1000
Styleguide Graveyard.Program.OnDemand.Video
*/
/*
Slides Block
Description: These slide blocks are used in combination with grid templates and dividers.
Markup:
MarkupWrapperClasses:
p_4 bg_white grid template-x_25 gap-x_5 gap-y_4
Weight: -800
Styleguide Graveyard.Program.OnDemand.Slides
*/
/*
eAbstract
eAbstracts are used in combination with grid templates and dividers.
Markup:
MarkupWrapperClasses:
p_4 bg_white grid template-x_25 gap-x_5 gap-y_4
Weight: -700
Styleguide Graveyard.Program.OnDemand.eAbstract
*/
/*
Journal Block
Description: These slide blocks are used in combination with grid templates and dividers.
Markup:
MarkupWrapperClasses:
p_4 bg_white
Weight: 100
Styleguide Graveyard.Program.OnDemand.Journals
*/
/*
Resource Package
Description: These slide blocks are used in combination with grid templates and dividers.
Markup:
MarkupWrapperClasses:
p_4 bg_white
Weight: 200
Styleguide Graveyard.Program.OnDemand.Resource
*/
/*
Sessions
Description: The session is the main content item of virtual conferences. These element are represented differently depending on the amount of sessions and presentation are in the conference. Sessions are a collection of presentations.
Weight:10
Styleguide Graveyard.Program
*/
/*
Simple
Description: When the count of sessions is lower then 10 in count, the Simple Design is recommended.
Markup:
Weight: 10
Styleguide Graveyard.Program.Simple
*/
/*
On Demand
Description: When the count of sessions is lower then 10 in count, the Simple Design is recommended the difference between live and on demand.
Markup:
Session I: Evolving New Frontiers of Imaging Ready for PracticeNew York Cardiovascular Symposium 2021 Welcome Video and Introduction of session and Faculty by Dr. Itchhaporia Dipti Itchhaporia, MD, FACC (Chair)
Weight: 10
Styleguide Graveyard.Program.OnDemand
*/
/*
Block Designs
For small conferences that have a small amount of content is recommended to use the Block Designs. When sessions are lower then 10 in count, the Block Designs are recommended.
Weight: 0
Styleguide Graveyard.Program.Block
*/
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;
}
/*
Deprecated: Lorem Text Loader
It is often we need to have space held for a return of details or text.
Markup:
Styleguide Recipes.InteractiveExtras.Text Placeholder Loader
*/
/*
Aspect Ratio
To create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly.
.aspect_8x10 - lock image to a 8 to 10 ratio
.aspect_1x1 - lock image to a 1 to 1 ratio
.aspect_2x1 - lock image to a 2 to 1 ratio
.aspect_3x2 - lock image to a 3 to 2 ratio
.aspect_4x3 - lock image to a 4 to 3 ratio
.aspect_16x9 - lock image to a 16 to 9 ratio
.aspect_21x9 - lock image to a 21 to 9 ratio
.aspect_4x1 - lock image to a 4 to 1 ratio
Markup:
Styleguide Recipes.InteractiveExtras.Placeholder Aspect Ratio
*/
.lorem-loader {
-webkit-animation: Gradient 3s ease infinite;
-moz-animation: Gradient 3s ease infinite;
width: 100%;
overflow: hidden;
background: linear-gradient(-45deg, hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.125 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.25) ), 1), hsla(var(--shade-h), calc( var( --shade-s ) - ( var( --shade-s ) * 0.25 ) ), calc( var(--shade-l) + ((100% - var(--shade-l)) * 0.5) ), 1));
background-size: 400% 400%;
color: #fff;
animation: Gradient 3s ease infinite;
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.icon-toggle_plus-minus-sub:before, .icon-toggle_check:before, .icon-toggle_check-circle:before, .icon-toggle_check-sqaure:before, .icon-toggle_arrow-circle:before, .icon-toggle_chevron-double-left-right:before, .icon-toggle_chevron-double-up-down:before, .icon-toggle_chevron-up-down:before, .icon-toggle_plus-minus:before, .icon-toggle_bars-times:before,.icon-toggle_plus-minus-sub:before, .icon-toggle_check:before, .icon-toggle_check-circle:before, .icon-toggle_check-sqaure:before, .icon-toggle_arrow-circle:before, .icon-toggle_chevron-double-left-right:before, .icon-toggle_chevron-double-up-down:before, .icon-toggle_chevron-up-down:before, .icon-toggle_plus-minus:before, .icon-toggle_bars-times:before {
margin: 0 4px;
margin: 0 0.25rem;
}
/*
Is Active Toggle
Many momment there are needs for toggles of icon when the parent is in the state of `active`. Used in tree navs, dropdowns, and collapsing areas.
.icon-toggle_plus-minus - Toggle between plus and minus square
.icon-toggle_chevron-up-down - Toggle a chevron pointing up and then down.
.icon-toggle_chevron-double-up-down - Toggle the double chevron to point up when active
.icon-toggle_chevron-double-left-right - Toggle chevron left and right
.icon-toggle_arrow-circle - Toggle the arrow to have a circle when active.
.icon-toggle_bars-times - Toggle between bars and times
.icon-toggle_check-sqaure - Check Marks toggle on and off
.icon-toggle_check-circle - Check Marks toggle on and off
.icon-toggle_check - Check Marks toggle on and off
Markup:
Styleguide Recipes.Social Links
*/
/*
Social Links Monochrome
The social links can be restyled to be smaller.
Markup:
Styleguide Recipes.Social Links.Mono Chrome
*/
/*
Social Links Smaller
The social links can be restyled to be smaller.
Markup:
Styleguide Recipes.Social Links.Smaller
*/
/*
Stars
Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars.
Markup:
Weight:0
caution: This item is not finalized and might be subject to change
Styleguide Recipes.InteractiveExtras.Stars
*/
.star-rating {
color: hsla(var(--secondary-h), calc( var( --secondary-s ) - ( var( --secondary-s ) * 0.25 ) ), calc( var(--secondary-l) + ((100% - var(--secondary-l)) * 0.5) ), 1);
}
.star-rating.rating-5 li:nth-child(-n+5),.star-rating.rating-4 li:nth-child(-n+4),.star-rating.rating-3 li:nth-child(-n+3),.star-rating.rating-2 li:nth-child(-n+2),.star-rating.rating-1 li:nth-child(-n+1) {
color: hsla(var(--primary-h), calc( var(--primary-s) + ((100% - var(--primary-s)) * 0.015) ), calc( var( --primary-l ) - ( var( --primary-l ) * 0.15 ) ), 1);
}
/*
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. Muli is the current successor to Open Sans, and Maven is a slightly modern font to give a small level of interests which replaces Raleway, or Lato in other products.
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 either version 4 or version 5 of Font Awesome's icon sets, providing an extensive range of options for the website's visual design and functionality. Despite the release of version 6, there is no current initiative to upgrade due to the breaking changes that come with it. 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.
plus - fa-plus
arrow-right - fa-arrow-right
search - fa-search
envelope - fa-envelope
heart - fa-heart
star - fa-star
user - fa-user
Markup:
{{modifier_class}}
MarkupWrapperClasses:
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 - #3e6fb7;LOE A
$loe-mid-blue - #659cd3;LOE B-R
$loe-light-blue - #a1c1e6;LOE B-NR
$loe-pale-blue - #b5d5e5; 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*/
/*
Interactive Extras
Interactions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.
Styleguide Recipes.InteractiveExtras
*/
.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.
Weight: -9
HideCodeBlock: display_none
Styleguide HTML.Typography
*/
/*
Sample Typography
This text is used as a lorem content in many of our containers.
.p_4 - This is the basic typogrpahy from the browser.
.reading-typography.p_4 - this is the standard styling for typography of reading content
.reading-typography.font-size_up.p_4 - This font increased their sizes across all typography in the container.
.reading-typography.font-size_down.p_4 - This font decreses their sizes across all typography in the container.
.reading-typography.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:
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.
Weight: -9
HideCodeBlock: display_none
MarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50
Styleguide HTML.Typography.Sample
*/
/*
Basic Typography
Basic Typography is unstyled and relys on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves the reading of content text lacking. The overriding styles that are applied to Basic typography is a consistent font treatment (font sizing, font family, and font-weight) and what comes from the baseline frameworks that build the brand.
Markup:
Basic Typography: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.
Aenean commodo ligula eget dolor aenean massa
Cut sociis natoque penatibus et magnis dis
parturient montes nascetur ridiculus mus
Donec quam felis ultricies nec pellentesque eu
pretium quis sem nlla consequat massa quis enim
Donec pede justo fringilla vel aliquet nec vulputate
eget arcu
In enim justo rhoncus ut imperdiet a venenatis vitae
justo
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.
This paragraph is nested inside an article. It contains many different, sometimes useful, HTML5 tags. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation tag: abbr. Similarly, you can use acronym tag like this: ftw. You can define deleted text which often gets replaced with inserted text.
You can also use keyboard text, which sometimes is styled similarly to the <code> or samp tags. Even more specifically, there is a tag just for variables. Not to be mistaken with blockquotes below, the quote tag lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) tags.
Tricuspid regurgitation (TR) is a common valvular disease estimated to affect >1.5 million people in the U.S., with a yearly incidence of about 200,000 and >300,000 patients in the U.S and Europe, respectively.1 Stated another way, a clinically significant form of this valvular disease affects 4% (or 1 in 25) of patients ages 75 and older.2
Despite the current guidelines favoring early tricuspid valve repair, especially when undergoing concomitant left-sided cardiac surgery, most patients with TR receive lifetime medical therapy until intractable right-sided heart failure (HF) and end-organ dysfunction appear.1 In recent years, multiple studies have drawn attention to the poor prognosis of untreated TR, and demonstrated a clear tendency of excess mortality in patients with increasing severity of TR, highlighting the need for interventional options to improve outcomes.3
The future of medicine is increasingly in the hands of those who are effective users of clinical data.
– Bill Weintraub, MD, MACC
TR associated with left-sided valvular or myocardial disease is often a marker for late-stage chronic HF with limited treatment options and an unfavorable overall prognosis. However, isolated TR is also independently associated with excess mortality if left untreated. Thus, TR represents an important public health problem with an unmet clinical need.
Surgical approaches, either repair or replacement, have been shown to carry a high risk of in-hospital mortality, reaching 10%, without significant improvement over the past 10 years.4 As transcatheter interventional options for valvular heart disease continue to expand, transcatheter tricuspid valve repair through leaflet approximation or annuloplasty has been investigated.
Despite studies showing promising results with greater survival and freedom from HF rehospitalization compared with conservative management, its use can be limited by anatomical infeasibility such as large leaflet coaptation gap, perforation, significant leaflet tethering with dense chordae, and leaflet impingement with a cardiac implantable electronic device lead.
A myriad of investigational transcatheter tricuspid valve replacement (TTVR) devices have emerged as an alternative to surgery and to address this outstanding need, with promising early results related to safety, efficacy and improvements in patients' functional status and quality of life.
Orthotopic Valve Replacement
Orthotopic TTVR is a form of valve replacement performed by implanting a bioprosthetic valve on an existing tricuspid annulus, in a fashion similar to how it is performed in transcatheter aortic or mitral valve replacement. Several investigational devices are available with a variety of access and anchoring systems.
EVOQUE
The EVOQUE system (Edwards Lifesciences, Irvine, CA) is a self-expanding bovine pericardial valve mounted on a nitinol frame with a fabric skirt delivered through a transfemoral approach. The perimeter is surrounded by nine anchors that allow stabilization through anchoring to the annulus, leaflets and chords of the tricuspid apparatus. Its compassionate use in 27 patients with severe symptomatic TR at inoperable or high surgical risk has demonstrated 92% success with no periprocedural mortality.5
The reduction in TR remained excellent at one year (≤moderate in 96% and ≤mild in 87%) with sustained symptomatic improvement (NYHA I/II in 69% compared with 11% at baseline).5 All-cause death and HF hospitalization at one year were both at 7% without any deaths being identified as device-related. An early feasibility trial of this device, TRISCEND, is ongoing with an early report of 56 patients demonstrating a similar success rate, reduction in TR and symptomatic improvement.6
Lux-Valve
The Lux-Valve (Jenscare Biotechnology Co., Ningbo, China) is a bovine pericardium valve with a self-expanding nitinol atrial disc, self-adaptive fabric skirt, two graspers and an interventricular septal anchor. It is deployed via a minimally invasive right thoracotomy and transatrial approach. First-in-human experience including 31 patients reported a 100% technical success rate with TR reduction to ≤moderate and ≤mild in 100% and 85.2%, respectively at one year. Symptomatic improvement has persisted at one year with 82.8% maintaining NYHA I/II and a 96.8% survival rate.7 A study investigating the second-generation LuX-Valve Plus delivered through transjugular access is currently underway (NCT05436028).
GATE
The GATE (NaviGate Cardiac Structures, Inc., Lake Forest, CA) device was the first TTVR performed and is composed of an equine pericardium tricuspid valve mounted on a nitinol alloy stent. Twelve right ventricular tines grasp the native leaflets and 12 right atrial winglets covered by microfiber polyester cloth provide a seal. It is delivered through a right thoracotomy and transatrial access. An early study including five patients reported 100% technical success, with all patients demonstrating TR reduction to ≤mild; however, one patient died before discharge.8
Prominent Stressors For CVD Among LGBTQIA+ Adults
Excess cardiovascular disease risk is associated with three categories of stressors, as described by the Minority Stress Model: psychosocial (depression, anxiety, stress); behavioral (diet quality, physical activity, substance use); and physiological (hypothalamic-pituitary-adrenal axis, chronic inflammation, autonomic nervous system dysfunction).4
Structural/institutional stressors are also in place. The Behavioral Risk Factor Surveillance System survey 2014-2017 found a higher rate of poverty in LGBT people compared with cisgender heterosexual people vs. 15.7%, respectively).9
In 2018, a large portion of LGBTQIA+ individuals lived in states that did not have public accommodation (hospitals and schools) and employment nondiscrimination laws.10
For many transgender individuals, employee-sponsored health insurance is often not an option. Many employee-sponsored health insurance programs do not acknowledge partners or spouses with gender identities that align with the insured. More than two-thirds of gender minority adults report having experienced some form of discrimination from clinicians (including the use of abusive language). Roughly a quarter of transgender individuals have been denied health care by clinicians.11
Cardiovascular Disease Risk Factors
The data on cardiovascular health in LGBTQIA+ adults are limited because of a lack of research and challenges with study design. In terms of cardiovascular disease risk factors, the use of tobacco products is more likely among LGBTQIA+ adults than cisgender heterosexual adults.12 Alcohol and illicit drug use disorder, poor mental health and elevated body mass index are greater risk factors among sexual minority women than heterosexual women.13 Current studies also suggest that decreased sleep duration, which has been associated with higher rates of hypertension, diabetes and cardiovascular disease, was higher among sexual minority women compared with heterosexual women.14
Cardiovalve
The Cardiovalve (Venus Medtech Inc., Hangzhou, China) is deployed through transfemoral access and consists of a bovine pericardial leaflet mounted on a dual nitinol atrial and ventricular frame creating 24 grasping points for anchoring. The atrial portion of the frame has a covered flange to allow sealing to prevent paravalvular leak. Its compassionate use has been reported in 15 patients demonstrating significant reduction in TR to ≤moderate in 100% and ≤mild in 8% at 30 days.9 An early feasibility study is currently underway (NCT04100720).
Intrepid
The Intrepid (Medtronic Plc, Minneapolis, MN) is a transfemoral system with a bovine pericardial valve housed within a nitinol dual stent frame. Early experience with three patients reported technical success in all, and an early feasibility study is currently recruiting patients with a goal to include 15 patients (NCT04433065).10
This article was authored by Hiroki Ueyama, MD, and Isida Byku, MD, FACC, from the Division of Cardiology, Emory Structural Heart and Valve Center, Emory University Hospital Midtown, in Atlanta, GA.
References
Asmarats L, Puri R, Latib A, Navia JL, Rodés-Cabau J. Transcatheter tricuspid valve interventions: Landscape, challenges, and future directions. J Am Coll Cardiol 2018;71:2935-56.
Topilsky Y, Maltais S, Medina Inojosa J, et al. Burden of Tricuspid regurgitation in patients diagnosed in the community setting. JACC Cardiovasc Imaging 2019;12:433-42.
Taramasso M, Benfari G, van der Bijl P, et al. Transcatheter versus medical treatment of patients with symptomatic severe tricuspid regurgitation. J Am Coll Cardiol 2019;74:2998-3008.
Dreyfus J, Flagiello M, Bazire B, et al. Isolated tricuspid valve surgery: Impact of aetiology and clinical presentation on outcomes. Eur Heart J 2020;41:4304-17.
Webb JG, Chuang AM, Meier D, et al. Transcatheter Tricuspid valve replacement with the evoque system: 1-year outcomes of a multicenter, first-in-human experience. JACC Cardiovasc Interv 2022;15:481-91.
Kodali S, Hahn RT, George I, et al. Transfemoral tricuspid valve replacement in patients with tricuspid regurgitation: TRISCEND study 30-Day results. JACC Cardiovasc Interv 2022;15:471-80.
Modine T. Transcatheter tricuspid valve replacement with the LuX-Valve system 1-Year results of a multicenter FIH experience. Presented at TVT 2022, June 8, 2022.
Hahn RT, George I, Kodali SK, et al. Early Single-site experience with transcatheter tricuspid valve replacement. JACC Cardiovasc Imaging 2019;12:416-29.
Fam NP. Cardiovalve TTVR update. Presented at TVT 2022, June 8, 2022.
Bapat VN. The INTREPID Valve for severe tricuspid regurgitation: First-in-man case experience. Presented at TCT 2020.
Lauten A, Figulla HR, Unbehaun A, et al. Interventional treatment of severe tricuspid regurgitation: Early clinical experience in a multicenter, observational, first-in-man study. Circ Cardiovasc Interv 2018;11:e006061.
Dreger H, Mattig I, Hewing B, et al. Treatment of severe tricuspid regurgitation in patients with advanced heart failure with CAval Vein Implantation of the Edwards Sapien XT VALve (TRICAVAL): a randomised controlled trial. EuroIntervention 2020;15:1506-13.
Lauten A, Doenst T, Hamadanchi A, Franz M, Figulla HR. Percutaneous bicaval valve implantation for transcatheter treatment of tricuspid regurgitation: clinical observations and 12-month follow-up. Circ Cardiovasc Interv 2014;7:268-72.
Wild MG, Lubos E, Cruz-Gonzalez I, et al. Early clinical experience with the TRICENTO bicaval valved stent for treatment of symptomatic severe tricuspid regurgitation: A multicenter registry. Circ Cardiovasc Interv 2022;15:e011302.
Lurz P, von Bardeleben R, Weber M, et al. Transcatheter edge-to-edge repair for treatment of tricuspid regurgitation. J Am Coll Cardiol 2021;77:229-39.
Hahn RT. Transcatheter tricuspid valve repair:CLASP TR study one-year results. . Presented at EuroPCR 2022.
Kodali S, Hahn RT, Eleid MF, et al. Feasibility study of the transcatheter valve repair system for severe tricuspid regurgitation. J Am Coll Cardiol 2021;77:345-56.
Zack CJ, Fender EA, Chandrashekar P, et al. National trends and outcomes in isolated tricuspid valve surgery. J Am Coll Cardiol 2017;70:2953-60.
MarkupWrapperClasses: max-w_60
HideCodeBlock: display_none
Weight:100
Styleguide HTML.RealArticle
*/
/*
Links States
This shows the look and feel of all the states of a text link, color, underline and decoration.
Markup:
MarkupWrapperClasses: reading-typography
Weight:100
Styleguide HTML.Typography.Links
*/
.container,
.card {
position: relative;
}
.table td,
.table th {
text-align: left;
}
.table tbody tr:nth-of-type(odd) {
background-color: #13121202;
}
.table tr + tr {
border-top: 1px solid #13121240;
}
.table.unshaded tbody tr:nth-of-type(odd) {
background-color: unset;
}
/*
Bootstrap
Bootstrap 5 is a complete UI framework with many features. Please familiarize yourself with bootstrap framework as you build. It will give you access to grid, forms and other UI items. https://getbootstrap.com/
Weight: -50
Styleguide Bootstrap
*/
/*
Typography
The collection of typography when using the bootstrap foundation of arches.
Markup:
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a lead paragraph. It stands out from regular paragraphs.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
A well-known quote, contained in a blockquote element.
This is a list.
It appears completely unstyled.
Structurally, it's still a list.
However, this style only applies to immediate child elements.
Weight: 100
Styleguide Bootstrap.Typography
*/
/*
Tables
The collection of modifications you can do with tables out of the box from Bootstrap Arches.
Markup:
This is the first
item's accordion
body. It is
hidden by default, until the
collapse plugin adds the
appropriate classes that we
use to style each element.
These classes control the
overall appearance, as well
as the showing and hiding
via CSS transitions. You can
modify any of this with
custom CSS or overriding our
default variables. It's also
worth noting that just about
any HTML can go within the
.accordion-body,
though the transition does
limit overflow.
This is the second
item's accordion
body. It is
hidden by default, until the
collapse plugin adds the
appropriate classes that we
use to style each element.
These classes control the
overall appearance, as well
as the showing and hiding
via CSS transitions. You can
modify any of this with
custom CSS or overriding our
default variables. It's also
worth noting that just about
any HTML can go within the
.accordion-body,
though the transition does
limit overflow.
This is the third
item's accordion
body. It is
hidden by default, until the
collapse plugin adds the
appropriate classes that we
use to style each element.
These classes control the
overall appearance, as well
as the showing and hiding
via CSS transitions. You can
modify any of this with
custom CSS or overriding our
default variables. It's also
worth noting that just about
any HTML can go within the
.accordion-body,
though the transition does
limit overflow.
A simple primary alert
with an example
link. Give it a click if you
like.
A simple secondary alert
with an example
link. Give it a click if you
like.
A simple success alert
with an example
link. Give it a click if you
like.
A simple alert alert with
an example
link. Give it a click if you
like.
A simple warning alert
with an example
link. Give it a click if you
like.
A simple info alert with
an example
link. Give it a click if you
like.
A simple light alert with
an example
link. Give it a click if you
like.
A simple dark alert with
an example
link. Give it a click if you
like.
Well done!
Aww yeah, you successfully read this
important alert message. This
example text is going to run a bit
longer so that you can see how
spacing within an alert works with
this kind of content.
Whenever you need to, be
sure to use margin utilities to keep
things nice and tidy.
Placeholder content for the tab
panel. This one relates to the
home tab. Takes you miles high,
so high, 'cause she’s got that
one international smile. There's
a stranger in my bed, there's a
pounding in my head. Oh, no. In
another life I would make you
stay. ‘Cause I, I’m capable of
anything. Suiting up for my
crowning battle. Used to steal
your parents' liquor and climb
to the roof. Tone, tan fit and
ready, turn it up cause its
gettin' heavy. Her love is like
a drug. I guess that I forgot I
had a choice.
Placeholder content for the tab
panel. This one relates to the
profile tab. You got the finest
architecture. Passport stamps,
she's cosmopolitan. Fine, fresh,
fierce, we got it on lock. Never
planned that one day I'd be
losing you. She eats your heart
out. Your kiss is cosmic, every
move is magic. I mean the ones,
I mean like she's the one.
Greetings loved ones let's take
a journey. Just own the night
like the 4th of July! But you'd
rather get wasted.
Placeholder content for the tab
panel. This one relates to the
contact tab. Her love is like a
drug. All my girls vintage
Chanel baby. Got a motel and
built a fort out of sheets.
'Cause she's the muse and the
artist. (This is how we do) So
you wanna play with magic. So
just be sure before you give it
all to me. I'm walking, I'm
walking on air (tonight). Skip
the talk, heard it all, time to
walk the walk. Catch her if you
can. Stinging like a bee I
earned my stripes.
Placeholder content for the scrollspy
example. You got the finest
architecture. Passport stamps, she's
cosmopolitan. Fine, fresh, fierce,
we got it on lock. Never planned
that one day I'd be losing you. She
eats your heart out. Your kiss is
cosmic, every move is magic. I mean
the ones, I mean like she's the one.
Greetings loved ones let's take a
journey. Just own the night like the
4th of July! But you'd rather get
wasted.
@mdo
Placeholder content for the scrollspy
example. 'Cause she's the muse and
the artist. (This is how we do) So
you wanna play with magic. So just
be sure before you give it all to
me. I'm walking, I'm walking on air
(tonight). Skip the talk, heard it
all, time to walk the walk.
one
Placeholder content for the scrollspy
example. Takes you miles high, so
high, 'cause she’s got that one
international smile. There's a
stranger in my bed, there's a
pounding in my head. Oh, no. In
another life I would make you stay.
‘Cause I, I’m capable of anything.
Suiting up for my crowning battle.
Used to steal your parents' liquor
and climb to the roof. Tone, tan fit
and ready, turn it up cause its
gettin' heavy. Her love is like a
drug. I guess that I forgot I had a
choice.
two
Placeholder content for the scrollspy
example. It's time to bring out the
big balloons. I'm walking, I'm
walking on air (tonight). Yeah, we
maxed our credit cards and got
kicked out of the bar. Yo, shout out
to all you kids, buying bottle
service, with your rent money. I'm
ma get your heart racing in my
skin-tight jeans. If you get the
chance you better keep her. Yo,
shout out to all you kids, buying
bottle service, with your rent
money.
three
Placeholder content for the scrollspy
example. If you wanna dance, if you
want it all, you know that I'm the
girl that you should call. Walk
through the storm I would. So let me
get you in your birthday suit. The
one that got away. Last Friday
night, yeah I think we broke the
law, always say we're gonna stop.
'Cause she's a little bit of Yoko,
And she's a little bit of 'Oh no'. I
want the jaw droppin', eye poppin',
head turnin', body shockin'. Yeah,
we maxed our credit cards and got
kicked out of the bar.
And some more placeholder content,
for good measure.
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
Website
Weight:26
Styleguide Data.Sponsor.WebLink
*/
/*
Website Link
Markup:
More
Weight:26
Styleguide Data.Sponsor.MoreLink
*/
/*
PDF Link
Markup:
PDF
Weight:26
Styleguide Data.Sponsor.PDFLink
*/
/*
Description
Description: Short html description of the sponsor or the product.
Markup:
