Table of contents

• Above component
  • Above: Core
  • Above: Modifiers
    • Transitions
    • Modals
    • Drawers
    • Customization examples
• Notification component
  • Notification: Core
  • Notification: Modifiers
    • Width and position
    • Transition: slide
    • Transition: fade
  • Scripted Notification
    • Scripted Notification: options
• Drop component
  • Drop: Core
  • Drop: Modifiers
• Overlay component
• Spinner component

Above component

above component’s purpose is to display an element above the current page content (imagine a modal dialog box or a drawer type sliding menu).

Above: Core

See the Pen Reveal Basis - Above - Core by Serge Mazille (@sergemazille) on CodePen.

Above: Modifiers

Transitions

See the Pen Reveal Basis - Above - Modifiers - transitions by Serge Mazille (@sergemazille) on CodePen.

Modals

See the Pen Reveal Basis - Above - Modifiers - modals by Serge Mazille (@sergemazille) on CodePen.

Drawers

See the Pen Reveal Basis - Above - Modifiers - drawers by Serge Mazille (@sergemazille) on CodePen.

Customization examples

See the Pen Reveal Basis - Above - themes examples by Serge Mazille (@sergemazille) on CodePen.

Notification component

notifications are alerting components types. A notification can be displayed as a feedback when the website user has performed an operation (eg. successful login).

Notification: Core

See the Pen Reveal Basis - Notification - Core by Serge Mazille (@sergemazille) on CodePen.

Notification: Modifiers

Width and position

See the Pen Reveal Basis - Notification - Modifiers - position and width by Serge Mazille (@sergemazille) on CodePen.

Transition: slide

See the Pen Reveal Basis - Notification - Modifiers - Transitions: slide by Serge Mazille (@sergemazille) on CodePen.

Transition: fade

See the Pen Reveal Basis - Notification - Modifiers - Transitions: fade by Serge Mazille (@sergemazille) on CodePen.

Scripted Notification

See the Pen Reveal Basis - Notification - Scripted by Serge Mazille (@sergemazille) on CodePen.

Scripted Notification: options

See the Pen Reveal Basis - Notification - Scripted - options by Serge Mazille (@sergemazille) on CodePen.

Drop component

drop component’s purpose is to display a hidden element near the triggering element (eg. a dropdown menu).

Drop: Core

See the Pen Reveal Basis - Drop - Core by Serge Mazille (@sergemazille) on CodePen.

Drop: Modifiers

See the Pen Reveal Basis - Drop - Modifiers by Serge Mazille (@sergemazille) on CodePen.

Overlay component

See the Pen Reveal Basis - Overlay by Serge Mazille (@sergemazille) on CodePen.

Spinner component

See the Pen Reveal Basis - Spinner by Serge Mazille (@sergemazille) on CodePen.