Media Panels

MERCEDES-BENZ CLK COUPE
240 Elegance 2dr [2.6] Auto(2002 - 2005)
12,500 Miles

YH64 PLM

Panel with Tabular Data

Upgrade Now for £3.95 and reveal the hidden valuations

Upgrade

Average dealer retail£80,000
Average sales price£80,000

Breakdown of Running Costs

Upgrade Now for £3.95 and reveal the hidden valuations

Upgrade

Average dealer retail£80,000
Average sales price£80,000

Breakdown of Running Costs

Upgrade

Upgrade Now for £3.95 and reveal the hidden valuations

Average dealer retail£80,000
Average sales price£80,000

Breakdown of Running Costs

Upgrade Now for £3.95 and reveal the hidden valuations

Average dealer retail£80,000
Average sales price£80,000

Breakdown of Running Costs

Manual Vehicle Lookup:

Do you know the CAP ID of the vehicle?

Yes

CAP ID: Please enter a CAP ID

Select your vehicle:

Mileage:

Registration Date:

Select

Uses the Selectize plugin.

Default Select Box

States:


$('default-select').selectize();

Multi Select Box

States:


//The HTML select tag needs an attribute of "multiple"					
$('#select-state').selectize({
maxItems: 3
});

Default Select Box

Country:


$('#select-country').selectize();

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

Sample Text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Tabs

Tab Type 1

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida consectetur turpis sodales dignissim. Phasellus a vulputate orci, ut tincidunt turpis. Aliquam venenatis dui tempor nulla pellentesque porta. Nulla accumsan, ligula ac hendrerit mattis, ipsum nibh gravida dolor, vitae mattis urna enim sit amet mi. Nullam sit amet sapien velit. Fusce rutrum erat diam, varius pulvinar lectus finibus ac. Vivamus commodo sem urna, laoreet faucibus arcu pellentesque pretium.

Tab Type 2

Tab Type 3

Tab Type 4

Buttons

        
        Buttons
        Find Carâœ“
        View Sold
        View Sold
        View Sold
        View Sold
        View Stock
        Market InformationInformation icon
        Apr 23
        Apr 23
        List iconView List

Checkboxes

Checkbox

Radio Buttons

Radio Button Checked

Radio Button

Disabled

Panels

Buy Vehicle Profit: £1,125
At the selected buy and sell prices you should expect to make a healthy profit on this car.

Menu Bar

For simplicuty this is wrapped up into an Agular directive. The following attributes are needed on the parent div:

data-accordion-panel="open" (or closed)
data-accordion-panel-colour="green" (or blue)

The directive adds all other required classes and markup:

Retail Advertised Values

Vestibulum ut vestibulum purus, eu venenatis dolor. Fusce nec nunc convallis, auctor velit ac, condimentum mi. Suspendisse ut nulla tortor. Donec ullamcorper rutrum congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at finibus leo. Integer vel massa dui. Sed sapien ligula, porttitor vel varius non, consequat ut tortor.

        
        
        Retail Advertised Values
        Vestibulum ut vestibulum purus, eu venenatis dolor. Fusce nec nunc convallis, auctor velit ac, condimentum mi. Suspendisse ut nulla tortor. Donec ullamcorper rutrum congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at finibus leo. Integer vel massa dui. Sed sapien ligula, porttitor vel varius non, consequat ut tortor.

Retail Advertised Values



        Retail Advertised Values
        Vestibulum ut vestibulum purus, eu venenatis dolor. Fusce nec nunc convallis, auctor velit ac, condimentum mi. Suspendisse ut nulla tortor. Donec ullamcorper rutrum congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at finibus leo. Integer vel massa dui. Sed sapien ligula, porttitor vel varius non, consequat ut tortor.

Basic Table

The following table has these classes:

table - to apply the standard bootstrap styles
table-data - to center align the data columns

Derivative	12/20	18/30	24/40	30/50	36/60	42/70
316d ES 4dr Saloon (2012 ----) (ID: 53608)	00.00	00.00	00.00	00.00	00.00	00.00
316d ES 4dr Step Auto Saloon (2012 ----) (ID: 53609)	00.00	00.00	00.00	00.00	00.00	00.00
316d ES 4dr [Business Media] Saloon (2012 ----) (ID: 58291)	00.00	00.00	00.00	00.00	00.00	00.00

Table with Hover

The following table has these classes:

table - to apply the standard bootstrap styles
table-condensed - to reduce the padding of the table cells
table-hover - to add a hover effect on the table rows and columns
table-data - to center align the data columns

Derivative	12/20	18/30	24/40	30/50	36/60	42/70	48/80	54/90	60/100	66/110
316d ES 4dr Saloon (2012 ----) (ID: 53608)	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00
316d ES 4dr Step Auto Saloon (2012 ----) (ID: 53609)	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00
316d ES 4dr [Business Media] Saloon (2012 ----) (ID: 58291)	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00
316d ES 4dr Step Auto [Business Media] Saloon (2012 ----) (ID: 58292)	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00
316d ES 4dr [Professional Media] Saloon (2012 ----) (ID: 58293)	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00	00.00

Table with Inputs

Appraised Value
Clean
Average
Below
Retail

Sortable Table

The following table has these classes:

table - to apply the standard bootstrap styles
table-hover - to add a hover effect on the table rows and columns
tablesorter - to apply the table sorter functionality

Derivative	12/20	18/30	24/40	30/50	36/60	42/70
316d ES 4dr Saloon (2012 ----) (ID: 53608)	10.00	20.00	30.00	40.00	50.00	60.00
316d ES 4dr Step Auto Saloon (2012 ----) (ID: 53609)	02.00	03.00	05.00	02.00	01.00	00.00
316d ES 4dr [Business Media] Saloon (2012 ----) (ID: 58291)	10.00	20.00	40.00	20.00	40.00	03.00

Breadcrumbs

Steps Wizard

Tooltips

Here is text with a tooltip over the text.

Here is text with a tooltip under the text.

Alerts & Prompts

This is an error message

This is an alert message

This is a success message

Buy Vehicle Profit: £1,125
At the selected buy and sell prices you should expect to make a healthy profit on this car.

20 days
+1.05 +5.3%

31 days

33 days

23 days

15 days

Mileage

This uses an AngularJS directive of "mileage". This directive will apply the necessary HTML to display the mileage correctly.

Datepicker

Example 1:

Example 1:

$('input.datepicker').Zebra_DatePicker({format: "d-m-Y"});

Example 2:

Example 2:

        
$('input.datepicker-years').Zebra_DatePicker({
view: 'years',format: "d-m-Y"
});

Lists

23, Apr, 2014

This is a news headline...

23, Apr, 2014

This is a news headline...

23, Apr, 2014

This is a news headline...

Number Plates

WN59 Y0X

Lists

Tick List

This uses an Angular.js directive to inject the correct HTML into the list. All that is needed is the class of 'cap-list-tick'

Ready for the dealer to sell requiring little or no refurbishment
Mechanically sound


        FAQs
        What does "Trade in Clean" mean?
        A car that is "Trade in Clean" would meet these criteria:
        
        Ready for the dealer to sell requiring little or no refurbishment
        Mechanically sound

Sliders

Slider used: ion.rangeSlider

Double

        
        
			$("#example_1").ionRangeSlider({
				min: 0,
				max: 5000,
				type: 'double',
				gridMargin: 7
			});

Single

        
        
			$("#example_2").ionRangeSlider({
				min: 0,
				max: 5000,
				gridMargin: 7
			});

CAP Insights

Market Information

An overview of the marketplace will appear here

Market Information

There is a healthy marketplace with 100 exact cars within 50 miles.
With an average turnover of 25 days.

Days to sell

15 days
+1.05 +5.3%

Stock Information

This is a warning message

Ford Mondeo Diesel Hatchback £12,540
Ford Mondeo Diesel Hatchback £12,540
Ford Mondeo Diesel Hatchback £12,540
Ford Mondeo Diesel Hatchback £12,540
Ford Mondeo Diesel Hatchback £12,540
Ford Mondeo Diesel Hatchback £12,540
Ford Mondeo Diesel Hatchback £12,540

Preloaders

FORMS

Title:

First Name:

Surname:

Email Address:

First line of address:

Post Code:

Contact telephone number:

* We provide free car valuations to consumers. We're able to keep our service free by sharing our customers' personal information with other compaines that offer services relating to car ownership. Please confirm you give your permission for your details to be used in this way.

* You can read our full terms and conditions here

I agree to the terms and conditions

Content 1
Content 2

TABBED PANEL 1

This is some panel content

TABBED PANEL 2

This is some panel content

Title

This is a success message

Navigation

Media Panels

Panel with Tabular Data

Upgrade Now for £3.95 and reveal the hidden valuations

Breakdown of Running Costs

Upgrade Now for £3.95 and reveal the hidden valuations

Breakdown of Running Costs

Upgrade Now for £3.95 and reveal the hidden valuations

Breakdown of Running Costs

Upgrade Now for £3.95 and reveal the hidden valuations

Breakdown of Running Costs

VRM / Manual Lookup

Manual Vehicle Lookup:

Select

Default Select Box

Multi Select Box

Default Select Box

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

Sample Text

Tabs

Tab Type 1

Tab Type 2

Tab Type 3

Tab Type 4

Buttons

Buttons

Checkboxes

Radio Buttons

Panels

Menu Bar

Retail Advertised Values

Retail Advertised Values

Retail Advertised Values

Retail Advertised Values

Basic Table

Table with Hover

Table with Inputs

Sortable Table

Breadcrumbs

Steps Wizard

Tooltips

Alerts & Prompts

Mileage

Datepicker

Lists

23, Apr, 2014

23, Apr, 2014

23, Apr, 2014

Number Plates

Lists

Tick List

FAQs

What does "Trade in Clean" mean?

Sliders

Double

Single

CAP Insights

Market Information

Market Information Information icon

Days to sell

Stock Information

Preloaders

FORMS

TABBED PANEL 1

TABBED PANEL 2

Title

Title

Title

Market Information