Prendus Styling Examples

This page has several examples of elements you can use in your designs as long as you correctly import prendus-styles. See the guidelines for more information.

Layout

Containers

Vertical Container

Default spacing for a vertical container.

Horizontal Container

Default spacing for a horizontal container.

Cards

Instead of using <paper-card>, you should usually use the Prendus card style.

Buttons

General

Default

The default button style. Should be included everywhere a button is used.

With icons

Buttons can have icons inside them as well as text. The span element is required.

Recommended

Used to recommend an action to the user.

Minor

Used for closing dialogs or other small actions.

Destructive

Used to warn users that the action triggered by the button cannot be undone.

Big

Used sparingly in calls to action (such as on the home page).

Link buttons

Button tags that need to look like anchor tags. Use sparingly.

Icon buttons

Additional feedback for icon buttons.

Drop-downs

Generic drop-down

Used for menus and drop-down selections.

You need to import the <prendus-drop-down> component in order to use it.