PrestaShop UI Kit




Table of Contents

@todo:




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

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

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

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

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

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.
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 Input text
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

Badges @TODO

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

Toolbar

Buttons

Buttons











Text/transparent button



Anchor button

This is a link ac_unit This is a link



Buttons with icons











Tooltips



delete | delete | delete | delete

Left | Top | Bottom | Right

External link

This is another beautiful link

Colored buttons

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 image cap

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 image cap

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

Forms



I'm here to help the user.
I'm here to help the user.












Description for a small on-off switch
Description for a normal on-off switch
Description for a large on-off switch
Description for a disabled on-off switch








I'm here to help the user.
I'm here to help the user.












Description for a small on-off switch
Description for a normal on-off switch
Description for a large on-off switch
Description for a disabled on-off switch










This is a success label

This is a warning label

This is a danger label

I'm here to help the user.
This is a success label
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

Pagination

Pagination with jump to page

Popovers @TODO

Progress @TODO

25%

50%

75%

100%

Ps-tagger (Old, jQuery-based)

Ps-tags

Spinner @TODO

 
 
 
 
 
 

Search form @TODO