9 Components

Toyota One Components

9.1 Expandable spotlights base - EXTENDED

Expandable spotlights base - EXTENDED

The base of the expandable spotlights components relies on the bootstrap data-toggle attribute, this data attribute will work together with a data-href or href attribute to determine which element has to be collapsed by adding and removing classes on the element.

This base is used for components such as More About, Hybrid, 4WD, Third party reviews, Welcome back

NOTE: this is only a base, T1 components using it have a more complex structure...

<div class="container">

	<a class="btn btn-toggle btn-simple collapsed s-margin-b"
	   data-toggle="collapse"
	   href="#box-row-2">

		<div class="toggle-text">View all (8)</div>
	</a>

	<div id="spotlights">
		<div class="row row-1">
			<a class="col-xs-12 col-sm-6 col-md-3 spotlight"

			   href="http://www.youtube.com/embed/h4cBn6eb8PY?wmode=opaque&amp;list=PLMJ_oV58WE4FTgJcL-RO0ttmjbEdhyq-c&amp;autoplay=1">
				<img class="img-responsive" src="//s3-eu-west-1.amazonaws.com/tme-toyotaone-prev/toyotaone/glen/555px_tcm-10-262244.png" alt="Toyota Hybrid" />
			</a>
			<a class="col-xs-12 col-sm-6 col-md-3 spotlight"

			   href="http://www.youtube.com/embed/h4cBn6eb8PY?wmode=opaque&amp;list=PLMJ_oV58WE4FTgJcL-RO0ttmjbEdhyq-c&amp;autoplay=1">
				<img class="img-responsive" src="//s3-eu-west-1.amazonaws.com/tme-toyotaone-prev/toyotaone/glen/555px_tcm-10-262244.png" alt="Toyota Hybrid" />
			</a>
			<a class="col-xs-12 col-sm-6 col-md-3 spotlight"

			   href="http://www.youtube.com/embed/h4cBn6eb8PY?wmode=opaque&amp;list=PLMJ_oV58WE4FTgJcL-RO0ttmjbEdhyq-c&amp;autoplay=1">
				<img class="img-responsive" src="//s3-eu-west-1.amazonaws.com/tme-toyotaone-prev/toyotaone/glen/555px_tcm-10-262244.png" alt="Toyota Hybrid" />
			</a>
			<a class="col-xs-12 col-sm-6 col-md-3 spotlight"

			   href="http://www.youtube.com/embed/h4cBn6eb8PY?wmode=opaque&amp;list=PLMJ_oV58WE4FTgJcL-RO0ttmjbEdhyq-c&amp;autoplay=1">
				<img class="img-responsive" src="//s3-eu-west-1.amazonaws.com/tme-toyotaone-prev/toyotaone/glen/555px_tcm-10-262244.png" alt="Toyota Hybrid" />
			</a>
		</div>
		<div id="box-row-2" class="row row-2 collapse">
			<a class="col-xs-12 col-sm-6 col-md-3 spotlight"

			   href="http://www.youtube.com/embed/h4cBn6eb8PY?wmode=opaque&amp;list=PLMJ_oV58WE4FTgJcL-RO0ttmjbEdhyq-c&amp;autoplay=1">
				<img class="img-responsive" src="//s3-eu-west-1.amazonaws.com/tme-toyotaone-prev/toyotaone/glen/555px_tcm-10-262244.png" alt="Toyota Hybrid" />
			</a>
			<a class="col-xs-12 col-sm-6 col-md-3 spotlight"

			   href="http://www.youtube.com/embed/h4cBn6eb8PY?wmode=opaque&amp;list=PLMJ_oV58WE4FTgJcL-RO0ttmjbEdhyq-c&amp;autoplay=1">
				<img class="img-responsive" src="//s3-eu-west-1.amazonaws.com/tme-toyotaone-prev/toyotaone/glen/555px_tcm-10-262244.png" alt="Toyota Hybrid" />
			</a>
			<a class="col-xs-12 col-sm-6 col-md-3 spotlight"

			   href="http://www.youtube.com/embed/h4cBn6eb8PY?wmode=opaque&amp;list=PLMJ_oV58WE4FTgJcL-RO0ttmjbEdhyq-c&amp;autoplay=1">
				<img class="img-responsive" src="//s3-eu-west-1.amazonaws.com/tme-toyotaone-prev/toyotaone/glen/555px_tcm-10-262244.png" alt="Toyota Hybrid" />
			</a>
			<a class="col-xs-12 col-sm-6 col-md-3 spotlight"

			   href="http://www.youtube.com/embed/h4cBn6eb8PY?wmode=opaque&amp;list=PLMJ_oV58WE4FTgJcL-RO0ttmjbEdhyq-c&amp;autoplay=1">
				<img class="img-responsive" src="//s3-eu-west-1.amazonaws.com/tme-toyotaone-prev/toyotaone/glen/555px_tcm-10-262244.png" alt="Toyota Hybrid" />
			</a>
		</div>
	</div>

</div>

9.2 BOOTSTRAP carousel base -CORE

BOOTSTRAP carousel base -CORE

The base of the t1 carousel is a small extension to the bootstrap 3 one: only the left/right arrows and the indicators are different. A ".dark-carousel-container" class can also be added to have the arrows and indicators white (they are grey by default).

To enable the carousel arrow layout add a "t1-arrow-control" class to the two "carousel-control" tag, the tag doesn't required any child to handle the icon as the icon is handled as a pseudo-element.

Note that carousel indicators should be positioned depending on the context of the carousel(by default they are positioned at the bottom of the carousel as you can see in the following example). Those should also only be enabled by adding the "enabled" class if the amount of slides is less than 7 (rule agreed between Gfi FE team and Akqa Design agency). If the amount of slides is higher than 7 the carousel-indicators shouldn't be enabled and a counter should be replacing those (the counter is an EXTENDED feature and should always replace the indicators on mobile).

.carousel

<div id="myCarousel" class="carousel slide dark-carousel-container" data-ride="carousel">

	<!-- Wrapper for slides -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="//t1-cms-4.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/1-C-HR-Header-Desktop_tcm-11-728815.jpg" style="width:100%;">
		</div>

		<div class="item">
			<img src="//t1-cms-4.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/toyota-touch-2-2016-homepage-header_tcm-11-642198.jpg" style="width:100%;">
		</div>

		<div class="item">
			<img src="//t1-cms-1.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/Asset-T1-Header-Mirai_tcm-11-569646.jpg" style="width:100%;">
		</div>
	</div>

	<nav class="carouselNav">
		<!-- Left and right controls: note that t1-arrow-control has been added to the default bootstrap
		carousel-control -->

		<a class="t1-arrow-control left carousel-control" href="#" data-target="#myCarousel" data-slide="prev">

		</a>
		<a class="t1-arrow-control right carousel-control" href="#" data-target="#myCarousel" data-slide="next">

		</a>

		<!-- Indicators : those should only be enabled if the amount of slides is less than 7 (rule agreed
		between Gfi FE team and Akqa Design agency). If the amount of slides is higher than 7 the carousel-indicators
		 shouldn't be "enabled" and a counter should be replacing those (the counter is an EXTENDED feature)-->

		<ol class="carousel-indicators enabled">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
	</nav>
</div>

9.2.1 BOOTSTRAP carousel extended -EXTENDED

Here is an extended version of the carousel where a class carousel-container is added and handled by our T1-carousel.js module. Note that on mobile the counter is enabled(default behavior on mobile).

.carousel-container && .carousel

<div id="myCarousel1" class="carousel-container carousel slide dark-carousel-container" data-ride="carousel">

	<!-- Wrapper for slides -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="//t1-cms-4.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/1-C-HR-Header-Desktop_tcm-11-728815.jpg" style="width:100%;">
		</div>

		<div class="item">
			<img src="//t1-cms-4.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/toyota-touch-2-2016-homepage-header_tcm-11-642198.jpg" style="width:100%;">
		</div>

		<div class="item">
			<img src="//t1-cms-1.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/Asset-T1-Header-Mirai_tcm-11-569646.jpg" style="width:100%;">
		</div>
	</div>

	<nav class="carouselNav">
		<!-- Left and right controls: note that t1-arrow-control has been added to the default bootstrap
		carousel-control -->

		<a class="t1-arrow-control left carousel-control" href="#" data-target="#myCarousel1" data-slide="prev">

		</a>
		<a class="t1-arrow-control right carousel-control" href="#" data-target="#myCarousel1" data-slide="next">

		</a>

		<!-- Indicators : those should only be enabled if the amount of slides is less than 7 (rule agreed
		between Gfi FE team and Akqa Design agency). If the amount of slides is higher than 7 the carousel-indicators
		 shouldn't be "enabled" and a counter should be replacing those (the counter is an EXTENDED feature)-->

		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
	</nav>
</div>

9.2.2 BOOTSTRAP carousel extended 2 : counter enabled -EXTENDED

BOOTSTRAP carousel extended 2 : counter enabled -EXTENDED

Here is an extended version of the carousel where the counter is enabled because there were more than 7 slides, the template shouldn't enable the carousel indicators in this case and our T1-carousel.js module will inject a counter listening to the next and previous events being triggered by the carousel.

Same note as that carousel indicators: the counter should be positioned depending on the context of the carousel (by default they it's positioned at the bottom of the carousel as you can see in the following example).

.carousel-container && .carousel

<div id="myCarousel2" class="carousel-container carousel slide dark-carousel-container" data-ride="carousel">

	<!-- Wrapper for slides -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="//t1-cms-4.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/1-C-HR-Header-Desktop_tcm-11-728815.jpg" style="width:100%;">
		</div>

		<div class="item">
			<img src="//t1-cms-4.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/toyota-touch-2-2016-homepage-header_tcm-11-642198.jpg" style="width:100%;">
		</div>

		<div class="item">
			<img src="//t1-cms-1.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/Asset-T1-Header-Mirai_tcm-11-569646.jpg" style="width:100%;">
		</div>
		<div class="item">
			<img src="//t1-cms-1.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/Asset-T1-Header-Mirai_tcm-11-569646.jpg" style="width:100%;">
		</div>
		<div class="item">
			<img src="//t1-cms-1.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/Asset-T1-Header-Mirai_tcm-11-569646.jpg" style="width:100%;">
		</div>
		<div class="item">
			<img src="//t1-cms-1.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/Asset-T1-Header-Mirai_tcm-11-569646.jpg" style="width:100%;">
		</div>
		<div class="item">
			<img src="//t1-cms-1.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/Asset-T1-Header-Mirai_tcm-11-569646.jpg" style="width:100%;">
		</div>
		<div class="item">
			<img src="//t1-cms-1.images.toyota-europe.com.cache.rsb.bstd.ru/toyotaone/euen/Asset-T1-Header-Mirai_tcm-11-569646.jpg" style="width:100%;">
		</div>
	</div>

	<nav class="carouselNav">
		<!-- Left and right controls: note that t1-arrow-control has been added to the default bootstrap
		carousel-control -->

		<a class="t1-arrow-control left carousel-control" href="#" data-target="#myCarousel2" data-slide="prev">

		</a>
		<a class="t1-arrow-control right carousel-control" href="#" data-target="#myCarousel2" data-slide="next">

		</a>

		<!-- Indicators : those should only be enabled if the amount of slides is less than 7 (rule agreed
		between Gfi FE team and Akqa Design agency). If the amount of slides is higher than 7 the carousel-indicators
		 shouldn't be "enabled" and a counter should be replacing those (the counter is an EXTENDED feature),
		 <div class="slide-counter"><div class="counter-bg"><span class="current-index"></span></div></div>-->

		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
	</nav>
</div>

9.3 SLICK carousel base -EXTENDED

SLICK carousel base -EXTENDED

For the client project, we've decided to move away from the bootstrap carousel to a more flexible and popular carousel.

Check the setup and options documentation | setup and options documentation

.t1-carousel-container .t1-carousel .t1-slide

<style>
	/* CONTEXT STYLING(might become generic at some point...) */
	.slick-carousel-styleguide-example{  position: relative;  overflow-y:hidden;  }
	.slick-carousel-styleguide-example img{  width: 100%;  }
	.slick-carousel-styleguide-example .t1-slide { display: none; }
	.slick-carousel-styleguide-example .t1-slide.initialSlide{  display: block; }
	.slick-carousel-styleguide-example .slick-initialized .t1-slide {  display: block; }
</style>
<div class="slick-carousel-styleguide-example">
	<div class="t1-carousel-container" data-option={"addT1Arrows":true,"arrowHoverActivator":true,"slickOptions":{"draggable":false,"arrows":false,"dots":false}}>
		<div class="t1-carousel" >
			<div class="t1-slide initialSlide">
				<img
						src="/images/explore/gallery/lg/interior_768x384_1.jpg" />
			</div>
			<div class="t1-slide">
				<img
						src="/images/explore/gallery/lg/interior_768x384_2.jpg" />
			</div>
			<div class="t1-slide">
				<img
						src="/images/explore/gallery/lg/interior_768x384_1.jpg" />
			</div>
			<div class="t1-slide">
				<img
						src="/images/explore/gallery/lg/interior_768x384_4.jpg" />
			</div>
		</div>
		<div class="t1-arrow-activator active prev"><a class="t1-arrow-control prev preventDefault" href="#"></a></div>
		<div class="t1-arrow-activator active next"><a class="t1-arrow-control next preventDefault" href="#"></a></div>
	</div>
</div>

9.4 Modelrange

Model range component (showroom)

Our models

<link href="https://da3uup9s39vpj.cloudfront.net.cache.rsb.bstd.ru/TCCMO/css/tcc-model-overview.css" type="text/css" rel="stylesheet"/>


<div class="next-restyle-phase disabled-styleguide-section-container">
	<div class="disabled-styleguide-section"></div>
	<section id="modelfilter-v2" class="tccmo-sample">
		<div class="container">
			<div class="tcc-models">
				<header class="tcc-models-header section-title">
					<h1 class="tcc-models-title text-center">Our models</h1>
				</header>
				<div class="form">
					<div class="row clearfix">
						<div class="col-md-12">
							<div class="filter-bar tcc-models-filterbar visible-lg pull-left">
								<div class="fb-inner btn-toolbar tcc-models-btn-toolbar">
									<div class="btn-group fb-group"><a class="btn btn-simple fb-item active" href="">View all</a><a class="btn btn-simple fb-item" href="">Small Cars</a><a class="btn btn-simple fb-item" href="">Family cars</a><a
											class="btn btn-simple fb-item" href="">Sedan</a><a class="btn btn-simple fb-item" href="">Hybrid Vehicles</a><a class="btn btn-simple fb-item" href="">Wagon</a><a class="btn btn-simple fb-item" href="">4x4 Vehicles</a><a
											class="btn btn-simple fb-item" href="">Sports</a></div>
								</div>
							</div>
							<div class="tcc-models-dropdown-container dropdown-container pull-right form">
								<div class="tcc-models-dropdown dropdown topic"><a href="index.html"><span>Filter to select your model</span><i class="icon-chevron-down"></i></a></div>
								<span class="tcc-models-dropdown-border dropdown-border" style="display:none;"> </span></div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">
							<div class="tcc-models-collapsed-menu tcc-models-filters collapsed-menu">
								<div style="display:none;" class="tcc-models-dropdown-menu col-xs-12 dropdown-menu">
									<div class="row">
										<div class="col-sm-6">
											<div class="tcc-models-dropdown dropdown contact-country hidden-lg" data-select="contact-country">
												<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-validation="select" href="">
													<span><span>Select vehicle type</span><span style="display: inline-block;"><span>: </span><strong>View all</strong></span></span><i class="icon-chevron-down"
												></i></a>
												<ul class="dropdown-menu" role="menu" style="display:none;">
													<li><a class="" href="">View all</a></li>
													<li><a class="" href="">Small Cars</a></li>
													<li><a class="" href="">Family cars</a></li>
													<li><a class="" href="">Sedan</a></li>
													<li><a class="" href="">Hybrid Vehicles</a></li>
													<li><a class="" href="">Wagon</a></li>
													<li><a class="" href="">4x4 Vehicles</a></li>
													<li><a class="" href="">Sports</a></li>
												</ul>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-6 tcc-models-filter-col">
											<div class="tcc-models-filter" style="width:100%;height:100%;">
												<div class="tcc-models-filter-label"><strong><span>CO2 emissions in g/km</span><span>:</span></strong><span
												> </span><span>308 g of CO2 per km</span></div>
												<div class="tcc-models-slider">
													<div class="tcc-models-slider-handle"><i class="icon-chevron-left"></i><i class="icon-chevron-right"></i></div>
													<div class="tcc-models-slider-grid">
														<span style="left:16.67%;" class="tcc-models-slider-grid-line"></span>
														<span style="left:33.33%;" class="tcc-models-slider-grid-line"></span>
														<span style="left:50%;" class="tcc-models-slider-grid-line"></span>
														<span style="left:66.67%;" class="tcc-models-slider-grid-line"></span>
														<span style="left:83.33%;" class="tcc-models-slider-grid-line"></span>
													</div>
													<div style="width:200px;" class="tcc-models-slider-bar"></div>
													<div class="tcc-models-slider-bg"></div>
													<div class="tcc-models-slider-legend clearfix"><span class="pull-left"><span>49 g of CO2 per km</span></span><span
															class="pull-right"><span>308 g of CO2 per km</span></span></div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 tcc-models-filter-col">
											<div class="tcc-models-filter" style="width:100%;height:100%;">
												<div class="tcc-models-filter-label"><strong><span>Number of seats</span><span
												>:</span></strong><span> </span><span>4 seats minimum</span></div>
												<div class="tcc-models-slider">
													<div class="tcc-models-slider-handle"><i class="icon-chevron-left"></i><i class="icon-chevron-right"></i></div>
													<div class="tcc-models-slider-grid"><span style="left:25%;" class="tcc-models-slider-grid-line"></span><span style="left:50%;" class="tcc-models-slider-grid-line"
													></span><span
															style="left:75%;" class="tcc-models-slider-grid-line"></span></div>
													<div style="width:0;" class="tcc-models-slider-bar is-reversed"></div>
													<div class="tcc-models-slider-bg"></div>
													<div class="tcc-models-slider-legend tcc-models-slider-legend-collapsed clearfix"><span style="left:0%;width:25%;" class="tcc-models-slider-legend-item">4</span><span style="left:25%;width:25%;"
																																																						   class="tcc-models-slider-legend-item"
													>5</span><span
															style="left:50%;width:25%;" class="tcc-models-slider-legend-item">6</span><span style="left:75%;width:25%;" class="tcc-models-slider-legend-item">7</span></div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 tcc-models-filter-col">
											<div class="tcc-models-filter" style="width:100%;height:100%;">
												<div class="tcc-models-filter-label"><strong><span>Consumption in l/100km</span><span>:</span></strong><span
												> </span><span>13.3 l / 100 km</span></div>
												<div class="tcc-models-slider">
													<div class="tcc-models-slider-handle"><i class="icon-chevron-left"></i><i class="icon-chevron-right"></i></div>
													<div class="tcc-models-slider-grid"><span style="left:16.67%;" class="tcc-models-slider-grid-line"></span><span style="left:33.33%;" class="tcc-models-slider-grid-line"
													></span><span
															style="left:50%;" class="tcc-models-slider-grid-line"></span><span style="left:66.67%;" class="tcc-models-slider-grid-line"></span><span style="left:83.33%;"
																																																	 class="tcc-models-slider-grid-line"
													></span>
													</div>
													<div style="width:200px;" class="tcc-models-slider-bar"></div>
													<div class="tcc-models-slider-bg"></div>
													<div class="tcc-models-slider-legend clearfix"><span class="pull-left"><span>2.1 l / 100 km</span></span><span class="pull-right"
													><span
													>13.3 l / 100 km</span></span></div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 tcc-models-filter-col">
											<div class="tcc-models-filter" style="width:100%;height:100%;">
												<div class="tcc-models-filter-label"><strong><span>Luggage capacity in liters</span><span>:</span></strong><span
												> </span><span>175 liters (=3 <span class="icon-suitcase"></span>)</span></div>
												<div class="tcc-models-slider">
													<div class="tcc-models-slider-handle"><i class="icon-chevron-left"></i><i class="icon-chevron-right"></i></div>
													<div class="tcc-models-slider-grid"><span style="left:16.67%;" class="tcc-models-slider-grid-line"></span><span style="left:33.33%;" class="tcc-models-slider-grid-line"
													></span><span
															style="left:50%;" class="tcc-models-slider-grid-line"></span><span style="left:66.67%;" class="tcc-models-slider-grid-line"></span><span style="left:83.33%;"
																																																	 class="tcc-models-slider-grid-line"
													></span>
													</div>
													<div style="width:200px;" class="tcc-models-slider-bar"></div>
													<div class="tcc-models-slider-bg"></div>
													<div class="tcc-models-slider-legend clearfix"><span class="pull-left"><span>168 liters (=3 <span
															class="icon-suitcase"></span>)</span></span><span class="pull-right"><span>672 liters (=13 <span class="icon-suitcase"></span>)</span></span></div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 tcc-models-filter-col">
											<div class="tcc-models-filter" style="width:100%;height:100%;">
												<div class="tcc-models-filter-label"><strong><span>Top speed in km/h</span><span
												>:</span></strong><span> </span><span>155 km/h</span></div>
												<div class="tcc-models-slider">
													<div class="tcc-models-slider-handle"><i class="icon-chevron-left"></i><i class="icon-chevron-right"></i></div>
													<div class="tcc-models-slider-grid"><span style="left:16.67%;" class="tcc-models-slider-grid-line"></span><span style="left:33.33%;" class="tcc-models-slider-grid-line"
													></span><span
															style="left:50%;" class="tcc-models-slider-grid-line"></span><span style="left:66.67%;" class="tcc-models-slider-grid-line"></span><span style="left:83.33%;"
																																																	 class="tcc-models-slider-grid-line"
													></span>
													</div>
													<div style="width:200px;" class="tcc-models-slider-bar"></div>
													<div class="tcc-models-slider-bg"></div>
													<div class="tcc-models-slider-legend clearfix"><span class="pull-left"><span>155 km/h</span></span><span class="pull-right"
													><span
													>226 km/h</span></span></div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 tcc-models-filter-col">
											<div class="tcc-models-filter" style="width:100%;height:100%;">
												<div class="tcc-models-filter-label"><strong><span>Power output in DIN hp</span><span>:</span></strong><span
												> </span><span>70 DIN hp minimum</span></div>
												<div class="tcc-models-slider">
													<div class="tcc-models-slider-handle"><i class="icon-chevron-left"></i><i class="icon-chevron-right"></i></div>
													<div class="tcc-models-slider-grid"><span style="left:16.67%;" class="tcc-models-slider-grid-line"></span><span style="left:33.33%;" class="tcc-models-slider-grid-line"
													></span><span
															style="left:50%;" class="tcc-models-slider-grid-line"></span><span style="left:66.67%;" class="tcc-models-slider-grid-line"></span><span style="left:83.33%;"
																																																	 class="tcc-models-slider-grid-line"
													></span>
													</div>
													<div style="width:200px;" class="tcc-models-slider-bar"></div>
													<div class="tcc-models-slider-bg"></div>
													<div class="tcc-models-slider-legend clearfix"><span class="pull-left"><span>69 DIN hp minimum</span></span><span
															class="pull-right"><span>318 DIN hp minimum</span></span></div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-md-12"><a href="#" class="btn btn-functional btn-update pull-right"><span>Clear filters</span><span> </span><i class="icon-repeat"></i></a><span
												class="tcc-models-filters-count text-muted pull-right visible-sm visible-xs">21 results</span></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<section class="modelrange tcc-models-range clearfix">
					<div class="row"><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/aygo/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="AYGO" src="//t1-carassets.toyota-europe.com/e8437fb6-028c-4b26-8616-6ef2dcdfd71f.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">AYGO</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/yaris/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Yaris" src="//t1-carassets.toyota-europe.com/d6b4c6f4-8d70-4a14-97e7-b846564e5e02.PNG">
								<div class="tcc-models-labels">
									<div class="model-decoration tcc-models-label tcc-models-label-hybrid hybrid">Hybrid available</div>
								</div>
							</div>
							<span><strong class="">Yaris</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/verso-s/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Verso-S" src="//t1-carassets.toyota-europe.com/a55cf1cb-2f36-4d68-80e8-273f9a87c247.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Verso-S</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/new-chr/index.json " class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="C-HR" src="//d1hu588lul0tna.cloudfront.net.cache.rsb.bstd.ru/toyotaone/euen/CHR_1K0_tcm-11-641962.png">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">C-HR</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/auris/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Auris" src="//t1-carassets.toyota-europe.com/b0766c2b-c2b8-4125-839d-ab1bdb89d17c.PNG">
								<div class="tcc-models-labels">
									<div class="model-decoration tcc-models-label tcc-models-label-hybrid hybrid">Hybrid available</div>
								</div>
							</div>
							<span><strong class="">Auris</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/auris-touring-sports/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Auris Touring Sports" src="//t1-carassets.toyota-europe.com/d76867de-4316-402e-8800-de15f322c7a9.PNG">
								<div class="tcc-models-labels">
									<div class="model-decoration tcc-models-label tcc-models-label-hybrid hybrid">Hybrid available</div>
								</div>
							</div>
							<span><strong class="">Auris Touring Sports</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/corolla/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Corolla" src="//t1-carassets.toyota-europe.com/5f0e2a5a-248b-4e9c-94d7-45829126a3d0.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Corolla</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/verso/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Verso" src="//t1-carassets.toyota-europe.com/18da6d40-7a9f-4757-a54a-7548dfa89083.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Verso</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/avensis/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Avensis" src="//t1-carassets.toyota-europe.com/8aa57494-7d8f-479d-8621-5af3d9942e67.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Avensis</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/camry/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Camry" src="//t1-carassets.toyota-europe.com/ffeecd1c-24b3-45d3-aa03-19069582f9c0.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Camry</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/gt86/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="GT86" src="//t1-carassets.toyota-europe.com/f4b97d62-5cf0-49f1-8e0e-87a02cef83dc.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">GT86</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/prius/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Prius" src="//t1-carassets.toyota-europe.com/5d9f2613-03e6-4556-9621-87449f86f130.PNG">
								<div class="tcc-models-labels">
									<div class="model-decoration tcc-models-label tcc-models-label-hybrid hybrid">Hybrid</div>
								</div>
							</div>
							<span><strong class="hybrid-only">Prius</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/prius-plugin/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Prius Plug-in Hybrid" src="//t1-carassets.toyota-europe.com/51e5232c-2531-4398-b7a5-600af7d018b7.PNG">
								<div class="tcc-models-labels">
									<div class="model-decoration tcc-models-label tcc-models-label-hybrid hybrid">Hybrid</div>
								</div>
							</div>
							<span><strong class="hybrid-only">Prius Plug-in Hybrid</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/prius-plus/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Prius+" src="//t1-carassets.toyota-europe.com/47c0d252-7a39-4825-838c-606904311161.PNG">
								<div class="tcc-models-labels">
									<div class="model-decoration tcc-models-label tcc-models-label-hybrid hybrid">Hybrid</div>
								</div>
							</div>
							<span><strong class="hybrid-only">Prius+</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/new-mirai/landing.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Mirai" src="//d1hu588lul0tna.cloudfront.net.cache.rsb.bstd.ru/toyotaone/euen/toyota-mirai-2015-range-fuel-cell-v2_tcm-11-569403.png">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Mirai</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/rav4/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="RAV4" src="//t1-carassets.toyota-europe.com/fb7cf711-ecd2-4301-bacf-7763eebb7fbc.PNG">
								<div class="tcc-models-labels">
									<div class="model-decoration tcc-models-label tcc-models-label-hybrid hybrid">Hybrid available</div>
								</div>
							</div>
							<span><strong class="">RAV4</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/highlander/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Highlander" src="//t1-carassets.toyota-europe.com/9358fc75-7ab1-48cf-8782-5668f12fea50.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Highlander</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/land-cruiser/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Land Cruiser" src="//t1-carassets.toyota-europe.com/bfdacfad-a3b9-412e-8cb7-bc8b6a25aac9.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Land Cruiser</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/land-cruiser-v8/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Land Cruiser V8" src="//t1-carassets.toyota-europe.com/f80f0005-9ddc-4152-b60d-06678f6360ad.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Land Cruiser V8</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/hilux/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb">
								<img alt="Hilux" src="//t1-carassets.toyota-europe.com/30e35078-b535-4f19-8ecb-8d97a88f0749.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Hilux</strong></span></div>
					</a><a href="//www.toyota-europe.com.cache.rsb.bstd.ru/new-cars/proace/index.json" class="col-xs-6 col-sm-3 col-md-2">
						<div class="modelitem finance tcc-models-item">
							<div class="tcc-models-thumb"><img alt="Proace" src="//t1-carassets.toyota-europe.com/ffc396d3-80f5-47af-9312-ae2ca9fc3420.PNG">
								<div class="tcc-models-labels"></div>
							</div>
							<span><strong class="">Proace</strong></span></div>
					</a></div>
				</section>
			</div>
		</div>
	</section>
</div>

<!--<script src="https://da3uup9s39vpj.cloudfront.net.cache.rsb.bstd.ru/TCCMO/js/tcc-model-overview.min.js"></script>-->

9.5 overflowable rows - CORE

overflowable rows - CORE

This component has been introduced to handle overflowing lists. Instead of collapsing the list it is made scrollable horizontally.

Check the setup and options documentation | setup and options documentation

  • Interior
  • Exterior
  • Accessories
  • Video
  • Interior
  • Exterior
  • Accessories
  • Video
  • Interior
  • Exterior
  • Accessories
  • Video
  • Interior
  • Exterior
  • Accessories
  • Video
  • Interior
  • Exterior
  • Accessories
  • Video
  • Interior
  • Exterior
  • Accessories
  • Video
  • Interior
  • Exterior
  • Accessories
  • Video




  • <style>
    	.overflowingrows-styleguide-example .overflowable-thumbnails-row{
    		height: 90px;
    	}
    	@media (min-width: 992px) {
    		.overflowingrows-styleguide-example .overflowable-row:not([data-type]){
    			height: 46px;
    		}
    	}
    
    </style>
    <div class="overflowingrows-styleguide-example">
    	<!-- Overflowable row of tabs -->
    	<div class="overflowable-row overflowable-tabs-row" data-type="tabs">
    		<ul class="t1-iscroll-list t1-tab-list">
    			<li class="tab" >Interior</li>
    			<li class="tab" >Exterior</li>
    			<li class="tab active" >Accessories</li>
    			<li class="tab" >Video</li>
    			<li class="tab" >Interior</li>
    			<li class="tab" >Exterior</li>
    			<li class="tab" >Accessories</li>
    			<li class="tab" >Video</li>
    			<li class="tab" >Interior</li>
    			<li class="tab" >Exterior</li>
    			<li class="tab " >Accessories</li>
    			<li class="tab" >Video</li>
    			<li class="tab" >Interior</li>
    			<li class="tab" >Exterior</li>
    			<li class="tab " >Accessories</li>
    			<li class="tab" >Video</li>
    			<li class="tab" >Interior</li>
    			<li class="tab" >Exterior</li>
    			<li class="tab" >Accessories</li>
    			<li class="tab" >Video</li>
    			<li class="tab" >Interior</li>
    			<li class="tab" >Exterior</li>
    			<li class="tab" >Accessories</li>
    			<li class="tab" >Video</li>
    			<li class="tab" >Interior</li>
    			<li class="tab" >Exterior</li>
    			<li class="tab" >Accessories</li>
    			<li class="tab" >Video</li>
    		</ul>
    	</div>
    	<br>
    	<br>
    	<!-- Overflowable row of thumbnails 90px heighht -->
    	<div class="overflowable-row overflowable-thumbnails-row" data-type="thumbnails">
    		<div class="t1-iscroll-list t1-thumbnail-list">
    			<li class="thumbnail">
    				<img src="/images/explore/gallery/thumbnail/interior_160x90_1.jpg">
    			</li>
    			<li class="thumbnail">
    				<img src="/images/explore/gallery/thumbnail/interior_160x90_1.jpg">
    			</li>
    			<li class="thumbnail">
    				<img src="/images/explore/gallery/thumbnail/interior_160x90_1.jpg">
    			</li>
    			<li class="thumbnail">
    				<img src="/images/explore/gallery/thumbnail/interior_160x90_1.jpg">
    			</li>
    			<li class="thumbnail">
    				<img src="/images/explore/gallery/thumbnail/interior_160x90_1.jpg">
    			</li>
    			<li class="thumbnail">
    				<img src="/images/explore/gallery/thumbnail/interior_160x90_1.jpg">
    			</li>
    			<li class="thumbnail">
    				<img src="/images/explore/gallery/thumbnail/interior_160x90_1.jpg">
    			</li>
    			<li class="thumbnail">
    				<img src="/images/explore/gallery/thumbnail/interior_160x90_1.jpg">
    			</li>
    			<li class="thumbnail">
    				<img src="/images/explore/gallery/thumbnail/interior_160x90_1.jpg">
    			</li>
    		</div>
    	</div>
    	<br>
    	<br>
    	<!-- Default overflowable row with breakpoint option -->
    	<div class="overflowable-row" data-option={"breakpointDependent":{"md":true,"lg":true,"xl":true}}>
    		<div class="t1-iscroll-list">
    			<a href="#" class="btn t1-iscroll-item preventDefault">
    				button
    			</a>
    			<a href="#" class="btn t1-iscroll-item preventDefault">
    				button
    			</a>
    			<a href="#" class="btn t1-iscroll-item preventDefault">
    				button
    			</a>
    			<a href="#" class="btn t1-iscroll-item preventDefault">
    				button
    			</a>
    			<a href="#" class="btn t1-iscroll-item preventDefault">
    				button
    			</a>
    			<a href="#" class="btn t1-iscroll-item preventDefault">
    				button
    			</a>
    			<a href="#" class="btn t1-iscroll-item preventDefault">
    				button
    			</a>
    			<a href="#" class="btn t1-iscroll-item preventDefault">
    				button
    			</a>
    			<a href="#" class="btn t1-iscroll-item preventDefault">
    				button
    			</a>
    		</div>
    	</div>
    
    </div>

    9.6 Ajax panels - EXTENDED

    Ajax panels - EXTENDED

    The ajax panel is a flexible solution for loading ajax content(html/json) based on any event that occures on any element and appending the content wherever it is needed with just a few options.

    Check the setup and options documentation | setup and options documentation

    Button that loads content



    Button that loads content and hide itself after


    Load the bootstrap collapse content the first time you toggle this link
    Collapse toggler


    Load json content
    <!-- In this case the ajax panel is the DIV listening to a first click event on a target button(#ajax-panel-button). The content is appended to the ajax-panel itselfs(default behavior) -->
    
    <div class="parent-example">
    	<strong>Button that loads content</strong><br>
    	<button id="ajax-panel-button" class="btn" type="button">Button</button>
    	<br>
    	<div class="t1-ajaxPanel"
    			   data-url="/styleguide/sample-api/ajaxPanelExample1.html"
    			   data-one="click"
    		 data-one-target="#ajax-panel-button">
    
    	</div>
    </div><br><br>
    
    <!-- In this case the ajax panel is the button itself. The content is appended to a common parent element and the trigger is hidden once the event occured-->
    
    <div class="parent-example">
    	<strong>Button that loads content and hide itself after</strong><br>
    	<button	class="btn t1-ajaxPanel"
    			   data-url="/styleguide/sample-api/ajaxPanelExample1.html"
    			   data-one="click"
    			   data-option={"hideTrigger":true,"appendToParent":".parent-example"}
    			   type="button">Button</button>
    </div><br><br>
    
    <!-- In this case the ajax panel is a DIV listening to a first bootstrap collapse event on itself. The content is appended to the ajax-panel itselfs(default behavior) -->
    
    <div id="parent-example-2">
    	<strong>Load the bootstrap collapse content the first time you toggle this link</strong><br>
    	<a class="preventDefault"
    	   href="#"
    	   data-toggle="collapse"
    	   data-target=".collapse-ajax-panel"
    	   data-parent="#parent-example-2">
    		<span>Collapse toggler</span><span class="icon icon-chevron-right"></span>
    	</a>
    
    	<div class="t1-ajaxPanel collapse collapse-ajax-panel"
    		 data-url="/styleguide/sample-api/ajaxPanelExample1.html"
    		 data-one="show.bs.collapse">
    
    	</div>
    </div><br><br>
    
    <!-- In this case the ajax panel is a link listening to a first click event on itself. The content is JSON, a class is added to it, it is appended to the parent and the parent is being emptied before the append occurs -->
    <strong>Load json content</strong>
    <div class="parent">
    	<a href="#"
    	   class="t1-ajaxPanel preventDefault"
    	   data-url="/styleguide/sample-api/ajaxPanelExample2.json"
    	   data-one="click"
    	   data-option={"appendToParent":".parent","emptyParent":true,"responseType":"json","responseContentClass":"classAdded"}>
    		Load json link</a>
    </div>