Polish
Home Home
Offers Offers

New UI components from Storybook library

Page template issues

  • Banner image should not be mandatory, and should be after main <h1> heading in HTML source order.

Buttons (and styled links)

Grouped buttons

Primary text link Secondary text link

Text + icon buttons



Icons

  GRUX00001     GRUX00011     GRUX00012     GRUX00013  

Responsive grid layout

This is a "visual representation" of responsive grid. The layout reflows automatically without the need for any CSS media queries.

  • Grid item 1 - lots more content to demonstrate equal height columns
  • Grid item 2
  • Grid item 3
  • Grid item 4
  • Grid item 5

Content layout variations

Full-bleed content

Full-bleed container that extends 100% of browser viewport, irrespective of any "bleed" areas. For example, for hero banner components.

Dividing content into 2 columns

Column 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maiores quod dicta placeat sint fugiat porro similique, aspernatur omnis perferendis in et atque quam ratione vitae praesentium deleniti sunt. Minus?

Sit voluptatibus aliquid praesentium natus!

Column 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, expedita similique. Expedita cum iste aspernatur consequatur itaque hic nobis animi velit officia natus? Dolore delectus ea facilis nesciunt hic culpa.

Dividing content into 3 columns

Column 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel maiores quod dicta placeat sint fugiat porro similique, aspernatur omnis perferendis in et atque quam ratione vitae praesentium deleniti sunt. Minus?

Column 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, expedita similique. Expedita cum iste aspernatur consequatur itaque hic nobis animi velit officia natus? Dolore delectus ea facilis nesciunt hic culpa.

Column 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque accusamus reiciendis quasi nesciunt facere, eos temporibus similique pariatur illum a magni minus illo velit odio dolorem possimus est. Non, reprehenderit?

Images (responsive & lazy loaded)

[banner alt]

Gallery

Asymmetric layout

Banners

Banner with overlay

[banner alt]
Banner text large
Banner text small - lorem ipsum dolor sit amet consectetur adipisicing elit
 Primary CTA   Secondary CTA  Banner smallprint

Banner with CTA and overlay

[banner alt]    Primary CTA  
Banner text large
Banner text small - lorem ipsum dolor sit amet consectetur adipisicing elit
 Primary CTA   Banner smallprint 

Banner with clickable overlay

[banner alt]
Banner text large - this WHOLE overlay is CLICKABLE
Banner text small - lorem ipsum dolor sit amet consectetur adipisicing elit

Banners in a slider

Banner with video

Banner text large
Banner text small
 Primary CTA 

Promotions banners in a slider

Promotions

   View Promotions or News  

Cards

Default card

Quiet card

Card image top, left or right

Cards in a grid

Responsive media

Iframe with Google map

Iframe with YouTube video

Disclosure components

Show more | show less

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, totam molestiae. Soluta voluptatem deleniti excepturi laudantium. Officia at repudiandae quo nulla reiciendis optio modi nemo.

Accordion

Accordion title 1

Accordion content 1.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, totam molestiae. Soluta voluptatem deleniti excepturi laudantium. Officia at repudiandae quo nulla reiciendis optio modi nemo.

Accordion title 2

Accordion content 2.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, totam molestiae.

Accordion title 3

Accordion content 3.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, totam molestiae. Soluta voluptatem deleniti excepturi laudantium.

Tabs

Tab title 1

Tab content 1.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, totam molestiae. Soluta voluptatem deleniti excepturi laudantium. Officia at repudiandae quo nulla reiciendis optio modi nemo.

Test focusing on inline link.

Tab title 2

Tab content 2.

Test focusing on inline link.

Tab title 3

Tab content 3.

Test focusing on inline link.

Product card

Product overview card

Product cards in a grid

Sliders

Please note: some inline styles have been added to help differentiate each slide, as they all contain the same dummy content.

Slider autoplays, and shows 2 slides at a time

  • Slide 1 content...

    Component inside slide should dictate certain visual styles such as height | padding | etc.

    Test internal link is focusable.

  • Slide 2 content...

    Component inside slide should dictate certain visual styles such as height | padding | etc.

    Test internal link is focusable.

  • Slide 3 content...

    Component inside slide should dictate certain visual styles such as height | padding | etc.

    Test internal link is focusable.

  • Slide 4 content...

    Component inside slide should dictate certain visual styles such as height | padding | etc.

    Test internal link is focusable.

  • Slide 5 content...

    Component inside slide should dictate certain visual styles such as height | padding | etc.

    Test internal link is focusable.

Slider does not autoplay, and is configured to behave as a tabbed interface

  • 2nd slider - slide 1.




    Is this link clickable under tablist?

  • 2nd slider - slide 2.

  • 2nd slider - slide 3.

Swatch

Colour swatch

  • Exterior paint

    Orange

    orange

  • Exterior paint

    Orange

    orange

  • Exterior paint

    Orange

    orange

  • Exterior paint

    Orange

    orange

Responsive table

Meaningful <caption> with unique ID
Col headingCol headingCol headingCol headingCol heading
Row headingTable cell content...Table cell content...Table cell content...Table cell content...
Row headingTable cell content...Table cell content...Table cell content...Table cell content...
Row headingTable cell content...Table cell content...Table cell content...Table cell content...
Row headingTable cell content...Table cell content...Table cell content...Table cell content...
Row headingTable cell content...Table cell content...Table cell content...Table cell content...

Forms

Optional form title

Optional form description

 This is a <legend>, describing the purpose of related form elements grouped inside an optional <fieldset>.
It could contain information such as "required fields are marked with a *". 
 This is a <legend> for checkbox group. 
 This is a <legend> for required radio group. * 

Form in a grid layout

@if (vehicleRateInfoActive) { } @if (vehicleRateInfoActive) { } @if (vehicleRateInfoActive) { }

@Html.Translation("QuickView", "CashPrice", "Cash Price")@Html.Price(Model.Vehicle.GrossPrice)
@Html.Translation("QuickView", "Deposit", "Deposit")@Html.Price(Model.RateDetails.Deposit)
@Html.Translation("QuickView", "DepositPercent", "Deposit Percentage")@Model.VehicleRateInfo.DepositPercent%
@Html.Translation("QuickView", "CreditAmount", "Credit Amount")@Html.Price(Model.VehicleRateInfo.CreditAmount)
@Html.Translation("QuickView", "PaymentPlan", "Payment Plan")@Model.RateDetails.TermInMonths @Html.Translation("QuickView", "PaymentsOf", "payments of") @Html.Raw(Model.RateDetails.PriceText)
@Html.Translation("QuickView", "TotalPayable", "Total Payable")@Html.Price(Model.VehicleRateInfo.TotalPayable)
APR@Model.RateDetails.Apr%
@Html.Translation("QuickView", "TotalCostOfFinance", "Total Cost of Finance")@Html.Price(Model.VehicleRateInfo.CreditCharge)

demo pic

Offers

View all the latest Promotions from 6260

Dealer News

View all our Latest News