# Components - [Provider](#provider) - [General Components](#general-components) - [Layout](#layout) ## Provider You need to wrap your entire code using Pur with this component. An alternative theme can be passed through its `theme` property. ```jsx Hello Pur // or const alternativeTheme = { colors: { primary: 'yellow', }, }; Hello Pur ``` - **theme**, *Object*: alternative theme. Check `/src/theme.js` for more further details ## General Components ### A A simple hypertext. ```jsx My Twitter Account ``` - **underlined**: add `text-decoration: underline` to your link - **noHover**: get rid of the `:hover` effect ### Alert Perfect for flash messages. ```jsx Maybe I should give this library a try. ``` Compatible with every theme color (`primary`, `danger`, ...). Default style is applied if no color indication is given. ### Badge Show extra information using badges. ```jsx New ``` - **pill**: increase the badge's border radius ### Brand Meant to be used inside a `NavBar`. ```jsx Pur ``` ### Breadcrumb A simple breadcrumb component. ```jsx Home News National Day in San Francisco ``` ### BreadcrumbItem Child for `Breadcrumb`. ```jsx Home ``` - **active**: set a lighter text color ### Button A ` ``` - **block**: make it 100% wide - **disabled**: look unclickable - **large**: bigger `padding`, bigger `font-size` - **outline**: no background, only border - **pill**: rounded button - **small**: smaller `padding` and `font-size` ### ButtonGroup A group of `Button`. ```jsx ``` - **vertical**: horizontal direction by default. Make it vertical ### Card A card component. ```jsx Science Reading the Headlines About Vegetarians and Depression is... Joel Kahn Aug 14 · 4 min read ``` - **border**: add a light border - **fluid**: influence its `height`. Will try to fit the entire available space - **rounded**, *Number* (default to `4`, `4px`): set the card's `border-radius` - **shadowed**: deeper look ### Code A simple `code` wrapper. I don't even recommend you to use it. It simply bring some `padding` and a light-gray background. Up to you! ```jsx console.log(64); ``` ### Cover Useful for `background-image`'d components. Set `cover` value for both `background-size` and `background-position`. ```jsx ``` ### Fixed Fixed container. ```jsx Hi ``` - **bottom**: `bottom: 0` - **left**: `left: 0` - **right**: `right: 0` - **top**: `top: 0` ### H1, H2, H3, H4, H5, H6 Simple wrappers for `h1`(28px)...`h6`(16px). ```jsx

Lead Title

Subtitle
``` ### Heading More flexible header. Default to 28px. Simply use `fontSize` to adapt it to your needs. ```jsx Lead Title ``` ### Img `img` wrapper. You can check the code, there's like 4 lines. ```jsx ``` ### Input A cool `input` for your forms. ```jsx ``` - **disabled**: low opacity, make it look disabled - **focused**: force `:focus` style - **pill**: round input corners - **small**: smaller `padding` and `font-size` ### InputGroup Got that Airbnb input group date and place selector in mind? That's the idea. Bring `Input`s together. ```jsx ``` - **shadowed**: deeper look ### InputHelp Extra indications for one specific field. Generate a `small`, `muted` element. ```jsx Your password must only use the @ character. ``` ### Label Input label. ```jsx // Advanced Usage { const displayed = (e.target.value.length > 0); this.setState({ displayed }); }} /> ``` - **invisible**: show/hide the label (you should try this one with the usage example above, it's cool) - **uppercased**: `text-transform: uppercase`, smaller `font-size` ### ListGroup Could also be called `List` actually. Contains `ListItem`s. ```jsx Show All Results... Top Result

Dunkirk: Original Mo...

Album · Hans Zimmer

 ``` - **hovered**: add `:hover` effect to `li` children when hovered ### ListItem `ListGroup` child. ```jsx Top Result ``` - **active**: darken item background - **disabled**: disabled state - **isHeader**: uppercased item, act as a separation mark between items ### NavBadge Meant to be used along `NavItem`. ```jsx Trips ``` ### NavBar Flex container, with vertically-aligned elements. ```jsx Pur Learn Pricing Team ``` ### Navigation Could be compared to `nav` but way more customizable. ```jsx // Itunes Style

Browse

New Music Playlists TV & Films Top Charts Genres Library For You Browse Radio Store All Pictures Videos ``` - **inverse**: darker version (replacing white with gray background colors) - **fluid**: set width to 100% - **underlined** (can't be used along `inverse`): add a thin and light bottom border ### NavItem `Navigation` child. ```jsx Browse ``` - **active**: active state, more colorful than other items - **cursor**: `cursor: 'pointer'` and smaller `opacity` - **filled**: fill the item with a strong background color, white text - **underlined**: add a colored bottom border ### P `p` wrapper, with no `margin` and `padding`. ```jsx

Hi

``` ### PageItem Child for `Pagination`. ```jsx 1 ``` - **active**: apply primary color by default - **disabled**: disabled state ### Pagination Well, a pagination component. Inspired from Bootstrap. ```jsx Previous 1 2 3 Next ``` ### Progress Container for `ProgressBar`. ```jsx ``` ### ProgressBar A quite usual progress bar. ```jsx // Handle inside text as well 40% ``` ### Select `select` tag wrapper. ```jsx ``` ### Small `small` wrapper. `font-size: 12px` by default. ```jsx You should never pour honey on cheese. Like never. ``` ### Star Star icon. Useful for ratings. "Empty"/gray-looking by default. ```jsx ``` - **checked**: bring some color to your star - **half**: only half a star for this one ### SubHeader Another `h2` wrapper. `font-size: 18px`. Not sure why... ```jsx This could literally be a subtitle ``` ### Submit `` wrapper. ```jsx ``` - **block**: set width to `100%` - **disabled**: disabled state for an `input` ### Text `span` wrapper. Useful if you quickly need to apply theme colors to a text. ```jsx Beware! ``` ### TextArea `textare` wrapper. ```jsx