This page serves as a list of all CSS utility classes available in Minerva
/* ================================================================= /* SECTION Utilities * NOTE: These classes are for end-users only ================================================================= */ /* ============================== /* SECTION Color ============================== */ .ua-util_color--default { color: var(--ua_color-text--default, #35363b) !important; } .ua-util_color--subtle { color: var(--ua_color-text--subtle, #757c88) !important; } .ua-util_color--accent { color: var(--ua_color-text--accent, #9e1b32) !important; } .ua-util_color--link { color: var(--ua_color-text--link, #9e1b32) !important; } .ua-util_color--link-hover { color: var(--ua_color-text--link-hover, #821E2E) !important; } .ua-util_color--positive { color: var(--ua_color-text--positive, #194B1F) !important; } .ua-util_color--negative { color: var(--ua_color-text--negative, #723900) !important; } .ua-util_color--info { color: var(--ua_color-text--info, #012A4C) !important; } .ua-util_background--surface { background: var(--ua_color-background--surface, white) !important; } .ua-util_background--element { background: var(--ua_color-background--element, #f2f3f4) !important; } .ua-util_background--chip { background: var(--ua_color-background--chip, #dfe2e5) !important; } .ua-util_background--info { background: var(--ua_color-background--info, #E8F2FC) !important; } .ua-util_background--negative { background: var(--ua_color-background--negative, #FAF4E6) !important; } .ua-util_background--positive { background: var(--ua_color-background--positive, #f0f5ef) !important; } /* !SECTION Color */ /* ============================== /* SECTION Margin ============================== */ .ua-util_m--none { margin: 0 !important; } .ua-util_mx--none { margin-inline: 0 !important; } .ua-util_my--none { margin-block: 0 !important; } .ua-util_mt--none { margin-block-start: 0 !important; } .ua-util_mr--none { margin-inline-end: 0 !important; } .ua-util_mb--none { margin-block-end: 0 !important; } .ua-util_ml--none { margin-inline-start: 0 !important; } .ua-util_m--05 { margin: var(--ua_space--05, 0.25rem) !important; } .ua-util_mx--05 { margin-inline: var(--ua_space--05, 0.25rem) !important; } .ua-util_my--05 { margin-block: var(--ua_space--05, 0.25rem) !important; } .ua-util_mt--05 { margin-block-start: var(--ua_space--05, 0.25rem) !important; } .ua-util_mr--05 { margin-inline-end: var(--ua_space--05, 0.25rem) !important; } .ua-util_mb--05 { margin-block-end: var(--ua_space--05, 0.25rem) !important; } .ua-util_ml--05 { margin-inline-start: var(--ua_space--05, 0.25rem) !important; } .ua-util_m--1 { margin: var(--ua_space--1, 0.5rem) !important; } .ua-util_mx--1 { margin-inline: var(--ua_space--1, 0.5rem) !important; } .ua-util_my--1 { margin-block: var(--ua_space--1, 0.5rem) !important; } .ua-util_mt--1 { margin-block-start: var(--ua_space--1, 0.5rem) !important; } .ua-util_mr--1 { margin-inline-end: var(--ua_space--1, 0.5rem) !important; } .ua-util_mb--1 { margin-block-end: var(--ua_space--1, 0.5rem) !important; } .ua-util_ml--1 { margin-inline-start: var(--ua_space--1, 0.5rem) !important; } .ua-util_m--2 { margin: var(--ua_space--2, 1rem) !important; } .ua-util_mx--2 { margin-inline: var(--ua_space--2, 1rem) !important; } .ua-util_my--2 { margin-block: var(--ua_space--2, 1rem) !important; } .ua-util_mt--2 { margin-block-start: var(--ua_space--2, 1rem) !important; } .ua-util_mr--2 { margin-inline-end: var(--ua_space--2, 1rem) !important; } .ua-util_mb--2 { margin-block-end: var(--ua_space--2, 1rem) !important; } .ua-util_ml--2 { margin-inline-start: var(--ua_space--2, 1rem) !important; } .ua-util_m--4 { margin: var(--ua_space--4, 2rem) !important; } .ua-util_mx--4 { margin-inline: var(--ua_space--4, 2rem) !important; } .ua-util_my--4 { margin-block: var(--ua_space--4, 2rem) !important; } .ua-util_mt--4 { margin-block-start: var(--ua_space--4, 2rem) !important; } .ua-util_mr--4 { margin-inline-end: var(--ua_space--4, 2rem) !important; } .ua-util_mb--4 { margin-block-end: var(--ua_space--4, 2rem) !important; } .ua-util_ml--4 { margin-inline-start: var(--ua_space--4, 2rem) !important; } .ua-util_m--8 { margin: var(--ua_space--8, 4rem) !important; } .ua-util_mx--8 { margin-inline: var(--ua_space--8, 4rem) !important; } .ua-util_my--8 { margin-block: var(--ua_space--8, 4rem) !important; } .ua-util_mt--8 { margin-block-start: var(--ua_space--8, 4rem) !important; } .ua-util_mr--8 { margin-inline-end: var(--ua_space--8, 4rem) !important; } .ua-util_mb--8 { margin-block-end: var(--ua_space--8, 4rem) !important; } .ua-util_ml--8 { margin-inline-start: var(--ua_space--8, 4rem) !important; } .ua-util_m--16 { margin: var(--ua_space--16, 8rem) !important; } .ua-util_mx--16 { margin-inline: var(--ua_space--16, 8rem) !important; } .ua-util_my--16 { margin-block: var(--ua_space--16, 8rem) !important; } .ua-util_mt--16 { margin-block-start: var(--ua_space--16, 8rem) !important; } .ua-util_mr--16 { margin-inline-end: var(--ua_space--16, 8rem) !important; } .ua-util_mb--16 { margin-block-end: var(--ua_space--16, 8rem) !important; } .ua-util_ml--16 { margin-inline-start: var(--ua_space--16, 8rem) !important; } .ua_util_mx--auto { margin-inline: auto !important; } .ua-util_m--flow { margin: var(--ua_space--flow, 2rem) !important; } .ua-util_mx--flow { margin-inline: var(--ua_space--flow, 2rem) !important; } .ua-util_my--flow { margin-block: var(--ua_space--flow, 2rem) !important; } .ua-util_mt--flow { margin-block-start: var(--ua_space--flow, 2rem) !important; } .ua-util_mr--flow { margin-inline-end: var(--ua_space--flow, 2rem) !important; } .ua-util_mb--flow { margin-block-end: var(--ua_space--flow, 2rem) !important; } .ua-util_ml--flow { margin-inline-start: var(--ua_space--flow, 2rem) !important; } .ua-util_m--section { margin: var(--ua_space--section, 4rem) !important; } .ua-util_mx--section { margin-inline: var(--ua_space--section, 4rem) !important; } .ua-util_my--section { margin-block: var(--ua_space--section, 4rem) !important; } .ua-util_mt--section { margin-block-start: var(--ua_space--section, 4rem) !important; } .ua-util_mr--section { margin-inline-end: var(--ua_space--section, 4rem) !important; } .ua-util_mb--section { margin-block-end: var(--ua_space--section, 4rem) !important; } .ua-util_ml--section { margin-inline-start: var(--ua_space--section, 4rem) !important; } .ua-util_m--gutter { margin: var(--ua_space--gutter, 1rem) !important; } .ua-util_mx--gutter { margin-inline: var(--ua_space--gutter, 1rem) !important; } .ua-util_my--gutter { margin-block: var(--ua_space--gutter, 1rem) !important; } .ua-util_mt--gutter { margin-block-start: var(--ua_space--gutter, 1rem) !important; } .ua-util_mr--gutter { margin-inline-end: var(--ua_space--gutter, 1rem) !important; } .ua-util_mb--gutter { margin-block-end: var(--ua_space--gutter, 1rem) !important; } .ua-util_ml--gutter { margin-inline-start: var(--ua_space--gutter, 1rem) !important; } .ua-util_m--grid-gap { margin: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_mx--grid-gap { margin-inline: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_my--grid-gap { margin-block: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_mt--grid-gap { margin-block-start: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_mr--grid-gap { margin-inline-end: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_mb--grid-gap { margin-block-end: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_ml--grid-gap { margin-inline-start: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_m--flex-gap { margin: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_mx--flex-gap { margin-inline: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_my--flex-gap { margin-block: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_mt--flex-gap { margin-block-start: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_mr--flex-gap { margin-inline-end: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_mb--flex-gap { margin-block-end: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_ml--flex-gap { margin-inline-start: var(--ua_space--flex-gap, 1rem) !important; } /* !SECTION Margin */ /* ============================== /* SECTION Padding ============================== */ .ua-util_p--none { padding: 0 !important; } .ua-util_px--none { padding-inline: 0 !important; } .ua-util_py--none { padding-block: 0 !important; } .ua-util_pt--none { padding-block-start: 0 !important; } .ua-util_pr--none { padding-inline-end: 0 !important; } .ua-util_pb--none { padding-block-end: 0 !important; } .ua-util_pl--none { padding-inline-start: 0 !important; } .ua-util_p--05 { padding: var(--ua_space--05, 0.25rem) !important; } .ua-util_px--05 { padding-inline: var(--ua_space--05, 0.25rem) !important; } .ua-util_py--05 { padding-block: var(--ua_space--05, 0.25rem) !important; } .ua-util_pt--05 { padding-block-start: var(--ua_space--05, 0.25rem) !important; } .ua-util_pr--05 { padding-inline-end: var(--ua_space--05, 0.25rem) !important; } .ua-util_pb--05 { padding-block-end: var(--ua_space--05, 0.25rem) !important; } .ua-util_pl--05 { padding-inline-start: var(--ua_space--05, 0.25rem) !important; } .ua-util_p--1 { padding: var(--ua_space--1, 0.5rem) !important; } .ua-util_px--1 { padding-inline: var(--ua_space--1, 0.5rem) !important; } .ua-util_py--1 { padding-block: var(--ua_space--1, 0.5rem) !important; } .ua-util_pt--1 { padding-block-start: var(--ua_space--1, 0.5rem) !important; } .ua-util_pr--1 { padding-inline-end: var(--ua_space--1, 0.5rem) !important; } .ua-util_pb--1 { padding-block-end: var(--ua_space--1, 0.5rem) !important; } .ua-util_pl--1 { padding-inline-start: var(--ua_space--1, 0.5rem) !important; } .ua-util_p--2 { padding: var(--ua_space--2, 1rem) !important; } .ua-util_px--2 { padding-inline: var(--ua_space--2, 1rem) !important; } .ua-util_py--2 { padding-block: var(--ua_space--2, 1rem) !important; } .ua-util_pt--2 { padding-block-start: var(--ua_space--2, 1rem) !important; } .ua-util_pr--2 { padding-inline-end: var(--ua_space--2, 1rem) !important; } .ua-util_pb--2 { padding-block-end: var(--ua_space--2, 1rem) !important; } .ua-util_pl--2 { padding-inline-start: var(--ua_space--2, 1rem) !important; } .ua-util_p--4 { padding: var(--ua_space--4, 2rem) !important; } .ua-util_px--4 { padding-inline: var(--ua_space--4, 2rem) !important; } .ua-util_py--4 { padding-block: var(--ua_space--4, 2rem) !important; } .ua-util_pt--4 { padding-block-start: var(--ua_space--4, 2rem) !important; } .ua-util_pr--4 { padding-inline-end: var(--ua_space--4, 2rem) !important; } .ua-util_pb--4 { padding-block-end: var(--ua_space--4, 2rem) !important; } .ua-util_pl--4 { padding-inline-start: var(--ua_space--4, 2rem) !important; } .ua-util_p--8 { padding: var(--ua_space--8, 4rem) !important; } .ua-util_px--8 { padding-inline: var(--ua_space--8, 4rem) !important; } .ua-util_py--8 { padding-block: var(--ua_space--8, 4rem) !important; } .ua-util_pt--8 { padding-block-start: var(--ua_space--8, 4rem) !important; } .ua-util_pr--8 { padding-inline-end: var(--ua_space--8, 4rem) !important; } .ua-util_pb--8 { padding-block-end: var(--ua_space--8, 4rem) !important; } .ua-util_pl--8 { padding-inline-start: var(--ua_space--8, 4rem) !important; } .ua-util_p--16 { padding: var(--ua_space--16, 8rem) !important; } .ua-util_px--16 { padding-inline: var(--ua_space--16, 8rem) !important; } .ua-util_py--16 { padding-block: var(--ua_space--16, 8rem) !important; } .ua-util_pt--16 { padding-block-start: var(--ua_space--16, 8rem) !important; } .ua-util_pr--16 { padding-inline-end: var(--ua_space--16, 8rem) !important; } .ua-util_pb--16 { padding-block-end: var(--ua_space--16, 8rem) !important; } .ua-util_pl--16 { padding-inline-start: var(--ua_space--16, 8rem) !important; } .ua-util_p--flow { padding: var(--ua_space--flow, 2rem) !important; } .ua-util_px--flow { padding-inline: var(--ua_space--flow, 2rem) !important; } .ua-util_py--flow { padding-block: var(--ua_space--flow, 2rem) !important; } .ua-util_pt--flow { padding-block-start: var(--ua_space--flow, 2rem) !important; } .ua-util_pr--flow { padding-inline-end: var(--ua_space--flow, 2rem) !important; } .ua-util_pb--flow { padding-block-end: var(--ua_space--flow, 2rem) !important; } .ua-util_pl--flow { padding-inline-start: var(--ua_space--flow, 2rem) !important; } .ua-util_p--section { padding: var(--ua_space--section, 4rem) !important; } .ua-util_px--section { padding-inline: var(--ua_space--section, 4rem) !important; } .ua-util_py--section { padding-block: var(--ua_space--section, 4rem) !important; } .ua-util_pt--section { padding-block-start: var(--ua_space--section, 4rem) !important; } .ua-util_pr--section { padding-inline-end: var(--ua_space--section, 4rem) !important; } .ua-util_pb--section { padding-block-end: var(--ua_space--section, 4rem) !important; } .ua-util_pl--section { padding-inline-start: var(--ua_space--section, 4rem) !important; } .ua-util_p--gutter { padding: var(--ua_space--gutter, 1rem) !important; } .ua-util_px--gutter { padding-inline: var(--ua_space--gutter, 1rem) !important; } .ua-util_py--gutter { padding-block: var(--ua_space--gutter, 1rem) !important; } .ua-util_pt--gutter { padding-block-start: var(--ua_space--gutter, 1rem) !important; } .ua-util_pr--gutter { padding-inline-end: var(--ua_space--gutter, 1rem) !important; } .ua-util_pb--gutter { padding-block-end: var(--ua_space--gutter, 1rem) !important; } .ua-util_pl--gutter { padding-inline-start: var(--ua_space--gutter, 1rem) !important; } .ua-util_p--grid-gap { padding: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_px--grid-gap { padding-inline: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_py--grid-gap { padding-block: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_pt--grid-gap { padding-block-start: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_pr--grid-gap { padding-inline-end: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_pb--grid-gap { padding-block-end: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_pl--grid-gap { padding-inline-start: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_p--flex-gap { padding: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_px--flex-gap { padding-inline: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_py--flex-gap { padding-block: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_pt--flex-gap { padding-block-start: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_pr--flex-gap { padding-inline-end: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_pb--flex-gap { padding-block-end: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_pl--flex-gap { padding-inline-start: var(--ua_space--flex-gap, 1rem) !important; } /* !SECTION Padding */ /* ============================== /* SECTION Gap ============================== */ .ua-util_gap--none { margin: 0 !important; } .ua-util_gap--05 { gap: var(--ua_space--05, 0.25rem) !important; } .ua-util_gap-x--05 { column-gap: var(--ua_space--05, 0.25rem) !important; } .ua-util_gap-y--05 { row-gap: var(--ua_space--05, 0.25rem) !important; } .ua-util_gap--1 { gap: var(--ua_space--1, 0.5rem) !important; } .ua-util_gap-x--1 { column-gap: var(--ua_space--1, 0.5rem) !important; } .ua-util_gap-y--1 { row-gap: var(--ua_space--1, 0.5rem) !important; } .ua-util_gap--2 { gap: var(--ua_space--2, 1rem) !important; } .ua-util_gap-x--2 { column-gap: var(--ua_space--2, 1rem) !important; } .ua-util_gap-y--2 { row-gap: var(--ua_space--2, 1rem) !important; } .ua-util_gap--4 { gap: var(--ua_space--4, 2rem) !important; } .ua-util_gap-x--4 { column-gap: var(--ua_space--4, 2rem) !important; } .ua-util_gap-y--4 { row-gap: var(--ua_space--4, 2rem) !important; } .ua-util_gap--8 { gap: var(--ua_space--8, 4rem) !important; } .ua-util_gap-x--8 { column-gap: var(--ua_space--8, 4rem) !important; } .ua-util_gap-y--8 { row-gap: var(--ua_space--8, 4rem) !important; } .ua-util_gap--16 { gap: var(--ua_space--16, 8rem) !important; } .ua-util_gap-x--16 { column-gap: var(--ua_space--16, 8rem) !important; } .ua-util_gap-y--16 { row-gap: var(--ua_space--16, 8rem) !important; } .ua-util_gap--flow { gap: var(--ua_space--flow, 2rem) !important; } .ua-util_gap-x--flow { column-gap: var(--ua_space--flow, 2rem) !important; } .ua-util_gap-y--flow { row-gap: var(--ua_space--flow, 2rem) !important; } .ua-util_gap--section { gap: var(--ua_space--section, 4rem) !important; } .ua-util_gap-x--section { column-gap: var(--ua_space--section, 4rem) !important; } .ua-util_gap-y--section { row-gap: var(--ua_space--section, 4rem) !important; } .ua-util_gap--gutter { gap: var(--ua_space--gutter, 1rem) !important; } .ua-util_gap-x--gutter { column-gap: var(--ua_space--gutter, 1rem) !important; } .ua-util_gap-y--gutter { row-gap: var(--ua_space--gutter, 1rem) !important; } .ua-util_gap--grid-gap { gap: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_gap-x--grid-gap { column-gap: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_gap-y--grid-gap { row-gap: var(--ua_space--grid-gap, 2rem) !important; } .ua-util_gap--flex-gap { gap: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_gap-x--flex-gap { column-gap: var(--ua_space--flex-gap, 1rem) !important; } .ua-util_gap-y--flex-gap { row-gap: var(--ua_space--flex-gap, 1rem) !important; } /* !SECTION Gap */ /* ============================== /* SECTION Justify ============================== */ .ua-util_justify--start, .ua-util_justify--end, .ua-util_justify--center { display: flex !important; } .ua-util_justify--start { justify-content: start !important; } .ua-util_justify--end { justify-content: end !important; } .ua-util_justify--center { justify-content: center !important; } /* !SECTION Justify */ /* ============================== /* SECTION Align ============================== */ .ua-util_align--left { text-align: left !important; } .ua-util_align--center { text-align: center !important; } .ua-util_align--right { text-align: right !important; } /* !SECTION Align */ /* ============================== /* SECTION Text ============================== */ .ua-util_text--xsmall { font-size: var(--ua_font-size--xsmall, 0.75rem) !important; line-height: var(--ua_line-height--xsmall, 1rem) !important; } .ua-util_text--small { font-size: var(--ua_font-size--small, 1rem) !important; line-height: var(--ua_line-height--small, 1.5rem) !important; } .ua-util_text--normal { font-size: var(--ua_font-size--normal, 1.25rem) !important; line-height: var(--ua_line-height--normal, 2rem) !important; } .ua-util_text--medium { font-size: var(--ua_font-size--medium, 1.5rem) !important; line-height: var(--ua_line-height--medium, 2rem) !important; } .ua-util_text--large { font-size: var(--ua_font-size--large, 1.75rem) !important; line-height: var(--ua_line-height--large, 2.25rem) !important; } .ua-util_text--xlarge { font-size: var(--ua_font-size--xlarge, 2rem) !important; line-height: var(--ua_line-height--xlarge, 2.5rem) !important; } .ua-util_text--xxlarge { font-size: var(--ua_font-size--xxlarge, 2.25rem) !important; line-height: var(--ua_line-height--xxlarge, 2.5rem) !important; } .ua-util_text--ui { font-size: var(--ua_font-size--normal, 1.25rem) !important; line-height: var(--ua_line-height--small, 1.5rem) !important; } /* !SECTION Text */ /* ============================== /* SECTION Fonts ============================== */ .ua-util_font--heading { font-family: var(--ua_font--heading, proxima-nova, sans-serif) !important; } .ua-util_font--body { font-family: var(--ua_font--body, proxima-nova, sans-serif) !important; } .ua-util_font--accent { font-family: var(--ua_font--accent, proxima-nova-condensed, sans-serif) !important; } .ua-util_font--mono { font-family: var(--ua_font--mono, monospace) !important; } /* !SECTION Fonts */ /* !SECTION Utilities */