• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Page

Component status
Contribution
Current version@spectrum-css/page@8.1.2
ReleasedAugust 29, 2024
S2-foundations@spectrum-css/page@9.0.0-s2-foundations.1
ReleasedJune 18, 2024
View repository
GitHub
View package
npm

Usage notes

The outer page container. A parent tag should only have the .spectrum class if using a standalone CSS file.
If using multistops, a parent tag should have both the .spectrum class and the corresponding colorstop variant class, i.e. .spectrum--light.
Finally, if scaling to large with the diff strategy, a parent tag should have the .spectrum--large class.

Variants

Standard
Contribution

Text here!


Text here!






Show markup
Text here!<br>
<br><br>
<div class="spectrum--large spectrum">
  Text here!<br>
</div>
<br><br>

<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent"><span class="spectrum-Button-label">Button</span></button>
<br><br>
<div class="spectrum--large">
  <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent"><span class="spectrum-Button-label">Button</span></button>
</div>
<br><br>