Skip to main
Table of Contents

Note Style

This page demonstrates paper-style note treatments built with CSS gradients, corner folds, and subtle shadowing. The same base .note class can be reused with modifier variants for different visual contexts.

Demonstration

This render compares three note variants side by side so you can evaluate the same folded-corner pattern across different visual treatments.

Default Note - Paper

Neutral paper-style note with a folded corner and soft grey shading.

Tip Note

Attention-style note variant for tips, reminders, or highlighted guidance.

Dark Note

Dark note variant suited for low-light themes or higher contrast callouts.

Implementation Notes

  • The folded-corner effect is drawn with a pseudo-element instead of extra markup.
  • The visual texture is created with layered gradients so no image assets are required.
  • Variant modifiers such as .note--dark and .note--tip reuse the same folded-corner structure and only change the visual treatment.

Code for This Page

This HTML pattern shows one comparison tile: a heading plus a note block using one variant modifier.

<div class="col-default-12 col-tablet-small-6">
  <h3>Tip Note</h3>
  <div class="note note--tip">
    <p>Tip Note</p>
  </div>
</div>

This CSS snippet shows the base note setup and folded-corner pseudo-element pattern used by all variants.

.note {
  position: relative;
  text-shadow: none;
  border-radius: var(--note-radius);
}

.note::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  box-shadow: -1px 1px 1px rgb(0 0 0 / 30%);
}

Files for This Page

  • project/example/in/example/note-style.html - page content and demo markup.
  • project/example/in/asset/css/content/example/note-style.scss - note effect styles, variants, and page demo layout styling.

Attribution