# Visibility

Utilities for controlling the visibility of an element without affecting layout.

**Category:** Utilities
**CSS source:** `https://cdn.ux4g.gov.in/UX4G@3.0.18/utilities/visibility.utilities.css`
**Repository source:** `src/utilities/visibility.utilities.css`
**Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-visibility--introduction

## Class reference

| Class | CSS declaration |
|---|---|
| `ux4g-visible` | `visibility: var(--ux4g-visibility-visible)` |
| `ux4g-invisible` | `visibility: var(--ux4g-visibility-hidden)` |

## Usage

Use the documented variants and class names. If exact markup is still required after checking this page and the catalog, use the linked Storybook page as the final fallback.

## Usage

Use Visibility utilities to apply their named visual or layout behaviour directly to an element. Combine them with semantic component classes; do not create replacement CSS unless the documented utilities cannot meet the requirement.

## Reference paths

- Documentation: `https://doc.ux4g.gov.in/web/llms/utilities/visibility.md`
- Exact CSS: `https://cdn.ux4g.gov.in/UX4G@3.0.18/utilities/visibility.utilities.css`

## Exact CSS

### https://cdn.ux4g.gov.in/UX4G@3.0.18/utilities/visibility.utilities.css

```css
.ux4g-visible {
  visibility: var(--ux4g-visibility-visible) !important;
}

.ux4g-invisible {
  visibility: var(--ux4g-visibility-hidden) !important;
}
```

## Accessibility notes

- Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility.
- Ensure color contrast meets WCAG 2.1 AA.
- Test responsive and RTL behavior where utility classes rely on logical properties.