@atlaskit/primitives/constellation/responsive/examples.mdx

Primitives are token-backed low-level building blocks.

---
title: Responsive
description: Responsive helpers and primitives to build responsive UIs.
order: 1
---

import { CodeDocsHeader } from '@af/design-system-docs-ui';

<CodeDocsHeader
	name="@atlaskit/primitives"
	repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
	directoryName="primitives"
/>

## Media queries

Media queries can be applied directly in your styles. As you type `@media`, you'll get IntelliSense
support showing all the allowed media queries from the Atlassian Design System. For a complete list
of available breakpoints and media queries, see the
[breakpoints documentation](/components/primitives/responsive/breakpoints).

### Using with `cssMap`

```jsx
import { cssMap } from '@atlaskit/css';

const styles = cssMap({
	// Start typing '@media' to see available media queries
	'@media (min-width: 48rem)': {
		color: token('color.text'),
	},
	'@media (min-width: 64rem)': {
		color: token('color.text.accent.blue'),
	},
});
```