Utilities
build Utility Classes Overview
MediDash comes with a powerful set of utility classes that allow you to quickly and easily style your components without writing custom CSS. These classes are designed to be highly reusable and can be applied to any element to control its appearance and layout.
space_bar Spacing
The spacing utility classes allow you to control the margin and padding of your elements. You can use these classes to create consistent and well-proportioned layouts.
| Class | Description | Value |
|---|---|---|
.m-l-{value} |
Margin Left | 0, 5, 10, 15, 20, 25 |
.m-r-{value} |
Margin Right | 0, 5, 10, 15, 20, 25 |
.m-t-{value} |
Margin Top | 0, 5, 10, 15, 20, 25 |
.m-b-{value} |
Margin Bottom | 0, 5, 10, 15, 20, 25 |
.p-l-{value} |
Padding Left | 0, 5, 10, 15, 20, 25 |
.p-r-{value} |
Padding Right | 0, 5, 10, 15, 20, 25 |
.p-t-{value} |
Padding Top | 0, 5, 10, 15, 20, 25 |
.p-b-{value} |
Padding Bottom | 0, 5, 10, 15, 20, 25 |
format_size Typography
The typography utility classes allow you to control the font size and color of your text. You can use these classes to create a consistent and readable typography system.
| Class | Description | Value |
|---|---|---|
.font-{value} |
Font Size | 5-49 |
.col-{color} |
Font Color | red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, black, white, dark-gray |
color_lens Background Colors
The background color utility classes allow you to control the background color of your elements. You can use these classes to create a consistent and visually appealing color scheme.
| Class | Description | Value |
|---|---|---|
.bg-{color} |
Background Color | red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, black, white, dark-gray |
.l-bg--{color} |
Linear Background Color | green, orange, cyan, red, purple, purple-dark |