\n This is a header\n
\n \n
\nThis is a card.
\n\tIt has an easy to override visual style, and is appropriately subdued.
\n\t I am so clickable\nAll of the Style Names follow this ordered pattern of construction.
\n| class | css property | value |
|---|---|---|
| .font_0 | font-size : | 1rem 16px |
| .font_1 | font-size : | 1.125rem 18px |
| .font_2 | font-size : | 1.265625rem 20.25px |
| .font_3 | font-size : | 1.423828125rem 22.78125px |
| .font_4 | font-size : | 1.6018066406rem 25.62890625px |
| .font_5 | font-size : | 1.8020324707rem 28.8325195313px |
| .font_6 | font-size : | 2.0272865295rem 32.4365844727px |
| .font_7 | font-size : | 2.2806973457rem 36.4911575317px |
| .font_8 | font-size : | 2.565784514rem 41.0525522232px |
| .font_9 | font-size : | 2.8865075782rem 46.1841212511px |
| .font_10 | font-size : | 3.2473210255rem 51.9571364075px |
| .font_n1 | font-size : | 0.8888888889rem 14.2222222222px |
| .font_n2 | font-size : | 0.7901234568rem 12.6419753086px |
| .font_n3 | font-size : | 0.7023319616rem 11.2373113855px |
| .font_n4 | font-size : | 0.624295077rem 9.9887212315px |
| .font_n5 | font-size : | 0.5549289573rem 8.8788633169px |
text that has no indent/p>\n
text that has an indent magnitude of {{modifier_class}}
\nLorem 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.
\nLorem 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.
\n| class | responsive modifiers | css property | value |
|---|---|---|---|
| .p_0 | .p_0:md, .p_0:lg | padding : | 0 |
| .p_1 | .p_1:md, .p_1:lg | padding : | 1px |
| .p_2 | .p_2:md, .p_2:lg | padding : | 0.25rem |
| .p_3 | .p_3:md, .p_3:lg | padding : | 0.5rem |
| .p_4 | .p_4:md, .p_4:lg | padding : | 1rem |
| .p_5 | .p_5:md, .p_5:lg | padding : | 2rem |
| .p_6 | .p_6:md, .p_6:lg | padding : | 4rem |
| 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 |
| class | css property | value |
|---|---|---|
| .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 |
| class | css property | value |
|---|---|---|
| .isolation_isolate | isolation : | isolate |
| .isolation_auto | isolation : | auto |
| .isolation_inherit | isolation : | inherit |
| .isolation_revert | isolation : | revert |
| .isolation_unset | isolation : | unset |
| class | css property | value |
|---|---|---|
| .gap-x_0 | grid-column-gap : | 0 |
| .gap-x_1 | grid-column-gap : | 1px |
| .gap-x_2 | grid-column-gap : | 0.25rem |
| .gap-x_3 | grid-column-gap : | 0.5rem |
| .gap-x_4 | grid-column-gap : | 1rem |
| .gap-x_5 | grid-column-gap : | 2rem |
| .gap-x_6 | grid-column-gap : | 4rem |
| class | css property | value |
|---|---|---|
| .gap-y_0 | grid-row-gap : | 0 |
| .gap-y_1 | grid-row-gap : | 1px |
| .gap-y_2 | grid-row-gap : | 0.25rem |
| .gap-y_3 | grid-row-gap : | 0.5rem |
| .gap-y_4 | grid-row-gap : | 1rem |
| .gap-y_5 | grid-row-gap : | 2rem |
| .gap-y_6 | grid-row-gap : | 4rem |
| class | css property | value |
|---|---|---|
| .columns_1 | grid-template-columns : | [start] var(--col-1, 1fr) [end] |
| .columns_2 | grid-template-columns : | [start] var(--col-1, 1fr) var(--col-2, 1fr) [end] |
| .columns_3 | grid-template-columns : | [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end] |
| .columns_4 | grid-template-columns : | [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) [end] |
| .columns_5 | grid-template-columns : | [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) [end] |
| .columns_6 | grid-template-columns : | [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end] |
| class | css property | value |
|---|---|---|
| .rows_1 | grid-template-rows : | [start] var(--row-1, 1fr) [end] |
| .rows_2 | grid-template-rows : | [start] var(--row-1, 1fr) var(--row-2, 1fr) [end] |
| .rows_3 | grid-template-rows : | [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end] |
| .rows_4 | grid-template-rows : | [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) [end] |
| .rows_5 | grid-template-rows : | [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) [end] |
| .rows_6 | grid-template-rows : | [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end] |
| class | css property | value |
|---|---|---|
| .col-start_start | grid-column-start : | start |
| .col-start_1 | grid-column-start : | 1 |
| .col-start_2 | grid-column-start : | 2 |
| .col-start_3 | grid-column-start : | 3 |
| .col-start_4 | grid-column-start : | 4 |
| .col-start_5 | grid-column-start : | 5 |
| .col-start_6 | grid-column-start : | 6 |
| .col-start_7 | grid-column-start : | 7 |
| .col-start_n1 | grid-column-start : | -1 |
| .col-start_n2 | grid-column-start : | -2 |
| .col-start_n3 | grid-column-start : | -3 |
| .col-start_n4 | grid-column-start : | -4 |
| .col-start_n5 | grid-column-start : | -5 |
| .col-start_n6 | grid-column-start : | -6 |
| .col-start_n7 | grid-column-start : | -7 |
| .col-start_end | grid-column-start : | end |
| class | css property | value |
|---|---|---|
| .col-end_start | grid-column-end : | start |
| .col-end_1 | grid-column-end : | 1 |
| .col-end_2 | grid-column-end : | 2 |
| .col-end_3 | grid-column-end : | 3 |
| .col-end_4 | grid-column-end : | 4 |
| .col-end_5 | grid-column-end : | 5 |
| .col-end_6 | grid-column-end : | 6 |
| .col-end_7 | grid-column-end : | 7 |
| .col-end_n1 | grid-column-end : | -1 |
| .col-end_n2 | grid-column-end : | -2 |
| .col-end_n3 | grid-column-end : | -3 |
| .col-end_n4 | grid-column-end : | -4 |
| .col-end_n5 | grid-column-end : | -5 |
| .col-end_n6 | grid-column-end : | -6 |
| .col-end_n7 | grid-column-end : | -7 |
| .col-end_end | grid-column-end : | end |
| class | css property | value |
|---|---|---|
| .row-start_start | grid-row-start : | start |
| .row-start_1 | grid-row-start : | 1 |
| .row-start_2 | grid-row-start : | 2 |
| .row-start_3 | grid-row-start : | 3 |
| .row-start_4 | grid-row-start : | 4 |
| .row-start_5 | grid-row-start : | 5 |
| .row-start_6 | grid-row-start : | 6 |
| .row-start_7 | grid-row-start : | 7 |
| .row-start_n1 | grid-row-start : | -1 |
| .row-start_n2 | grid-row-start : | -2 |
| .row-start_n3 | grid-row-start : | -3 |
| .row-start_n4 | grid-row-start : | -4 |
| .row-start_n5 | grid-row-start : | -5 |
| .row-start_n6 | grid-row-start : | -6 |
| .row-start_n7 | grid-row-start : | -7 |
| .row-start_end | grid-row-start : | end |
| class | css property | value |
|---|---|---|
| .row-end_start | grid-row-end : | start |
| .row-end_1 | grid-row-end : | 1 |
| .row-end_2 | grid-row-end : | 2 |
| .row-end_3 | grid-row-end : | 3 |
| .row-end_4 | grid-row-end : | 4 |
| .row-end_5 | grid-row-end : | 5 |
| .row-end_6 | grid-row-end : | 6 |
| .row-end_7 | grid-row-end : | 7 |
| .row-end_n1 | grid-row-end : | -1 |
| .row-end_n2 | grid-row-end : | -2 |
| .row-end_n3 | grid-row-end : | -3 |
| .row-end_n4 | grid-row-end : | -4 |
| .row-end_n5 | grid-row-end : | -5 |
| .row-end_n6 | grid-row-end : | -6 |
| .row-end_n7 | grid-row-end : | -7 |
| .row-end_end | grid-row-end : | end |
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.
\n\tAuthor Relationships With Industry and Other Entities (Relevant)—2018 AHA/ACC/AACVPR/AAPA/ABC/ACPM/ADA/AGS/APhA/ASPC/NLA/PCNA Guideline on the Management of Blood Cholesterol (August 2018) e344
\n\tLorem 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.
\n\t| class | css property | value |
|---|---|---|
| .aspect_8x10 | aspect-ratio : | 8 / 10 |
| .aspect_1x1 | aspect-ratio : | 1 / 1 |
| .aspect_4x3 | aspect-ratio : | 4 / 3 |
| .aspect_3x4 | aspect-ratio : | 3 / 4 |
| .aspect_3x2 | aspect-ratio : | 3 / 2 |
| .aspect_2x3 | aspect-ratio : | 2 / 3 |
| .aspect_16x9 | aspect-ratio : | 16 / 9 |
| .aspect_21x9 | aspect-ratio : | 21 / 9 |
| .aspect_2x1 | aspect-ratio : | 2 / 1 |
| .aspect_3x1 | aspect-ratio : | 3 / 1 |
| .aspect_4x1 | aspect-ratio : | 4 / 1 |
| .aspect_5x1 | aspect-ratio : | 5 / 1 |
| .aspect_leaderboard | aspect-ratio : | 728 / 90 |
| .aspect_skyscraper | aspect-ratio : | 160 / 600 |
| .aspect_bigbox | aspect-ratio : | 300 / 250 |
| .aspect_billboard | aspect-ratio : | 970 / 250 |
| Classes | Effect |
|---|---|
| .h_auto | height: auto |
| .h_0 | height: 0vh |
| .h_10 | height: 10vh |
| .h_20 | height: 20vh |
| .h_30 | height: 30vh |
| .h_40 | height: 40vh |
| .h_50 | height: 50vh |
| .h_60 | height: 60vh |
| .h_70 | height: 70vh |
| .h_80 | height: 80vh |
| .h_90 | height: 90vh |
| .h_100 | height: 100vh |
| .h_unset | height: unset |
| Classes | \n\t\t\tEffect | \n\t\t
|---|---|
| .h_0lh | \n\t\t\theight: 1em | \n\t\t
| .h_1lh | \n\t\t\theight: 1.25em | \n\t\t
| .h_2lh | \n\t\t\theight: 1.45em | \n\t\t
| .h_3lh | \n\t\t\theight: 1.65em | \n\t\t
| .h_4lh | \nheight: 1.75em | \n
| .h_5lh | \nheight: 2em | \n
| Classes | Effect |
|---|---|
| .min-h_auto | min-height: auto |
| .min-h_0 | min-height: 0vh |
| .min-h_10 | min-height: 10vh |
| .min-h_20 | min-height: 20vh |
| .min-h_30 | min-height: 30vh |
| .min-h_40 | min-height: 40vh |
| .min-h_50 | min-height: 50vh |
| .min-h_60 | min-height: 60vh |
| .min-h_70 | min-height: 70vh |
| .min-h_80 | min-height: 80vh |
| .min-h_90 | min-height: 90vh |
| .min-h_100 | min-height: 100vh |
| .min-h_unset | min-height: unset |
Utility class that applies box-decoration-break: clone; to ensure that box decorations such as borders, padding, and background are duplicated for each fragment when inline elements wrap across lines. This is useful when styling multi-line inline elements like tags or badges where consistent decoration is needed across line breaks.
| 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 |
| 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 |
| class | css property | value |
|---|---|---|
| .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 |
\n Lorem ipsum dolor sit amet, \n consectetur\n adipisicing elit. \n Tenetur, similique. \n Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi \n harum magni\n adipisicing elit aut nulla et.\n
\n\n Weight: 20\n\n Styleguide Interaction.States.Hover.underlines\n\n */\n/* Transparent Loop */\n.h\\:bg_white:hover,\n.active > .a\\:bg_white,\n.active.a\\:bg_white {\n background-color: #ffffff;\n}\n\n.h\\:bg_white-0:hover {\n background-color: rgba(255, 255, 255, 0) !important;\n}\n\n.h\\:bg_white-_01:hover {\n background-color: rgba(255, 255, 255, 0.005) !important;\n}\n\n.h\\:bg_white-_05:hover {\n background-color: rgba(255, 255, 255, 0.0075) !important;\n}\n\n.h\\:bg_white-1:hover {\n background-color: rgba(255, 255, 255, 0.025) !important;\n}\n\n.h\\:bg_white-2:hover {\n background-color: rgba(255, 255, 255, 0.1) !important;\n}\n\n.h\\:bg_white-3:hover {\n background-color: rgba(255, 255, 255, 0.25) !important;\n}\n\n.h\\:bg_white-4:hover {\n background-color: rgba(255, 255, 255, 0.38) !important;\n}\n\n.h\\:bg_white-5:hover {\n background-color: rgba(255, 255, 255, 0.5) !important;\n}\n\n.h\\:bg_white-6:hover {\n background-color: rgba(255, 255, 255, 0.62) !important;\n}\n\n.h\\:bg_white-7:hover {\n background-color: rgba(255, 255, 255, 0.75) !important;\n}\n\n.h\\:bg_white-8:hover {\n background-color: rgba(255, 255, 255, 0.9) !important;\n}\n\n.h\\:bg_white-9:hover {\n background-color: rgba(255, 255, 255, 0.975) !important;\n}\n\n.h\\:bg_white-none:hover {\n background-color: white !important;\n}\n\n.h\\:bg_black:hover,\n.active > .a\\:bg_black,\n.active.a\\:bg_black {\n background-color: #131212;\n}\n\n.h\\:bg_black-0:hover {\n background-color: rgba(19, 18, 18, 0) !important;\n}\n\n.h\\:bg_black-_01:hover {\n background-color: rgba(19, 18, 18, 0.005) !important;\n}\n\n.h\\:bg_black-_05:hover {\n background-color: rgba(19, 18, 18, 0.0075) !important;\n}\n\n.h\\:bg_black-1:hover {\n background-color: rgba(19, 18, 18, 0.025) !important;\n}\n\n.h\\:bg_black-2:hover {\n background-color: rgba(19, 18, 18, 0.1) !important;\n}\n\n.h\\:bg_black-3:hover {\n background-color: rgba(19, 18, 18, 0.25) !important;\n}\n\n.h\\:bg_black-4:hover {\n background-color: rgba(19, 18, 18, 0.38) !important;\n}\n\n.h\\:bg_black-5:hover {\n background-color: rgba(19, 18, 18, 0.5) !important;\n}\n\n.h\\:bg_black-6:hover {\n background-color: rgba(19, 18, 18, 0.62) !important;\n}\n\n.h\\:bg_black-7:hover {\n background-color: rgba(19, 18, 18, 0.75) !important;\n}\n\n.h\\:bg_black-8:hover {\n background-color: rgba(19, 18, 18, 0.9) !important;\n}\n\n.h\\:bg_black-9:hover {\n background-color: rgba(19, 18, 18, 0.975) !important;\n}\n\n.h\\:bg_black-none:hover {\n background-color: #131212 !important;\n}\n\n/*\nHover: Background Black and White Opacity \n\nblack and white overlays can be added to hovers easily by adding `h:` in front of black or white with the level of opacity needed.\n\nbg_white - text color modified light to dark\nbg_black - text color modified light to dark\n\nMarkup:\nIt has an easy to override visual style, and is appropriately subdued.
\n\t I am so clickable\nIt has an easy to override visual style, and is appropriately subdued.
\nLorem 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!
\nLorem 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!
\nLorem 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!
\n| Style | \nShort Name | \nCSS Property | \n
|---|---|---|
| display | \n'block,flex...' | \n'display' | \n
| position | \n'absolute,relative...' | \n'position' | \n
| grid | \n'.columns','.rows' | \n'grid-column-template' ,'grid-row-template' | \n
| flex-size | \n'.flex' | \n'flex' | \n
| flex-direction | \n'.flex' | \n'flex-direction' | \n
| gap | \n'.gap' | \n'gap' | \n
| justify | \n'.justify' | \n'justify-content' ,'justify-items','justify-self' | \n
| align | \n'.content','.items','.self' | \n'align-content' ,'align-items','align-self' | \n
| margin | \n'.m' | \n'margin' | \n
| padding | \n'.p' | \n'padding' | \n
| font-size | \n'.font' | \n'font-size' | \n
| border-style | \n'.br' | \n'border-style' | \n
All of the Style Names follow this ordered pattern of construction.
\ntext that has no indent/p>\n
text that has an indent magnitude of {{modifier_class}}
\nLorem 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.
\nLorem 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.
\nLorem 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.
\n\tAuthor Relationships With Industry and Other Entities (Relevant)—2018 AHA/ACC/AACVPR/AAPA/ABC/ACPM/ADA/AGS/APhA/ASPC/NLA/PCNA Guideline on the Management of Blood Cholesterol (August 2018) e344
\n\tLorem 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.
\n\t| Classes | Effect |
|---|---|
| .h_auto | height: auto |
| .h_0 | height: 0vh |
| .h_10 | height: 10vh |
| .h_20 | height: 20vh |
| .h_30 | height: 30vh |
| .h_40 | height: 40vh |
| .h_50 | height: 50vh |
| .h_60 | height: 60vh |
| .h_70 | height: 70vh |
| .h_80 | height: 80vh |
| .h_90 | height: 90vh |
| .h_100 | height: 100vh |
| .h_unset | height: unset |
| Classes | \n\t\t\tEffect | \n\t\t
|---|---|
| .h_0lh | \n\t\t\theight: 1em | \n\t\t
| .h_1lh | \n\t\t\theight: 1.25em | \n\t\t
| .h_2lh | \n\t\t\theight: 1.45em | \n\t\t
| .h_3lh | \n\t\t\theight: 1.65em | \n\t\t
| .h_4lh | \nheight: 1.75em | \n
| .h_5lh | \nheight: 2em | \n
| Classes | Effect |
|---|---|
| .min-h_auto | min-height: auto |
| .min-h_0 | min-height: 0vh |
| .min-h_10 | min-height: 10vh |
| .min-h_20 | min-height: 20vh |
| .min-h_30 | min-height: 30vh |
| .min-h_40 | min-height: 40vh |
| .min-h_50 | min-height: 50vh |
| .min-h_60 | min-height: 60vh |
| .min-h_70 | min-height: 70vh |
| .min-h_80 | min-height: 80vh |
| .min-h_90 | min-height: 90vh |
| .min-h_100 | min-height: 100vh |
| .min-h_unset | min-height: unset |
Utility class that applies box-decoration-break: clone; to ensure that box decorations such as borders, padding, and background are duplicated for each fragment when inline elements wrap across lines. This is useful when styling multi-line inline elements like tags or badges where consistent decoration is needed across line breaks.
| 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 |
| 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 |
\n Lorem ipsum dolor sit amet, \n consectetur\n adipisicing elit. \n Tenetur, similique. \n Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi \n harum magni\n adipisicing elit aut nulla et.\n
\n\n Weight: 20\n\n Styleguide Interaction.States.Hover.underlines\n \n */\n\n/* Transparent Loop */\n#{ class-name-constructor(background-color, white, \"\", \"hover\")},\n#{ class-name-constructor(background-color, white, \"\", \"is-active\")},\n#{ class-name-constructor(background-color, white, \"\", \"is-active-self\")} {\n\tbackground-color: $white;\n}\n@include loop-transparent(background-transparent, white, '', '!important', true);\n\n#{ class-name-constructor(background-color, black, \"\", \"hover\")},\n#{ class-name-constructor(background-color, black, \"\", \"is-active\")},\n#{ class-name-constructor(background-color, black, \"\", \"is-active-self\")} {\n\tbackground-color: $black;\n}\n@include loop-transparent(background-transparent, black, '', '!important', true);\n\n/*\nHover: Background Black and White Opacity \n\nblack and white overlays can be added to hovers easily by adding `h:` in front of black or white with the level of opacity needed.\n\nbg_white - text color modified light to dark\nbg_black - text color modified light to dark\n\nMarkup:\nIt has an easy to override visual style, and is appropriately subdued.
\n\t I am so clickable\nIt has an easy to override visual style, and is appropriately subdued.
\nLorem 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!
\nLorem 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!
\nLorem 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!
\n| Style | \nShort Name | \nCSS Property | \n
|---|---|---|
| display | \n'block,flex...' | \n'display' | \n
| position | \n'absolute,relative...' | \n'position' | \n
| grid | \n'.columns','.rows' | \n'grid-column-template' ,'grid-row-template' | \n
| flex-size | \n'.flex' | \n'flex' | \n
| flex-direction | \n'.flex' | \n'flex-direction' | \n
| gap | \n'.gap' | \n'gap' | \n
| justify | \n'.justify' | \n'justify-content' ,'justify-items','justify-self' | \n
| align | \n'.content','.items','.self' | \n'align-content' ,'align-items','align-self' | \n
| margin | \n'.m' | \n'margin' | \n
| padding | \n'.p' | \n'padding' | \n
| font-size | \n'.font' | \n'font-size' | \n
| border-style | \n'.br' | \n'border-style' | \n