Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia nec risus ut pulvinar. Aliquam pretium libero ac sagittis dapibus. Nunc bibendum pulvinar mauris, nec ornare massa porta non. Maecenas vestibulum id ex laoreet posuere. Etiam nec lacus bibendum, ornare ligula ut, luctus metus.
Styleguide
Styleguide created for purpose to represet individual component available for use.
Grid
col-12
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1
Colors
jaguar red
#9E1B32
$jaguar-red
white
#FFFFFF
$white
c grey
#686868
$c-grey
c grey2
#AFB6BE
$c-grey2
c grey3
rgba(234,232,233,0.4)
$c-grey3
c grey4
#E4E8E9
$c-grey4
c grey5
#0C121C
$c-grey5
black
#000000
$black
yellow
#FFE600
$yellow
red
#9F0C0C
$red
red 2
#CF2B2C
$red-2
red 3
#F84C4C
$red-3
red 4
#D95353
$red-4
red 5
#C34342
$red-5
red 6
#9D3C50
$red-6
red 7
#AF6775
$red-7
light red
#FBE3E4
$light-red
light red 2
#FFF7F8
$light-red-2
light red 3
#FFE5E5
$light-red-3
light red 4
#F6D5D5
$light-red-4
light red 5
#F7F1F3
$light-red-5
light red 6
#C6A3A9
$light-red-6
light red 7
#D2C2C5
$light-red-7
Typography
Jaguar
Can be added via $jaguar SCSS variable
Jaguar Regular font-weight: $fw-normal;
Regular text is here.
Italic text is here.
Jaguar Bold font-weight: $fw-bold;
Regular text is here.
Italic text is here.
Jaguar ExtraBold (Black) font-weight: $fw-black;
Regular text is here.
Italic text is here.
Proxima Nova
Can be added via $proximanova SCSS variable
Proxima Nova Light font-weight: $fw-light;
Regular text is here.
Italic text is here.
Proxima Nova Regular font-weight: $fw-regular;
Regular text is here.
Italic text is here.
Proxima Nova Semibold font-weight: $fw-semibold;
Regular text is here.
Italic text is here.
Proxima Nova Bold font-weight: $fw-bold;
Regular text is here.
Italic text is here.
Helvetica Neue
Can be added via $helvetica SCSS variable
Helvetica Neue Thin (Light) font-weight: $fw-light;
Regular text is here.
Italic text is here.
Helvetica Neue Regular font-weight: $fw-normal;
Regular text is here.
Italic text is here.
Helvetica Neue Bold font-weight: $fw-bold;
Regular text is here.
Italic text is here.
Myriad Pro
Can be added via $myriad SCSS variable
Myriad Pro Regular font-weight: $fw-normal;
Regular text is here.
Italic text is here.
Myriad Pro Bold font-weight: $fw-bold;
Regular text is here.
Italic text is here.
Headings
Homepage block H1
Homepage block H2
This is an H1 tag.
This is an H2 tag
This is an H3 tag.
This is an H4 tag.
This is an H4 tag in pod header.
This is an H4 tag in my-build.
This is an H5 tag.
This is an H5 tag in gray.
This is an H6 tag.
Sprites
To include sprite simply use '@include sprite($sprite-png-file-name)'
To add badge use <span class="badge">NUMBER</span>
Example: 2
Info badges:
Edit:
Default Sprites
| Mixin name | Image | Image on dark background |
| action-collapse-dark |  |
|
| action-collapse-light |  |
|
| action-collapse | |
|
| action-expand-dark |  |
|
| action-expand-light |  |
|
| action-expand | |
|
| add-icon |  |
|
| aftersales-icon |  |
|
| arrow-down-dark |  |
|
| arrow-right-dark |  |
|
| back-to-top-arrow |  |
|
| cart-icon |  |
|
| check-black |  |
|
| check-bold |  |
|
| check-icon |  |
|
| check-mark |  |
|
| click-to-buy-icon |  |
|
| close-dark-small-padding |  |
|
| close-dark-small |  |
|
| close-dark |  |
|
| close-light-small |  |
|
| close-light |  |
|
| close |  |
|
| disabled-search |  |
|
| download |  |
|
| dropdown-arrow-down |  |
|
| dropdown-arrow-up |  |
|
| facebook-homepage-black |  |
|
| facebook-homepage |  |
|
| folder-icon |  |
|
| footer-arrow-down |  |
|
| footer-arrow-right |  |
|
| footer-facebook-icon |  |
|
| footer-instagram-icon |  |
|
| footer-twitter-icon |  |
|
| green-accept |  |
|
| haggling-icon |  |
|
| i-icon-dark |  |
|
| i-icon-small |  |
|
| i-icon |  |
|
| instant-valuation-icon |  |
|
| learn-more |  |
|
| my-account |  |
|
| nav-actions-back-dark |  |
|
| nav-actions-back-light |  |
|
| nav-actions-next-dark |  |
|
| nav-actions-next-light |  |
|
| numbered-navigation-next |  |
|
| numbered-navigation-prev |  |
|
| payments-icons |  |
|
| pencil-icon-white |  |
|
| pencil-icon |  |
|
| play |  |
|
| printer-icon |  |
|
| question |  |
|
| radio-checked |  |
|
| radio-unchecked |  |
|
| range-slider-handler |  |
|
| range-slider |  |
|
| red-x |  |
|
| reset-icon |  |
|
| safe-icon |  |
|
| scroll-bar-horizontal |  |
|
| scroll-bar-vertical |  |
|
| search |  |
|
| slider-back |  |
|
| slider-next |  |
|
| switch-disabled |  |
|
| switch-enabled |  |
|
| tooltip-corner-bottom |  |
|
| tooltip-corner-top |  |
|
| twitter-homepage-black |  |
|
| twitter-homepage |  |
|
| validation-error |  |
|
| vehicle-icon |  |
|
| view-more-arrow |  |
|
| warning |  |
|
| youdrive-icon |  |
|
Sprites
| Mixin name | Image | Image on dark background |
| cart-icon |  |
|
| check-bold |  |
|
| close-dark |  |
|
| disabled-search |  |
|
| download |  |
|
| haggling-icon | |
|
| my-account |  |
|
| nav-actions-back-light |  |
|
| nav-actions-next-light |  |
|
| np-compare-dark-small |  |
|
| np-compare-light-small |  |
|
| np-filter-light-small |  |
|
| pencil-icon |  |
|
| radio-checked |  |
|
| radio-unchecked |  |
|
| scroll-bar-horizontal |  |
|
| search |  |
|
| slider-back-grey |  |
|
| slider-back |  |
|
| slider-next-grey |  |
|
| slider-next |  |
|
| switch-disabled |  |
|
| switch-enabled |  |
|
| vehicle-icon |  |
|
Buttons
Alerts / Notifications
Form elements
Form, labels and inputs use standard syntaxis and don not require any changes by default.
To disable input field simply add disabled="disabled" to the field
For failed validation we use class="validate-error"
For error message we use class="validation-error-msg"
To disable search field add disabled="disabled" to BOTH input and button
Examples
Input fields and form
Textarea is empty
Tabs
Example 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.
asdfasdfetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.
asdfasdfetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.asdfasdfetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.
Example 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.
asdfasdf dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.
Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.
Example 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.
asdfasdf dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.
Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.
Tooltips
First tooltip contents are here
Second tooltip contents are here
Action elements
Dropdown
Grey Dropdown
Disabled
Yes / No sliders
Checkboxes
Range Sliders
Tables
Regular table
| Order # | Date | Ship To | Total | Status |
|---|---|---|---|---|
| 100000068 | 05/04/14 | Marc Acosta | $1024.45 | Pending |
| 100000068 | 05/04/14 | Marc Acosta | $1024.45 | Pending |
| 100000068 | 05/04/14 | Marc Acosta | $1024.45 | Pending |
Responsive table
| Order # | Date | Ship To | Total | Status | |
|---|---|---|---|---|---|
| 100000068 | 05/04/14 | Marc Acosta some longer text. Even more text. | $1024.45 | Pending | Reorder |
| 100000068 | 05/04/14 | Marc Acosta some longer text. Even more text. | $1024.45 | Pending | Reorder |
| 100000068 | 05/04/14 | Marc Acosta some longer text. Even more text. | $1024.45 | Pending | Reorder |
Mono table
| Some text 100000068 222 |
| Some text 100000068 222 |
| Some text 100000068 222 |
Borderless
| Order # | Date | Ship To | Total | Status | |
|---|---|---|---|---|---|
| 100000068 | 05/04/14 | Marc Acosta some longer text. Even more text. | $1024.45 | Pending | Reorder |
| 100000068 | 05/04/14 | Marc Acosta some longer text. Even more text. | $1024.45 | Pending | Reorder |
| 100000068 | 05/04/14 | Marc Acosta some longer text. Even more text. | $1024.45 | Pending | Reorder |
Zebra
| 36 monthly payments of | N/A |
| Cash Price / Rockar Cash Price | N/A |
| Finance Deposit Contribution | N/A |
| Customer deposit | N/A |
| Total Deposit | N/A |
| Amount of credit / Balance to pay | N/A |
| Interest charges | N/A |
| Fees | N/A |
| Optional Final Payment | N/A |
| Total amount payable / Total Cash Price | N/A |
| Duration of agreement | N/A |
| Interest rate (fixed) (% per annum) | N/A |
| Representative APR (%) | N/A |
| Annual Contract Mileage | N/A |
| Excess mileage charge (in pence per mile) | N/A |
Compare
| Feature #1 | data | data | data |
|---|---|---|---|
| Feature #2 | data | data | data |
| Feature #3 | data | data | data |
| Feature #4 | data | data | data |
| Feature #5 | data | data | data |
Scrollbars
Create < app-scrollbox > element and put contents inside of it.
Additionally you can pass the following parameters:
- :scrollbox-width - just string value to set scrollbox width (default value: 100%)
- :scrollbox-height - just string value to set scrollbox height (default value: 100%)
- :class-name - class name that is used to init scrollbox
- :allow-horizontal - boolean flag that is telling if we need to allow horizontal scrolling
Just add class "scrollbox".
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
Just add class "scrollbox".
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.
Popup / Modal
This is basic text modal
This is example heading text
Homepage Card
Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque cum debitis dolore ea eius est harum illo numquam, provident quas repellat vel veniam. Incidunt neque nihil officia similique sunt!
Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque cum debitis dolore ea eius est harum illo numquam, provident quas repellat vel veniam. Incidunt neque nihil officia similique sunt!
Breadcrumbs
Hero Unit
In order to create and use hero unit you should use following html:
<div class="hero hero-ALIGNMENT images-wrap">
<img src="BACKGROUND_IMAGE_URL" alt="IMAGE_ALT">
<div class="hero-inner">
<a href="" class="hero-logo">
<img src="IMAGE_URL" alt="IMAGE_ALT">
</a>
<div class="hero-copy">
<h1>HERO_SHORT_DESC</h1>
<p>IMAGE_LONG_DESC.</p>
</div>
</div>
</div>
Replace ALIGNMENT with the position of text and logo you require: left/center/right
It is important you add images-wrap class to main block followed by link to the background image
Optionally you can add background to the text. In order to do that add custom-bg-YOUR_COLOR to the same div where hero-copy class is.
If you're not happy with default text alignment you can also add align-TEXT_ALIGNMENT to the same div where hero-copy is
Text in center
Welcome to
Rockar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Welcome to
Rockar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Text on left
Welcome to
Rockar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Welcome to
Rockar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Text on right
Welcome to
Rockar
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Side Image
Example:
Topic Name
Message with a gradient image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.
To switch image to the other side simply add side-right to the images-wrapper
Topic Name
Message with a gradient image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error. Eaque commodi, dicta quidem explicabo mollitia inventore quibusdam.
Calendar
Slider
Slider uses 3 componenets and accept multiple attributes:
- <app-slider :width="800" :height="267"> - width and height attribute in px
- <sl-slide id="slider_text1" image="url"> - id reference to the text element of the slider. image link to the image file
- <sl-text id="slider_text1" :left="600" :top="240" class="custom_class"> - id is the ID that we set inside <sl-slide> for the text element. left and top is the horizontal and vertical position of the text on the slide. You can also set custom class with the class attribute.
Selects
Select (select-1)
Select (select-2)
Select (select-3)
Accordion
Blank Accordion
There can be added any content, for example
Button
Light accordion
There can be added any content, for example
Button
Driveline
| Engine | Driveline | Transmission | Power (kW/HP) | Torque (Nm) | Maximum Torque (rpm) | Capacity | No. of cylinders |
|---|---|---|---|---|---|---|---|
|
3.0 Litre TDV6 Diesel |
Four Wheel Drive (4WD) | 8 speed | 190/285 | 600 | 2.000 | 2.993 | 6 |
|
4.4 Litre SDV8 Diesel |
Four Wheel Drive (4WD) | 8 speed | 250/339 | 740 | 1.750-2.250 | 4.367 | 8 |
Timepicker
Styling for unavailable days, no functionality
Add .not-available class to td element