# Utils | **Class** | **Description** | | --------- | --------------- | | `.dda-container` | Defines default container with padding and margin. | | ---------------- | -------------------------------------------------- | | `.dda-container-fluid` | Full-width container without fixed size. | | ---------------------- | ---------------------------------------- | | `.dda-container-xxl` | Container for extra-large screens, max-width 1320px. | | -------------------- | ---------------------------------------------------- | | `.dda-container-xl` | Container for large screens, max-width 1140px. | | ------------------- | ---------------------------------------------- | | `.dda-container-lg` | Container for medium-large screens, max-width 960px. | | ------------------- | ---------------------------------------------------- | | `.dda-container-md` | Container for medium screens, max-width 720px. | | ------------------- | ---------------------------------------------- | | `.dda-container-sm` | Container for small screens, max-width 540px. | | ------------------- | --------------------------------------------- | | `.dda-row` | Row layout with gutter spacing and wrapping. | | ---------- | -------------------------------------------- | | `.dda-col` | Flexible column with 100% width. | | ---------- | -------------------------------- | | `.dda-col-auto` | Column with automatic width. | | --------------- | ---------------------------- | | `.dda-col-[1-12]` | Columns with specific widths (from 8.33% to 100%). | | ----------------- | -------------------------------------------------- | | `.dda-col-sm-[1-12]` | Columns for small screens with specific widths. | | -------------------- | ----------------------------------------------- | | `.dda-col-md-[1-12]` | Columns for medium screens with specific widths. | | -------------------- | ------------------------------------------------ | | `.dda-col-lg-[1-12]` | Columns for large screens with specific widths. | | -------------------- | ----------------------------------------------- | | `.dda-col-xl-[1-12]` | Columns for extra-large screens with specific widths. | | -------------------- | ----------------------------------------------------- | | `.dda-col-xxl-[1-12]` | Columns for extra-extra-large screens with specific widths. | | --------------------- | ----------------------------------------------------------- | | `.d-inline` | Displays element inline. | | ----------- | ------------------------ | | `.d-inline-block` | Displays element as inline-block. | | ----------------- | --------------------------------- | | `.d-block` | Displays element as block. | | ---------- | -------------------------- | | `.d-grid` | Displays element as grid. | | --------- | ------------------------- | | `.d-inline-grid` | Displays element as inline-grid. | | ---------------- | -------------------------------- | | `.d-table` | Displays element as a table. | | ---------- | ---------------------------- | | `.d-table-row` | Displays element as a table row. | | -------------- | -------------------------------- | | `.d-table-cell` | Displays element as a table cell. | | --------------- | --------------------------------- | | `.d-flex` | Displays element as a flex container. | | --------- | ------------------------------------- | | `.d-inline-flex` | Displays element as inline flex container. | | ---------------- | ------------------------------------------ | | `.d-none` | Hides element (display: none). | | --------- | ------------------------------ | | `.flex-fill` | Makes flex item fill available space. | | ------------ | ------------------------------------- | | `.flex-row` | Flex container with horizontal row direction. | | ----------- | --------------------------------------------- | | `.flex-column` | Flex container with vertical column direction. | | -------------- | ---------------------------------------------- | | `.flex-row-reverse` | Flex container with reversed horizontal direction. | | ------------------- | -------------------------------------------------- | | `.flex-wrap` | Enables wrapping for flex items. | | ------------ | -------------------------------- | | `.flex-nowrap` | Prevents wrapping of flex items. | | -------------- | -------------------------------- | | `.flex-wrap-reverse` | Reverses the wrapping direction of flex items. | | -------------------- | ---------------------------------------------- | | `.m-[0-5]` | Margin utility classes (from 0 to 3rem). | | ---------- | ---------------------------------------- | | `.m-auto` | Centers element with auto margin. | | --------- | --------------------------------- | | `.mx-[0-5]` | Horizontal margin utility (left and right). | | ----------- | ------------------------------------------- | | `.my-[0-5]` | Vertical margin utility (top and bottom). | | ----------- | ----------------------------------------- | | `.mt-[0-5]` | Margin-top utility (0 to 3rem). | | ----------- | ------------------------------- | | `.me-[0-5]` | Margin-right utility (0 to 3rem). | | ----------- | --------------------------------- | | `.mb-[0-5]` | Margin-bottom utility (0 to 3rem). | | ----------- | ---------------------------------- | | `.ms-[0-5]` | Margin-left utility (0 to 3rem). | | ----------- | -------------------------------- | | `.p-[0-5]` | Padding utility classes (from 0 to 3rem). | | ---------- | ----------------------------------------- | | `.px-[0-5]` | Horizontal padding utility (left and right). | | ----------- | -------------------------------------------- | | `.py-[0-5]` | Vertical padding utility (top and bottom). | | ----------- | ------------------------------------------ | | `.pt-[0-5]` | Padding-top utility (0 to 3rem). | | ----------- | -------------------------------- | | `.pe-[0-5]` | Padding-right utility (0 to 3rem). | | ----------- | ---------------------------------- | | **Class Name** | **Description** | | -------------- | --------------- | | `h1, .dda-h1` | Font size and weight for h1 headers | | ------------- | ----------------------------------- | | `h2, .dda-h2` | Font size and weight for h2 headers | | ------------- | ----------------------------------- | | `h3, .dda-h3` | Font size and weight for h3 headers | | ------------- | ----------------------------------- | | `h4, .dda-h4` | Font size and weight for h4 headers | | ------------- | ----------------------------------- | | `h5, .dda-h5` | Font size and weight for h5 headers | | ------------- | ----------------------------------- | | `h6, .dda-h6` | Font size and weight for h6 headers | | ------------- | ----------------------------------- | | `.dda-title` | Font size and weight for titles | | ------------ | ------------------------------- | | `.dda-body` | Font size and weight for body text | | ----------- | ---------------------------------- | | `.dda-caption` | Font size and weight for captions | | -------------- | --------------------------------- | | `.dda-label` | Font size and weight for labels | | ------------ | ------------------------------- | | `a, a:hover` | Removes underline from links and defines hover style | | ------------ | ---------------------------------------------------- | | `button` | Applies pointer cursor to buttons | | -------- | --------------------------------- | | `ul` | Removes list styling (bullets and padding) | | ---- | ------------------------------------------ | | `.dda-bg-primary` | Primary background color | | ----------------- | ------------------------ | | `.dda-bg-secondary` | Secondary background color | | ------------------- | -------------------------- | | `.dda-color-black` | Applies black text color | | ------------------ | ------------------------ | | `.dda-rounded-sm` | Small border radius | | ----------------- | ------------------- | | `.dda-rounded-md` | Medium border radius | | ----------------- | -------------------- | | `.dda-rounded-lg` | Large border radius | | ----------------- | ------------------- | | `.dda-rounded-circle` | Circular border radius | | --------------------- | ---------------------- | | `.dda-gap-16` | 4rem gap between flex items | | ------------- | --------------------------- | | `.dda-gap-12` | 3rem gap between flex items | | ------------- | --------------------------- | | `.dda-gap-10` | 2.5rem gap between flex items | | ------------- | ----------------------------- | | `.dda-gap-8` | 2rem gap between flex items | | ------------ | --------------------------- | | `.dda-gap-6` | 1.5rem gap between flex items | | ------------ | ----------------------------- | | `.dda-gap-5` | 1.25rem gap between flex items | | ------------ | ------------------------------ | | `.dda-gap-4` | 1rem gap between flex items | | ------------ | --------------------------- | | `.dda-gap-3` | 0.75rem gap between flex items | | ------------ | ------------------------------ | | `.dda-gap-2` | 0.5rem gap between flex items | | ------------ | ----------------------------- | | `.dda-gap-1` | 0.375rem gap between flex items | | ------------ | ------------------------------- | | `::-ms-input-placeholder` | Placeholder text color for Internet Explorer | | ------------------------- | -------------------------------------------- | | `::placeholder` | Placeholder text color for other browsers | | --------------- | ----------------------------------------- | | `.dda-flex` | Flex container display | | ----------- | ---------------------- | | `.dda-flex-column` | Flex direction set to column | | ------------------ | ---------------------------- | | `.dda-inline-flex` | Inline flex container display | | ------------------ | ----------------------------- | | `.dda-align-center` | Centers items along the cross-axis | | ------------------- | ---------------------------------- | | `.dda-justify-space` | Distributes items with space between them | | -------------------- | ----------------------------------------- | | `.dda-justify-center` | Centers items along the main axis | | --------------------- | --------------------------------- | | `.m-0` | Removes margin from element | | ------ | --------------------------- | | `.p-0` | Removes padding from element | | ------ | ---------------------------- | | `.py-0` | Removes vertical padding from element | | ------- | ------------------------------------- | | `.border-right` | Adds a right border to the element | | --------------- | ---------------------------------- | | `.visually-hidden` | Hides element visually but keeps it accessible | | ------------------ | ---------------------------------------------- | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://designsystem.dubai.ae/foundations/utils.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.