This is Magento 2 Theme Frontend Rapid demo store. No orders will be fulfilled.

Divante Uikit!

All customizable variables: theme-frontend-rapid/web/css/source/_theme.less
or if they do not exist in _theme.less they can be here: lib/web/css/source/lib/variables
or directly in modules files.

Buttons

Element View Default or Custom
Link "a" View and shop now <a href="#">View and shop now</a> Default Magento
Button "button" (magento secondary) <button><span>Button</span></button> Default Magento
Button "button.action.primary" <button class="action primary"><span>Primary</span></button> Default Magento
Link as a button "a.action.primary" Link as a button <a href="#" class="action primary">Link as a button</a> Default Magento
Link as a button "a.as-button" Link as a button <a href="#" class="as-button">Link as a button</a> Custom Divante
Button "button.action.on-dark-bg"
<button class="action on-dark-bg"><span>On dark bg</span></button>
Custom Divante
Link "a.action.on-dark-bg" <a href="#" class="action on-dark-bg">Link as a button On dark bg</a> Custom Divante
Button as a link "button.as-link" <button class="as-link">Button as a link</button> Custom Divante
Button small <button class="size-small"><span>Button</span></button>
<button class="action primary size-small"><span>Primary</span></button>
<a href="#" class="action on-dark-bg size-small">Link as a button On dark bg</a>
Link as a button <a href="#" class="as-button size-small">Link as a button</a>
Custom Divante
Button large <button class="size-large"><span>Button</span></button>
<button class="action primary size-large"><span>Primary</span></button>
<a href="#" class="action on-dark-bg size-large">Link as a button On dark bg</a>
Link as a button <a href="#" class="as-button size-large">Link as a button</a>
Custom Divante


Forms

Element View
Label
Input Text
Input Text Disabled
Input Text Error
This field is required.


Select
Select Disabled
Select Error
This field is required.


Input Radio

Input Radio Disabled
Input Radio Checked
Input Radio Error
Input Radio Checked Disabled


Input Checkbox
Input Checkbox Disabled
Input Checkbox Checked
Input Checkbox Error
Input Checkbox Checked Disabled
Input Date
Input Date Disabled
Input Date Error


Typography

Headings

Element View
H1

H1 Example

H2

H2 Example

H3

H3 Example

H4

H4 Example

H5
H5 Example
H6
H6 Example

Paragraphs

Element View
Lead "p" tag

Lorem Strong Em Link ipsum dolor sit amet, consectetur adipisicing elit.
Fuga illo laudantium magnam mollitia quisquam velit voluptatum!
Deserunt eaque quasi sed! Cupiditate deleniti dolorem molestias mollitia nostrum qui repudiandae tenetur voluptate.

Body - all tags - not in p tag
"div" element in this example
Lorem Strong Em Link ipsum dolor sit amet, consectetur adipisicing elit.
Fuga illo laudantium magnam mollitia quisquam velit voluptatum!
Deserunt eaque quasi sed! Cupiditate deleniti dolorem molestias mollitia nostrum qui repudiandae tenetur voluptate.
Blockquote "blockquote"
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Links "a" Link
Caption "caption" Default hidden in magento, can be specified directly for specific theme project.
Caption. Strong Em Link

Lists

Element View
Bullet "ul"
  • Bullet list
  • flks gkfmdl sdfsdf
    • Bullet list nested
    • fgdfgdfl
  • fdkl kldfg
Numbered "ol"
  1. Numbered list
  2. jkfd lfdg
    1. Numbered list nested
    2. lksdfl sdf
  3. lkrkg lkvmm fdsg
  4. lsdfjgkig


Messages

You need to choose options for your item.
Info message
An unknown error
Success message
Notice message


Pagination



Additional information

  • Theme uses fonts: 'icons-blank-theme' and 'FontAwesome'.

    Font family 'FontAwesome' is used by direct setting for particular element.

  • Buttons with Icons should be set using default magento less mixins or custom mixin ".includeFontAwesomeIcon" created directly for font awesome family.