Playground :: Box :: OpenProject Lookbook

How To Use
- Layout
- Forms
- Autocompleters
- Dialogs
- Menu And Navigation
- Flash Banner
- Flash Modal
- Colors
- Settings Pages
- - Modals
- Icons
- - Typography
  - Op Icons
  - Colors
  - Spacings
  - Shadows
  - Focus

No matching results.

- - Attribute
  - - Single
    - Range
  - - Default
    - With Dynamic Margins
  - Loading Indicator
  - - Default
    - German Locale
  - Rich Text
  - - Default
    - Playground
- - Advanced Filters
  - Attribute Group
  - - Default
    - Secondary
    - Border Only
  - - Default
    - Highlight
    - Alternative Highlight
    - Danger
    - Active
    - Transparent
    - Sizes
    - Link Like
  - Collapsible Section
  - Context Menu
  - Contextual Info Text
  - Danger Zone
  - - Default
    - Bordered
    - Bordered Compressed
    - Collapsible
    - Controls
    - Field Types
    - Field Widths
    - Multiple Fields Per Row
    - Sections And Fieldsets
    - Vertical Layout
    - Wide Labels
  - Links
  - - Default
    - Danger Zone
  - - Default
    - Detailed View
  - - Default
    - Off
  - Pagination
  - Progress Bar
  - - Default
    - No Ellipse
    - Footer
    - No Content
  - - Default
    - With Radio Buttons
  - - Default
    - No Ellipse
    - Footer
    - No Content
  - - Info
    - Warning
    - Error
    - Success
    - Upload
  - - Default
    - With Form Elements
    - With Labelled Form Elements
  - - Default
    - Forms
  - Widget boxes
- - - Default
    - Manual Overwrite
- - - Default
    - With toggable filter section
  - Filters
- - Frame
  - Stream
- - - Default
    - As Link
  - - Default
    - Primer
  - - Default
    - Success
    - Danger
    - Unique Key
    - Button
  - Form
- - - Work Based
    - Status Based
- - - Gate
    - Stage
- - Sort By
- - - Project Query
    - Work Package
- - - Default
    - Sizes
- - Info Line
  - - - New
      - Edit
  - Split View
  - Status Badge
  - Status Button

No matching results.

<div data-view-component="true">Playground</div>

No notes provided.

render(Primer::Box.new) { content }

Param	Description	Input
Content	—

Embed Code

what's this?

<lookbook-embed app="https://qa.openproject-edge.com/lookbook/" preview="Primer::BoxPreview" scenario="playground"></lookbook-embed>

Embed URL

what's this?

https://qa.openproject-edge.com/lookbook/embed?props=%7B%22preview%22%3A%22Primer%3A%3ABoxPreview%22%2C%22scenario%22%3A%22playground%22%7D

Pages

No matching results.

Previews

No matching results.