---
url: /api/css/responsive.md
---
# CSS: responsive

`[class*="-hidden-"],[class*="-show-"]` — Viewport- or container-width show/hide classes across a themed breakpoint scale.

`.instui-hidden-max-<bp>`/`-hidden-min-<bp>` hide by viewport width; `.instui-show-max-<bp>`/`-show-min-<bp>` are the inverse (hidden by default, shown only inside the range via `display: revert`); the `-cq-` variants react to a `.instui-container` ancestor's width instead, not the viewport's. Scale tiers `sm`/`md`/`lg`/`xl` mirror the IR's canonical breakpoint tokens, with a Pantoken-defined `xs` extension at `20em`; each is aliased to a long-form spelling (`x-small`–`x-large`) and a device name (`mobile`/`phablet`/`tablet`/`laptop`/`desktop`) — both deprecated in favor of the short name — plus the unscaled, themed `content`/`content-full-width` tiers (the main content area's max-width).

**Source:** [index.ts](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/utilities/responsive/index.ts)

## Usage

```css
@import "@pantoken/components/utilities.css";
```

## Examples

```html
<div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>
<div class="instui-show-min-sm">Shown only at or above the small breakpoint.</div>
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-cq-hidden-max-content` | Hide when the marked container is at or below the `content` breakpoint (`68.75em`). |
| `.-cq-hidden-max-content-full-width` | Hide when the marked container is at or below the `content-full-width` breakpoint (`98.75em`). |
| `.-cq-hidden-max-desktop` | Alias — maps to `.-cq-hidden-max-xl`. |
| `.-cq-hidden-max-laptop` | Alias — maps to `.-cq-hidden-max-lg`. |
| `.-cq-hidden-max-large` | Alias — maps to `.-cq-hidden-max-lg`. |
| `.-cq-hidden-max-lg` | Hide when the marked container is at or below the `lg` breakpoint (`64em`). |
| `.-cq-hidden-max-md` | Hide when the marked container is at or below the `md` breakpoint (`48em`). |
| `.-cq-hidden-max-medium` | Alias — maps to `.-cq-hidden-max-md`. |
| `.-cq-hidden-max-mobile` | Alias — maps to `.-cq-hidden-max-xs`. |
| `.-cq-hidden-max-phablet` | Alias — maps to `.-cq-hidden-max-sm`. |
| `.-cq-hidden-max-sm` | Hide when the marked container is at or below the `sm` breakpoint (`30em`). |
| `.-cq-hidden-max-small` | Alias — maps to `.-cq-hidden-max-sm`. |
| `.-cq-hidden-max-tablet` | Alias — maps to `.-cq-hidden-max-md`. |
| `.-cq-hidden-max-x-large` | Alias — maps to `.-cq-hidden-max-xl`. |
| `.-cq-hidden-max-x-small` | Alias — maps to `.-cq-hidden-max-xs`. |
| `.-cq-hidden-max-xl` | Hide when the marked container is at or below the `xl` breakpoint (`80em`). |
| `.-cq-hidden-max-xs` | Hide when the marked container is at or below the `xs` breakpoint (`20em`). |
| `.-cq-hidden-min-content` | Hide when the marked container is at or above the `content` breakpoint (`68.75em`). |
| `.-cq-hidden-min-content-full-width` | Hide when the marked container is at or above the `content-full-width` breakpoint (`98.75em`). |
| `.-cq-hidden-min-desktop` | Alias — maps to `.-cq-hidden-min-xl`. |
| `.-cq-hidden-min-laptop` | Alias — maps to `.-cq-hidden-min-lg`. |
| `.-cq-hidden-min-large` | Alias — maps to `.-cq-hidden-min-lg`. |
| `.-cq-hidden-min-lg` | Hide when the marked container is at or above the `lg` breakpoint (`64em`). |
| `.-cq-hidden-min-md` | Hide when the marked container is at or above the `md` breakpoint (`48em`). |
| `.-cq-hidden-min-medium` | Alias — maps to `.-cq-hidden-min-md`. |
| `.-cq-hidden-min-mobile` | Alias — maps to `.-cq-hidden-min-xs`. |
| `.-cq-hidden-min-phablet` | Alias — maps to `.-cq-hidden-min-sm`. |
| `.-cq-hidden-min-sm` | Hide when the marked container is at or above the `sm` breakpoint (`30em`). |
| `.-cq-hidden-min-small` | Alias — maps to `.-cq-hidden-min-sm`. |
| `.-cq-hidden-min-tablet` | Alias — maps to `.-cq-hidden-min-md`. |
| `.-cq-hidden-min-x-large` | Alias — maps to `.-cq-hidden-min-xl`. |
| `.-cq-hidden-min-x-small` | Alias — maps to `.-cq-hidden-min-xs`. |
| `.-cq-hidden-min-xl` | Hide when the marked container is at or above the `xl` breakpoint (`80em`). |
| `.-cq-hidden-min-xs` | Hide when the marked container is at or above the `xs` breakpoint (`20em`). |
| `.-cq-show-max-content` | Show when the marked container is at or below the `content` breakpoint (`68.75em`); hidden otherwise. |
| `.-cq-show-max-content-full-width` | Show when the marked container is at or below the `content-full-width` breakpoint (`98.75em`); hidden otherwise. |
| `.-cq-show-max-desktop` | Alias — maps to `.-cq-show-max-xl`. |
| `.-cq-show-max-laptop` | Alias — maps to `.-cq-show-max-lg`. |
| `.-cq-show-max-large` | Alias — maps to `.-cq-show-max-lg`. |
| `.-cq-show-max-lg` | Show when the marked container is at or below the `lg` breakpoint (`64em`); hidden otherwise. |
| `.-cq-show-max-md` | Show when the marked container is at or below the `md` breakpoint (`48em`); hidden otherwise. |
| `.-cq-show-max-medium` | Alias — maps to `.-cq-show-max-md`. |
| `.-cq-show-max-mobile` | Alias — maps to `.-cq-show-max-xs`. |
| `.-cq-show-max-phablet` | Alias — maps to `.-cq-show-max-sm`. |
| `.-cq-show-max-sm` | Show when the marked container is at or below the `sm` breakpoint (`30em`); hidden otherwise. |
| `.-cq-show-max-small` | Alias — maps to `.-cq-show-max-sm`. |
| `.-cq-show-max-tablet` | Alias — maps to `.-cq-show-max-md`. |
| `.-cq-show-max-x-large` | Alias — maps to `.-cq-show-max-xl`. |
| `.-cq-show-max-x-small` | Alias — maps to `.-cq-show-max-xs`. |
| `.-cq-show-max-xl` | Show when the marked container is at or below the `xl` breakpoint (`80em`); hidden otherwise. |
| `.-cq-show-max-xs` | Show when the marked container is at or below the `xs` breakpoint (`20em`); hidden otherwise. |
| `.-cq-show-min-content` | Show when the marked container is at or above the `content` breakpoint (`68.75em`); hidden otherwise. |
| `.-cq-show-min-content-full-width` | Show when the marked container is at or above the `content-full-width` breakpoint (`98.75em`); hidden otherwise. |
| `.-cq-show-min-desktop` | Alias — maps to `.-cq-show-min-xl`. |
| `.-cq-show-min-laptop` | Alias — maps to `.-cq-show-min-lg`. |
| `.-cq-show-min-large` | Alias — maps to `.-cq-show-min-lg`. |
| `.-cq-show-min-lg` | Show when the marked container is at or above the `lg` breakpoint (`64em`); hidden otherwise. |
| `.-cq-show-min-md` | Show when the marked container is at or above the `md` breakpoint (`48em`); hidden otherwise. |
| `.-cq-show-min-medium` | Alias — maps to `.-cq-show-min-md`. |
| `.-cq-show-min-mobile` | Alias — maps to `.-cq-show-min-xs`. |
| `.-cq-show-min-phablet` | Alias — maps to `.-cq-show-min-sm`. |
| `.-cq-show-min-sm` | Show when the marked container is at or above the `sm` breakpoint (`30em`); hidden otherwise. |
| `.-cq-show-min-small` | Alias — maps to `.-cq-show-min-sm`. |
| `.-cq-show-min-tablet` | Alias — maps to `.-cq-show-min-md`. |
| `.-cq-show-min-x-large` | Alias — maps to `.-cq-show-min-xl`. |
| `.-cq-show-min-x-small` | Alias — maps to `.-cq-show-min-xs`. |
| `.-cq-show-min-xl` | Show when the marked container is at or above the `xl` breakpoint (`80em`); hidden otherwise. |
| `.-cq-show-min-xs` | Show when the marked container is at or above the `xs` breakpoint (`20em`); hidden otherwise. |
| `.-hidden-max-content` | Hide when the viewport is at or below the `content` breakpoint (`68.75em`). |
| `.-hidden-max-content-full-width` | Hide when the viewport is at or below the `content-full-width` breakpoint (`98.75em`). |
| `.-hidden-max-desktop` | Alias — maps to `.-hidden-max-xl`. |
| `.-hidden-max-laptop` | Alias — maps to `.-hidden-max-lg`. |
| `.-hidden-max-large` | Alias — maps to `.-hidden-max-lg`. |
| `.-hidden-max-lg` | Hide when the viewport is at or below the `lg` breakpoint (`64em`). |
| `.-hidden-max-md` | Hide when the viewport is at or below the `md` breakpoint (`48em`). |
| `.-hidden-max-medium` | Alias — maps to `.-hidden-max-md`. |
| `.-hidden-max-mobile` | Alias — maps to `.-hidden-max-xs`. |
| `.-hidden-max-phablet` | Alias — maps to `.-hidden-max-sm`. |
| `.-hidden-max-sm` | Hide when the viewport is at or below the `sm` breakpoint (`30em`). |
| `.-hidden-max-small` | Alias — maps to `.-hidden-max-sm`. |
| `.-hidden-max-tablet` | Alias — maps to `.-hidden-max-md`. |
| `.-hidden-max-x-large` | Alias — maps to `.-hidden-max-xl`. |
| `.-hidden-max-x-small` | Alias — maps to `.-hidden-max-xs`. |
| `.-hidden-max-xl` | Hide when the viewport is at or below the `xl` breakpoint (`80em`). |
| `.-hidden-max-xs` | Hide when the viewport is at or below the `xs` breakpoint (`20em`). |
| `.-hidden-min-content` | Hide when the viewport is at or above the `content` breakpoint (`68.75em`). |
| `.-hidden-min-content-full-width` | Hide when the viewport is at or above the `content-full-width` breakpoint (`98.75em`). |
| `.-hidden-min-desktop` | Alias — maps to `.-hidden-min-xl`. |
| `.-hidden-min-laptop` | Alias — maps to `.-hidden-min-lg`. |
| `.-hidden-min-large` | Alias — maps to `.-hidden-min-lg`. |
| `.-hidden-min-lg` | Hide when the viewport is at or above the `lg` breakpoint (`64em`). |
| `.-hidden-min-md` | Hide when the viewport is at or above the `md` breakpoint (`48em`). |
| `.-hidden-min-medium` | Alias — maps to `.-hidden-min-md`. |
| `.-hidden-min-mobile` | Alias — maps to `.-hidden-min-xs`. |
| `.-hidden-min-phablet` | Alias — maps to `.-hidden-min-sm`. |
| `.-hidden-min-sm` | Hide when the viewport is at or above the `sm` breakpoint (`30em`). |
| `.-hidden-min-small` | Alias — maps to `.-hidden-min-sm`. |
| `.-hidden-min-tablet` | Alias — maps to `.-hidden-min-md`. |
| `.-hidden-min-x-large` | Alias — maps to `.-hidden-min-xl`. |
| `.-hidden-min-x-small` | Alias — maps to `.-hidden-min-xs`. |
| `.-hidden-min-xl` | Hide when the viewport is at or above the `xl` breakpoint (`80em`). |
| `.-hidden-min-xs` | Hide when the viewport is at or above the `xs` breakpoint (`20em`). |
| `.-show-max-content` | Show (inverse of `-hidden-min-content`) when the viewport is at or below the `content` breakpoint (`68.75em`); hidden otherwise. |
| `.-show-max-content-full-width` | Show (inverse of `-hidden-min-content-full-width`) when the viewport is at or below the `content-full-width` breakpoint (`98.75em`); hidden otherwise. |
| `.-show-max-desktop` | Alias — maps to `.-show-max-xl`. |
| `.-show-max-laptop` | Alias — maps to `.-show-max-lg`. |
| `.-show-max-large` | Alias — maps to `.-show-max-lg`. |
| `.-show-max-lg` | Show (inverse of `-hidden-min-lg`) when the viewport is at or below the `lg` breakpoint (`64em`); hidden otherwise. |
| `.-show-max-md` | Show (inverse of `-hidden-min-md`) when the viewport is at or below the `md` breakpoint (`48em`); hidden otherwise. |
| `.-show-max-medium` | Alias — maps to `.-show-max-md`. |
| `.-show-max-mobile` | Alias — maps to `.-show-max-xs`. |
| `.-show-max-phablet` | Alias — maps to `.-show-max-sm`. |
| `.-show-max-sm` | Show (inverse of `-hidden-min-sm`) when the viewport is at or below the `sm` breakpoint (`30em`); hidden otherwise. |
| `.-show-max-small` | Alias — maps to `.-show-max-sm`. |
| `.-show-max-tablet` | Alias — maps to `.-show-max-md`. |
| `.-show-max-x-large` | Alias — maps to `.-show-max-xl`. |
| `.-show-max-x-small` | Alias — maps to `.-show-max-xs`. |
| `.-show-max-xl` | Show (inverse of `-hidden-min-xl`) when the viewport is at or below the `xl` breakpoint (`80em`); hidden otherwise. |
| `.-show-max-xs` | Show (inverse of `-hidden-min-xs`) when the viewport is at or below the `xs` breakpoint (`20em`); hidden otherwise. |
| `.-show-min-content` | Show (inverse of `-hidden-max-content`) when the viewport is at or above the `content` breakpoint (`68.75em`); hidden otherwise. |
| `.-show-min-content-full-width` | Show (inverse of `-hidden-max-content-full-width`) when the viewport is at or above the `content-full-width` breakpoint (`98.75em`); hidden otherwise. |
| `.-show-min-desktop` | Alias — maps to `.-show-min-xl`. |
| `.-show-min-laptop` | Alias — maps to `.-show-min-lg`. |
| `.-show-min-large` | Alias — maps to `.-show-min-lg`. |
| `.-show-min-lg` | Show (inverse of `-hidden-max-lg`) when the viewport is at or above the `lg` breakpoint (`64em`); hidden otherwise. |
| `.-show-min-md` | Show (inverse of `-hidden-max-md`) when the viewport is at or above the `md` breakpoint (`48em`); hidden otherwise. |
| `.-show-min-medium` | Alias — maps to `.-show-min-md`. |
| `.-show-min-mobile` | Alias — maps to `.-show-min-xs`. |
| `.-show-min-phablet` | Alias — maps to `.-show-min-sm`. |
| `.-show-min-sm` | Show (inverse of `-hidden-max-sm`) when the viewport is at or above the `sm` breakpoint (`30em`); hidden otherwise. |
| `.-show-min-small` | Alias — maps to `.-show-min-sm`. |
| `.-show-min-tablet` | Alias — maps to `.-show-min-md`. |
| `.-show-min-x-large` | Alias — maps to `.-show-min-xl`. |
| `.-show-min-x-small` | Alias — maps to `.-show-min-xs`. |
| `.-show-min-xl` | Show (inverse of `-hidden-max-xl`) when the viewport is at or above the `xl` breakpoint (`80em`); hidden otherwise. |
| `.-show-min-xs` | Show (inverse of `-hidden-max-xs`) when the viewport is at or above the `xs` breakpoint (`20em`); hidden otherwise. |

## Custom properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `--pantoken-bp-content` | `<length>` | `68.75em` | The `content` breakpoint's value (`68.75em`, hand-authored, themed (not in the token IR)). Overriding it does not move the compiled `@media`/`@container` thresholds above. |
| `--pantoken-bp-content-full-width` | `<length>` | `98.75em` | The `content-full-width` breakpoint's value (`98.75em`, hand-authored, themed (not in the token IR)). Overriding it does not move the compiled `@media`/`@container` thresholds above. |
| `--pantoken-bp-lg` | `<length>` | `64em` | The `lg` breakpoint's value (`64em`, mirrors `--instui-breakpoints-lg`). Overriding it does not move the compiled `@media`/`@container` thresholds above. |
| `--pantoken-bp-md` | `<length>` | `48em` | The `md` breakpoint's value (`48em`, mirrors `--instui-breakpoints-md`). Overriding it does not move the compiled `@media`/`@container` thresholds above. |
| `--pantoken-bp-sm` | `<length>` | `30em` | The `sm` breakpoint's value (`30em`, mirrors `--instui-breakpoints-sm`). Overriding it does not move the compiled `@media`/`@container` thresholds above. |
| `--pantoken-bp-xl` | `<length>` | `80em` | The `xl` breakpoint's value (`80em`, mirrors `--instui-breakpoints-xl`). Overriding it does not move the compiled `@media`/`@container` thresholds above. |
| `--pantoken-bp-xs` | `<length>` | `20em` | The `xs` breakpoint's value (`20em`, hand-authored Pantoken extension (not in the token IR)). Overriding it does not move the compiled `@media`/`@container` thresholds above. |

## Conditions

| Type | Query | Description |
| --- | --- | --- |
| media | `(max-width: 20em)` | Upper bound of the `xs` breakpoint. |
| media | `(min-width: 20em)` | Lower bound of the `xs` breakpoint. |
| media | `(max-width: 30em)` | Upper bound of the `sm` breakpoint. |
| media | `(min-width: 30em)` | Lower bound of the `sm` breakpoint. |
| media | `(max-width: 48em)` | Upper bound of the `md` breakpoint. |
| media | `(min-width: 48em)` | Lower bound of the `md` breakpoint. |
| media | `(max-width: 64em)` | Upper bound of the `lg` breakpoint. |
| media | `(min-width: 64em)` | Lower bound of the `lg` breakpoint. |
| media | `(max-width: 80em)` | Upper bound of the `xl` breakpoint. |
| media | `(min-width: 80em)` | Lower bound of the `xl` breakpoint. |
| media | `(max-width: 68.75em)` | Upper bound of the `content` breakpoint. |
| media | `(min-width: 68.75em)` | Lower bound of the `content` breakpoint. |
| media | `(max-width: 98.75em)` | Upper bound of the `content-full-width` breakpoint. |
| media | `(min-width: 98.75em)` | Lower bound of the `content-full-width` breakpoint. |
| container | `(max-width: 20em)` | Upper bound of the `xs` breakpoint, evaluated against a marked container. |
| container | `(min-width: 20em)` | Lower bound of the `xs` breakpoint, evaluated against a marked container. |
| container | `(max-width: 30em)` | Upper bound of the `sm` breakpoint, evaluated against a marked container. |
| container | `(min-width: 30em)` | Lower bound of the `sm` breakpoint, evaluated against a marked container. |
| container | `(max-width: 48em)` | Upper bound of the `md` breakpoint, evaluated against a marked container. |
| container | `(min-width: 48em)` | Lower bound of the `md` breakpoint, evaluated against a marked container. |
| container | `(max-width: 64em)` | Upper bound of the `lg` breakpoint, evaluated against a marked container. |
| container | `(min-width: 64em)` | Lower bound of the `lg` breakpoint, evaluated against a marked container. |
| container | `(max-width: 80em)` | Upper bound of the `xl` breakpoint, evaluated against a marked container. |
| container | `(min-width: 80em)` | Lower bound of the `xl` breakpoint, evaluated against a marked container. |
| container | `(max-width: 68.75em)` | Upper bound of the `content` breakpoint, evaluated against a marked container. |
| container | `(min-width: 68.75em)` | Lower bound of the `content` breakpoint, evaluated against a marked container. |
| container | `(max-width: 98.75em)` | Upper bound of the `content-full-width` breakpoint, evaluated against a marked container. |
| container | `(min-width: 98.75em)` | Lower bound of the `content-full-width` breakpoint, evaluated against a marked container. |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-breakpoints-lg` | `<length>` | `64em` |
| `--instui-breakpoints-md` | `<length>` | `48em` |
| `--instui-breakpoints-sm` | `<length>` | `30em` |
| `--instui-breakpoints-xl` | `<length>` | `80em` |