Deprecated Added in 1.0.0

Panels

Use panels to help group content visually or call attention to parts of your application.

Migrating to Rivet 2

This version of Rivet is deprecated. The panel component has been replaced by the card component and link hub component in Rivet 2. You can also recreate this component as it appears in Rivet 1 using Rivet 2 utilities.

The Panel component is deprecated

The panel component will be removed in the next major version of Rivet in favor of the new box component. See the box component documentation for more information.

Default panel

The default panel in Rivet has light gray background that can be used to help call out content against the default white stage area.

Voluptates quas voluptas a est est ut nisi. Laborum debitis perferendis voluptatem. Ut nemo sint itaque qui harum. Id unde qui architecto praesentium quo adipisci vero. Eaque deserunt voluptatum delectus eveniet quas aut modi quo. Exercitationem non voluptatem temporibus.

<div class="rvt-panel">
    <p class="rvt-m-all-remove">Voluptates quas voluptas a est est ut nisi. Laborum debitis perferendis voluptatem. Ut nemo sint itaque qui harum. Id unde qui architecto praesentium quo adipisci vero. Eaque deserunt voluptatum delectus eveniet quas aut modi quo. Exercitationem non voluptatem temporibus.</p>
</div>

Light modifier

You can also create a panel with a white background by adding the rvt-panel--light modifier. The light panel can be used when your application has a light gray background.


<div class="rvt-panel rvt-panel--light">
    <p class="rvt-m-all-remove">Voluptates quas voluptas a est est ut nisi. Laborum debitis perferendis voluptatem. Ut nemo sint itaque qui harum. Id unde qui architecto praesentium quo adipisci vero. Eaque deserunt voluptatum delectus eveniet quas aut modi quo. Exercitationem non voluptatem temporibus.</p>
</div>