Placeholder

Placeholder patterns for loading and layout previews: typographic copy, copy blocks, and media ratios. Styles live in scss/components/_copy.scss, _media.scss, and typography tokens.

Copy, typographic scale

Heading and body utility classes from the design system. Pair with semantic HTML (<h1 class="heading-h1">, <p class="body-medium">).

<h2 class="heading-h3">Section title</h2>

Copy block

.copy-block groups a heading and paragraph with consistent spacing. Add .copy-block--center to center-align marketing hero copy.

<div class="copy-block">
  <h2 class="heading-h5">Headline medium length</h2>
  <p class="copy-block__text">Supporting paragraph.</p>
</div>

Image ratios

.media constrains images with aspect-ratio. Modifiers set common crops: media--1-1, media--8-5, media--3-4, media--3-2. Demos use local SVG placeholders from the design system palette (/media-placeholder/{w}/{h}/{variant}.svg or /media-placeholder.svg?w=&h=&v= in dev).

<div class="media media--3-2">
  <img src="/media-placeholder/480/320/0.svg" alt="Description of the image" width="480" height="320" />
</div>

Class reference

Customize (Sass)

1. 01

   Copy and media width

   Tune copy block width and default media column size.
   variables

   @use "pimentcss-design-system" with (
     $copy-block-max-width: 36rem,
     $media-width-base: 15rem
   );

2. 02

   Rebuild CSS

   Run after editing _copy.scss or _media.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps