Single property utilities map directly to a single CSS property and value. They are most useful when you want to override a default value or in one-off situations. Be aware that all of these utilities include an "!important" flag in order to supercede an element's default styles.
These utilities control CSS properties related to display and visibility.
| Class | Description |
|---|---|
| .sprk-u-Display--none | Turns off the display of an element so that it has no effect on layout. |
| .sprk-u-Display--block | The element generates a block element box. |
| .sprk-u-Display--inline | The element generates one or more inline element boxes. |
| .sprk-u-Display--inline-block | The element generates a block element box that will be flowed with surrounding content as if it were a single inline box. |
| .sprk-u-Visibility--hidden | The element box is invisible, but still affects layout as normal. A screen reader will still read this text. |
| .sprk-u-Visibility--visible | The element is visible. |
These utilities control CSS properties related to floating, positioning, and alignment.
| Class | Description |
|---|---|
| .sprk-u-Float--none | Resets the float property of an element back to none. |
| .sprk-u-Float--left | Floats an element to the left. |
| .sprk-u-Float--right | Floats an element to the right. |
| .sprk-u-Position--relative | The element is positioned according to the normal flow of the document, and then offset relative to itself. |
| .sprk-u-Position--absolute | The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor. |
| .sprk-u-Position--fixed | The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport. |
| .sprk-u-Position--static | The element is positioned according to the normal flow of the document. |
| .sprk-u-Top--zero | Resets an element's top offset back to zero. |
| .sprk-u-Bottom--zero | Resets an element's bottom offset back to zero. |
| .sprk-u-Left--zero | Resets an element's left offset back to zero. |
| .sprk-u-Right--zero | Resets an element's right offset back to zero. |
| .sprk-u-TextAlign--left | Aligns text to the left of the container. |
| .sprk-u-TextAlign--right | Aligns text to the right of the container. |
| .sprk-u-TextAlign--center | Aligns text in the horizontal center of the container. |
| .sprk-u-VerticalAlign--top | Aligns the contents of a box to the top if it's display property is inline or table-cell. |
| .sprk-u-VerticalAlign--middle | Aligns the contents of a box to the vertical middle if it's display property is inline or table-cell. |
| .sprk-u-VerticalAlign--bottom | Aligns the contents of a box to the bottom if it's display property is inline or table-cell. |
| .sprk-u-VerticalAlign--baseline | Aligns the contents of a box to the baseline if it's display property is inline or table-cell. |
These utilities control CSS properties related to typography.
| Class | Description |
|---|---|
| .sprk-u-FontWeight--bold | Sets the font weight to bold. |
| .sprk-u-FontWeight--normal | Sets the font weight to normal. |
| .sprk-u-FontStyle--italic | Sets the font style to italic. |
| .sprk-u-FontStyle--normal | Sets the font style to normal. |
| .sprk-u-TextDecoration--underline | Sets the text decoration to underline. |
| .sprk-u-TextDecoration--none | Sets the text decoration to none. |
| .sprk-u-TextTransform--uppercase | Transforms text to uppercase. |
| .sprk-u-TextTransform--none | Removes text transformation for text. |
| .sprk-u-WordWrap--break-word | Sets word-wrap to break-word. |
These utilities control CSS properties related to overflow, which specifies how to handle content that is too large for its container.
| Class | Description |
|---|---|
| .sprk-u-Overflow--visible | Content is not clipped and may be rendered outside the padding box. |
| .sprk-u-Overflow--hidden | Content is clipped if necessary to fit the padding box. No scrollbars are provided. |
| .sprk-u-Overflow--scroll | Content is clipped if necessary to fit the padding box. Browsers display scrollbars whether or not any content is actually clipped. |
| .sprk-u-Overflow--auto | If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. |
These utilities set the width of an element to a percentage value. The widths are in increments of 5 from 5% to 100%.
| Class | Description |
|---|---|
| .sprk-u-Width-5 | Changes the width of the element to 5 percent. |
| .sprk-u-Width-10 | Changes the width of the element to 10 percent. |
| .sprk-u-Width-15 | Changes the width of the element to 15 percent. |
| .sprk-u-Width-20 | Changes the width of the element to 20 percent. |
| .sprk-u-Width-25 | Changes the width of the element to 25 percent. |
| .sprk-u-Width-30 | Changes the width of the element to 30 percent. |
| .sprk-u-Width-35 | Changes the width of the element to 35 percent. |
| .sprk-u-Width-40 | Changes the width of the element to 40 percent. |
| .sprk-u-Width-45 | Changes the width of the element to 45 percent. |
| .sprk-u-Width-50 | Changes the width of the element to 50 percent. |
| .sprk-u-Width-55 | Changes the width of the element to 55 percent. |
| .sprk-u-Width-60 | Changes the width of the element to 60 percent. |
| .sprk-u-Width-65 | Changes the width of the element to 65 percent. |
| .sprk-u-Width-70 | Changes the width of the element to 70 percent. |
| .sprk-u-Width-75 | Changes the width of the element to 75 percent. |
| .sprk-u-Width-80 | Changes the width of the element to 80 percent. |
| .sprk-u-Width-85 | Changes the width of the element to 85 percent. |
| .sprk-u-Width-90 | Changes the width of the element to 90 percent. |
| .sprk-u-Width-95 | Changes the width of the element to 95 percent. |
| .sprk-u-Width-100 | Changes the width of the element to 100 percent. |
These utilities override the padding and margin on an element. The class name format is .sprk-u-<type><location><size>
| Class | Values | Description |
|---|---|---|
| .sprk-u-mbn | margin-bottom: none | Sets the bottom margin to 0px. |
| .sprk-u-phm | padding-left: 16px; padding-right: 16px; |
Sets the padding on the left and right (horizontal) to 16px. |
| .sprk-u-mah | margin: 64px | Sets the margin to 64px on all sides. |