Rotulus

A vertical roll of sections, typically found on landing pages.

A rotulus is a scroll (perhaps of parchment) turned vertically, like those used for "hear ye!" proclamations that appear so often in cartoons. The Guise Skeleton rotulus component extends this idea to the modern age, enabling quick-and-easy landing pages.

Structure

Examples

Landing pages are now quick and simple!

foo
bar

Brought to you by Guise™ Skeleton.

<div class="rotulus">
  <section class="layout-marquee">
      <p><em>Landing pages are now quick and simple!</em></p>
    </section>
    <section class="layout-tile">
      <div class="card">foo</div>
      <div class="card">bar</div>
    </section>
      <section class="layout-marquee">
      <p>Brought to you by Guise™ Skeleton.</p>
    </section>
</div>

Landing pages are now quick and simple!

foo
bar

Brought to you by Guise™ Skeleton.

<div class="rotulus is-striped">
  <section class="layout-marquee">
      <p><em>Landing pages are now quick and simple!</em></p>
    </section>
    <section class="layout-tile">
      <div class="card">foo</div>
      <div class="card">bar</div>
    </section>
      <section class="layout-marquee">
      <p>Brought to you by Guise™ Skeleton.</p>
    </section>
</div>

Modifiers

is-striped
Turns on striping of the child <section> elements.

Properties

--guise-skeleton-rotulus-padding-left
--guise-skeleton-rotulus-padding-right
--guise-skeleton-rotulus-section-padding-top
--guise-skeleton-rotulus-section-padding-right
--guise-skeleton-rotulus-section-padding-bottom
--guise-skeleton-rotulus-section-padding-left
--guise-skeleton-rotulus-stripe-background-color
The background color if the is-striped modifier is present. Defaults to --guise-skeleton-component-background-color.
--guise-skeleton-rotulus-stripe-background-color-default
The default stripe color if the is-striped modifier is not present. Defaults to initial.