A little decoration, three ways

Make room for an ornament.

Frame a card, separate two passages, or place a decoration or manuscript illustration beside your text. Choose from all 111 designs, including borders, painted panels, animal musicians and reading figures.

01 · Frame a card

One atlas supplies the corners and repeating edges. Painted plate frames use the original raster artwork; floral frames use SVG. Resize your browser or change the thickness: the frame follows the card.

Notes from the garden

A quiet place for a thought, a small invitation, or a favorite passage.

HTML + CSS

<link rel="stylesheet" href="../ornaments.css">
<article class="ornament-frame card">
  Your content
</article>

<style>
.card {
  --ornament-image: url('https://unpkg.com/@ranx729/medieval-ornaments-assets-borders-001@0.1.1/svg/red-berry-vine-border.svg');
  --ornament-size: 28px;
  padding: 24px;
}
</style>

02 · Separate two passages

Fit complete sections into the available width, centered with equal space at both ends. Each motif keeps its proportions.

Divider

One chapter comes to a close.

And another begins.

HTML + CSS

<link rel="stylesheet" href="../ornaments.css">
<div class="ornament-divider divider"
     aria-hidden="true"></div>

<style>
.divider {
  --ornament-image: url('https://unpkg.com/@ranx729/medieval-ornaments-assets-borders-001@0.1.1/svg/gold-leaf-scroll.svg');
  --ornament-size: 24px;
}
</style>

03 · Add a decoration or illustration

Use a complete ornament, figure or scene beside your content. Preserve its proportions and check its background: transparent cutouts and retained opaque scenes are both available.

Image

A narrow flourish leaves plenty of room for the words.

HTML · decorative image

<link rel="stylesheet" href="../ornaments.css">
<picture>
  <source type="image/webp" srcset="
    https://unpkg.com/@ranx729/medieval-ornaments-assets-decorations-001@0.1.1/webp/256/floral-bird-panel-blue.webp 1x,
    https://unpkg.com/@ranx729/medieval-ornaments-assets-decorations-001@0.1.1/webp/512/floral-bird-panel-blue.webp 2x">
  <img class="ornament-image"
    src="https://unpkg.com/@ranx729/medieval-ornaments-assets-decorations-001@0.1.1/png/256/floral-bird-panel-blue.png"
    srcset="https://unpkg.com/@ranx729/medieval-ornaments-assets-decorations-001@0.1.1/png/256/floral-bird-panel-blue.png 1x,
      https://unpkg.com/@ranx729/medieval-ornaments-assets-decorations-001@0.1.1/png/512/floral-bird-panel-blue.png 2x"
    height="256" width="34" alt="">
</picture>

The shared classes are ornament-frame, ornament-divider, and ornament-image. Set --ornament-image for a border or tile and --ornament-size for its thickness or image height. A vertical divider uses data-axis="y".

SVG borders can scale freely. Color traces approximate the source; PNG/WebP preserve its native appearance. Whole decorations retain distinct ends or irregular motifs and have no repeating frame. Grid-paper stencils retain their backgrounds, whose grid lines can show at repeat joins.