no-raw-html-elements

Raw div and span markup is where application styling drifts away from the design system: the element carries no tokens, so spacing, color, and typography end up as one-off CSS. Box is the Pluma primitive for that job — it renders any element you ask for and exposes the token vocabulary through its props.

This rule covers the generic elements that enforce-pluma-elements deliberately leaves alone because they have no single prescribed replacement.

The suggested component is a starting point, not the only answer. A div that exists purely to lay its children out should become Stack, InlineStack, or Grid rather than a Box with flex props.

Incorrect

<div className="settings-panel">
	<section>
		<span>Workspace</span>
	</section>
</div>

Correct

import { Box, Stack, Text } from '@customerio/pluma-components/react';

<Stack gap="200">
	<Box as="section">
		<Text>Workspace</Text>
	</Box>
</Stack>

What is checked

The rule reports the raw elements listed below wherever they appear in JSX or in a Glimmer template. Elements with no Pluma counterpart, such as iframe, svg, and video, are left alone.

It deliberately does not report polymorphic as / @as values, because for most of these elements the polymorphic form is the recommendation — reporting Box as="section" would contradict the rule's own advice. The trade-off is that Box as="pre" and Text as="small" also go unreported, even though those elements have a component of their own in the table below.

Elements with a Pluma starting point