PrestaShop UI Kit

Typography
Content
Images
Tables
Alerts
Breadcrumb
Toolbar
Buttons
Dropdowns
Forms
Input group
List group
Modal
Nav tabs
Nav pills
Pagination
Tag & PS-tagger
Tooltips
Search form

@todo:

Design:
- Auto-complete select
- Badges
- Cards
- Popovers
- Progress
- Spinner
Dev:
- Dynamics feedback
- Input dynamic
- Date picker
- Search form (with & without dropdown)

Typography

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

p-style h1. Bootstrap heading

p-style h2. Bootstrap heading

p-style h3. Bootstrap heading

p-style h4. Bootstrap heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad alias commodi corporis dignissimos, incidunt modi nam vitae? Cumque deserunt et incidunt non nulla obcaecati officiis quisquam quos saepe sit. A link bold & primary color

Content

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

attr

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title


                <p>Sample text here...</p>
                <p>And another line of sample text here...</p>

                
                    <p>Sample text here...</p>
                    <p>And another line of sample text here...</p>

y = mx + b

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

This text is meant to be treated as sample output from a computer program.

Images

A generic square placeholder image with rounded corners in a figure. — A caption for the above image.

Tables

Basic

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
3	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Hoverable

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

With Form

First Name	Last Name	Username
Mark	Otto	@mdo
Jacob	Thornton	@fat
Larry	the Bird	@twitter

With Filters

First Name	Last Name	Username

Mark	Otto	@mdo
Jacob	Thornton	@fat
Larry	the Bird	@twitter

Sortable

ID	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Dark

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Dark with head

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Dark striped

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Dark bordered

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
3	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Dark hoverable

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bootstrap

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
3	Maxime	de Biloe	@mbiloe
3	Thomas	de Nabord	@quezalcot

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
3	Maxime	de Biloe	@mbiloe
3	Thomas	de Nabord	@quezalcot

Alerts

This is a info alert with an example link.

This is a success alert with an example link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendis varius mauris tellus, et dapibus velit posuere in. Maecenas quis ipsum tellus. Praesent in hendrerit nunc imperdiet in. Ut id feugiat erat, sed semper lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendis varius mauris tellus, et dapibus velit posuere in. Maecenas quis ipsum tellus. Praesent in hendrerit nunc imperdiet in. Ut id feugiat erat, sed semper lorem.

This alert has bullet points

One thing
Another thing

Alert with very long text. Closed by default...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius mauris tellus, et dapibus velit posuere in. Maecenas quis ipsum tellus. Praesent maximus tristique enim, in hendrerit nunc imperdiet in.

Vivamus nulla lectus, bibendum vel sodales ut, gravida quis turpis. Nunc neque neque, congue quis libero sit amet, mollis vulputate justo. Sed pretium mauris sed libero maximus volutpat. Quisque ultrices velit nec aliquet tincidunt.

Badges @TODO

Primary Primary Status Primary hover Success Success Status Success hover Danger Danger hover Warning Warning hover Info Info hover

Floating

Button

Buttons

Text/transparent button

Anchor button

This is a link This is a link

Buttons with icons

Tooltips

| | |

| | |

External link

This is another beautiful link

Colored buttons

Button group

Button group with radio handling

Radio 1 (preselected) Radio 2 Radio 3

Dropdowns

Drop up

Variations

Split button dropdowns

Dropdown menu content

Cards @TODO

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

Lorem ipsum sit dolor amet

89,99 €

Discover

Lorem ipsum sit dolor amet

89,99 €

Discover

Forms

Success input

This is a success label

Warning input

This is a warning label

Danger input

This is a danger label

Success input with helper I'm here to help the user.

This is a success label

Success input with helper I'm here to help the user.

This is a success label

Input group

@example.com

https://example.com/users/

.00

$ 0.00

@example.com

https://example.com/users/

.00

$ 0.00

List group

Cras justo odio Dapibus ac facilisis in Ang Lorem Ipsum Morbi leo risus gumagamit na ngayong bilang Porta ac consectetur ac Vestibulum at eros

Cras justo odio Dapibus ac facilisis in 39 Ang Lorem Ipsum Morbi leo risus 124 gumagamit na ngayong bilang 57 Porta ac consectetur ac 42 Vestibulum at eros

Nav tabs (works with background)

Aliquam erat volutpat. Nunc eleifend leo vitae magna. In id erat non orci commodo lobortis. Proin neque massa, cursus ut, gravida ut, lobortis eget, lacus. Sed diam. Praesent fermentum tempor tellus. Nullam tempus. Mauris ac felis vel velit tristique imperdiet. Donec at pede. Etiam vel neque nec dui dignissim bibendum. Vivamus id enim. Phasellus neque orci, porta a, aliquet quis, semper a, massa. Phasellus purus. Pellentesque tristique imperdiet tortor. Nam euismod tellus id erat.

Nullam eu ante vel est convallis dignissim. Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede. Sed bibendum. Aliquam posuere. Nunc aliquet, augue nec adipiscing interdum, lacus tellus malesuada massa, quis varius mi purus non odio. Pellentesque condimentum, magna ut suscipit hendrerit, ipsum augue ornare nulla, non luctus diam neque sit amet urna. Curabitur vulputate vestibulum lorem. Fusce sagittis, libero non molestie mollis, magna orci ultrices dolor, at vulputate neque nulla lacinia eros. Sed id ligula quis est convallis tempor. Curabitur lacinia pulvinar nibh. Nam a sapien.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, distinctio eligendi error ex fuga fugiat, ipsam magnam obcaecati officia perferendis praesentium, repudiandae sequi sit soluta sunt unde voluptate voluptatum! Nesciunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias amet asperiores delectus, dolorum est fugiat ipsum nam natus non obcaecati perspiciatis quam quis tempore temporibus. Debitis dolore incidunt omnis!

Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo. Vestibulum convallis, lorem a tempus semper, dui dui euismod elit, vitae placerat urna tortor vitae lacus. Nullam libero mauris, consequat quis, varius et, dictum id, arcu. Mauris mollis tincidunt felis. Aliquam feugiat tellus ut neque. Nulla facilisis, risus a rhoncus fermentum, tellus tellus lacinia purus, et dictum nunc justo sit amet elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet aperiam commodi, deserunt harum in maxime odit placeat sapiente velit! Accusamus asperiores dolore facere laboriosam necessitatibus perferendis ullam unde, veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus, amet delectus deleniti distinctio est ipsum labore laborum maxime modi nesciunt obcaecati quibusdam quidem quod rem saepe vel! Culpa, quos.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt dicta dolorum eveniet, exercitationem impedit minima nemo perspiciatis repellendus voluptatum. Debitis est in nulla, quo saepe sequi vel! Dignissimos, incidunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque suscipit, voluptatum! A ab accusantium adipisci, autem beatae consectetur doloribus ducimus eveniet explicabo harum, iure iusto laboriosam quas similique ullam voluptas.

Nav pills (works without background)

Pagination

Pagination with jump to page

Popovers @TODO

Progress @TODO

25%

50%

75%

100%

Ps-tagger (Old, jQuery-based)

Type your tags

Ps-tags

Sample tag Another sample

PrestaShop UI Kit

Table of Contents

@todo:

Typography

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

Content

Images

Tables

Basic

Striped

Bordered

Hoverable

With Form

With Filters

Sortable

Dark

Dark with head

Dark striped

Dark bordered

Dark hoverable

Bootstrap

Alerts

Badges @TODO

Breadcrumb

Floating

Button

Toolbar

Buttons

Buttons

Text/transparent button

Anchor button

Buttons with icons

Tooltips

External link

Colored buttons

Button group

Button group with radio handling

Dropdowns

Drop up

Variations

Split button dropdowns

Dropdown menu content

Cards @TODO

Card title

Card subtitle

Card title

Card title

Lorem ipsum sit dolor amet

89,99 €

Lorem ipsum sit dolor amet

89,99 €

Forms

Input group

List group

Modal

Nav tabs (works with background)

Nav pills (works without background)

Pagination

Pagination with jump to page

Popovers @TODO

Progress @TODO

Ps-tagger (Old, jQuery-based)

Ps-tags

Spinner @TODO

Search form