All Widget Styles

This page displays all widget styles, which are used in this document. Widget styles are reusable, centrally managed sets of style properties. If you change one of the property selections in the widget style, the change will be applied to all widgets using that style. You can find more information about how you can style widgets here: https://docs.axure.com/axure-rp/reference/styling-widgets/


The Default, Flow and Icon Library are used for this document. Please note that your widget style changes has an effect to these libraries. You can find more information about widget libraries here: https://docs.axure.com/axure-rp/reference/widget-libraries/

Box 1

Box 2

Box 3

  • Lightbox
  • Scroll bar background

Flow Background

  • Backgrounds in Flow Diagrams

Flow Shape 1

Flow Shape 2

Flow Shape 3

  • Rectangle in Flow Diagrams
  • Rectangle in Flow Diagrams
  • Rectangle in Flow Diagrams
  • Boxes, e.g. Order Summary, Buyer, Invoice in Order Details
  • Buyer Approval Box in Apprvoal and Requisition Details
  • Widgets in Welcome Page
  • Units in text fields (input group text)
  • Scroll bar

Ellipse

  • My Account Navigation in Welcome page

Placeholder

  • Captcha
  • Header and Footer

Button

Primary Button

  • Secondary Button
  • Primary Button
  • Detail Links
  • Navigation Links, e.g. Continue Shopping or Back to List

Button Mouse Over

Primary Button Mouse Over

Button Disabled

Primary Button Disabled

This in a text link in a paragraph.

  • All links in a text
  • Note: Same style effects like link button

Heading 1

Heading 2

Heading 3

Heading 4

  • Page Heading
  • Section Heading in pages
  • Box Heading
  • Lightbox Heading

Common

Label

  • Form Labels
  • Text Labels

Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.

  • All text places with multiple lines
  • All lines in lists or tables

Forms

Info - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.

  • Hints or help text
  • Less important text

Text Field

This is a form hint.

Text Field Disabled

This is a form hint.

Text Area

All form fields use same styles:

  • Disabled Style: Form Disabled
  • Hint Style: Form Hint


Error styles are separated widget styles.

Droplist

Text Field Danger

This is a form hint.

This is an error message.

Text Area Danger

Droplist Danger

Table Header 1

Table Header 2

Table Header 3

Column 1

Column 2

Column 3

u97_menu

Menus and Table

  • My Account Menu
  • Table Header and Table Cell widget style is used for all tables.

Flow

Icons, Action cons, Badges, Alerts and Progress Bars

  • Generell icons, e.g. arrows in scroll bar
  • All clickable icons
  • Icons for error messages, e.g. in forms or alerts
  • Icons for success messages, e.g. in forms or alerts

Success - This is an alert.

Info - This is an alert.

Danger - This is an alert.

Background

80%

105%

  • Success messages
  • Info messages
  • Progress bars
  • Error messages

Tab 1

Tab 2

Disabled Tab

  • Tabs, e.g. Requisition and Approval list

Tab Hover

Product Tile

$99.99

Free Shipping!

  • Product Link
  • Product Promotion
  • Product Price
  • Product Price Strikethrough

Badge 1

  • Status and Roles

$99.99

Badge 2

40%