Tick Tock Layout
Section with content area and image grid.
Component Properties
Base Properties
Text / Background Color Theme .text-bg-[COLOR]
Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:
Minimum Header Height .min-vh-[VALUE]
Set a minimum height for the entire header based on the height of the viewport.
.min-vh-40- 40% of the viewport height
.min-vh-60- 60% of the viewport height
.min-vh-75- 75% of the viewport height
.min-vh-90- 90% of the viewport height
.min-vh-100- 100% of the viewport height
Section Vertical Spacing .sec-spacing[VALUE]
Optional: Adds top and bottom padding to section.
none- If no spacing is choosen then the spacing class
.content-spacerwill be added to the.section-contentelement .sec-spacing- Adds top and bottom spacing to section
.sec-spacing-sm- Adds a small amount top and bottom spacing to section
.sec-spacing-lg- Adds a large amount top and bottom spacing to section
Fluid Container .container[FLUID]
Use .container-fluid for a full width container, spanning the entire width of the viewport
.container- Standard width section contrainer
.container-fluid- Full width section contrainer
Content width [CONTENT_WIDTH]
Set the width of the content column for desktop vieports.
.col-lg-3- --
.col-lg-6- --
.col-lg-9- --
Content Position [CONTENT_ORDER]
Controls the position of the content for desktop vieports.
--- Media Left / Text Right (default)
.order-lg-last- Text Left / Media Right
Component Modifier [MODIFIER]
Optionally add a modifier class to the component.
Example
<section class="scb-tik text-bg-[COLOR] min-vh-[VALUE] sec-spacing[VALUE] [MODIFIER]">
<div class="container[FLUID] gx-0">
<div class="row g-0 min-vh-[VALUE]">
<div class="col-lg [CONTENT_ORDER]">
[Media Area]
</div>
<div class="[CONTENT_WIDTH] d-flex justify-content-center align-items-center">
<div class="section-content [content-spacer]">
[Content Area]
</div>
</div>
</div>
</div>
</section>
Media - Image
Image types [IMAGE_TYPE]
Various class names that controls how the image responds whithin it's column.
.img-fit- Will fill the entire column's height and width. The image's aspect ratio will dictate the height of the section if no minimum height is set.
.img-fluid- This applies
max-width: 100%;andheight: auto;to the image so that it scales with the parent width. .img-ar1-1
.img-ar4-5
.img-ar3-2
.img-ar16-9- Applies aspect ratio to image. Image forced to 100% of the partent's width.
Example
<img class="[IMAGE_TYPE]" src="..." srcset="..." sizes="..." alt="...">
Image Example 1
<section class="scb-tik text-bg-light sec-spacing">
<div class="container gx-0">
<div class="row g-0">
<div class="col-lg d-flex">
<img
srcset="../../../../assets/img/fpo/fpo-3-2@xs.jpg 480w,
../../../../assets/img/fpo/fpo-3-2@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img/fpo/fpo-3-2@md.jpg"
alt="Image description"
class="img-fit"
>
</div>
<div class="col-lg-3 d-flex justify-content-center align-items-center">
<div class="section-content">
<!-- BEGIN: Section Content -->
<h2>Assumenda molestiae dolorum ullam</h2>
<p>Obcaecati debitis labore sint quo, aut voluptatem vero iure consequatur delectus possimus ea modi maxime corporis aspernatur dolor minima natus placeat omnis, odio mollitia alias doloremque at. Officia, alias labore?</p>
<a href="#" class="btn btn-primary">CTA Button</a>
<!-- END: Section Content -->
</div>
</div>
</div>
</div>
</section>
Image Example 2
<section class="scb-tik text-bg-light sec-spacing-lg">
<div class="container gx-0">
<div class="row g-0">
<div class="col-lg d-flex">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-fit"
>
</div>
<div class="col-lg-9 d-flex justify-content-center align-items-center">
<div class="section-content">
<!-- BEGIN: Section Content -->
<h2>Blanditiis perspiciatis esse corrupti sunt dolore neque</h2>
<p>Long content, Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo esse rerum minus voluptates commodi nihil officia magni sequi molestiae quis!</p>
<p>Sit facilis odio consequatur, nam eius temporibus corrupti eum provident, repellendus labore dolorum excepturi ea vel nobis molestias deleniti. Hic magni vero est doloribus iusto obcaecati quam tempora?</p>
<p>Ullam cumque nobis molestias architecto perspiciatis aliquid, recusandae quod, assumenda quae eveniet eum fugit. Nostrum harum doloribus suscipit? Fugiat, consequatur ducimus. Recusandae voluptatibus suscipit quidem, quos doloribus expedita?</p>
<p>Beatae, accusantium! Fugit beatae voluptate dolore amet tempora possimus cupiditate, tenetur pariatur, est accusantium quae excepturi maiores eaque ab non repellendus earum doloribus incidunt nostrum ut accusamus inventore.</p>
<a href="#" class="btn btn-primary">CTA Button</a>
<!-- END: Section Content -->
</div>
</div>
</div>
</div>
</section>
Image Example 3
<section class="scb-tik text-bg-light">
<div class="container-fluid gx-0">
<div class="row g-0">
<div class="col-lg d-flex">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-fit"
>
</div>
<div class="col-lg-6 d-flex justify-content-center align-items-center">
<div class="section-content content-spacer">
<!-- BEGIN: Section Content -->
<h2>Blanditiis perspiciatis esse corrupti sunt dolore neque</h2>
<p>Long content, Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo esse rerum minus voluptates commodi nihil officia magni sequi molestiae quis!</p>
<p>Sit facilis odio consequatur, nam eius temporibus corrupti eum provident, repellendus labore dolorum excepturi ea vel nobis molestias deleniti. Hic magni vero est doloribus iusto obcaecati quam tempora?</p>
<p>Ullam cumque nobis molestias architecto perspiciatis aliquid, recusandae quod, assumenda quae eveniet eum fugit. Nostrum harum doloribus suscipit? Fugiat, consequatur ducimus. Recusandae voluptatibus suscipit quidem, quos doloribus expedita?</p>
<p>Beatae, accusantium! Fugit beatae voluptate dolore amet tempora possimus cupiditate, tenetur pariatur, est accusantium quae excepturi maiores eaque ab non repellendus earum doloribus incidunt nostrum ut accusamus inventore.</p>
<a href="#" class="btn btn-primary">CTA Button</a>
<!-- END: Section Content -->
</div>
</div>
</div>
</div>
</section>
<section class="scb-tik">
<div class="container-fluid gx-0">
<div class="row g-0">
<div class="col-lg d-flex order-lg-last">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-fit"
>
</div>
<div class="col-lg-6 d-flex justify-content-center align-items-center">
<div class="section-content content-spacer">
<!-- BEGIN: Section Content -->
<h2>Blanditiis perspiciatis esse corrupti sunt dolore neque</h2>
<p>Long content, Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo esse rerum minus voluptates commodi nihil officia magni sequi molestiae quis!</p>
<p>Sit facilis odio consequatur, nam eius temporibus corrupti eum provident, repellendus labore dolorum excepturi ea vel nobis molestias deleniti. Hic magni vero est doloribus iusto obcaecati quam tempora?</p>
<p>Ullam cumque nobis molestias architecto perspiciatis aliquid, recusandae quod, assumenda quae eveniet eum fugit. Nostrum harum doloribus suscipit? Fugiat, consequatur ducimus. Recusandae voluptatibus suscipit quidem, quos doloribus expedita?</p>
<p>Beatae, accusantium! Fugit beatae voluptate dolore amet tempora possimus cupiditate, tenetur pariatur, est accusantium quae excepturi maiores eaque ab non repellendus earum doloribus incidunt nostrum ut accusamus inventore.</p>
<a href="#" class="btn btn-primary">CTA Button</a>
<!-- END: Section Content -->
</div>
</div>
</div>
</div>
</section>
Gallery Example
<section class="scb-tik text-bg-light sec-spacing">
<div class="container gx-0">
<div class="row g-0">
<div class="col-lg d-flex">
<div class="row row-cols-2 row-cols-xl-3 g-3">
<div class="col">
<a href="../../../../assets/img/fpo/fpo-1-1@xl.jpg" class="kb-lightbox">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-ar1-1"
>
</a>
</div>
<div class="col">
<a href="../../../../assets/img/fpo/fpo-1-1@xl.jpg" class="kb-lightbox">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-ar1-1"
>
</a>
</div>
<div class="col">
<a href="../../../../assets/img/fpo/fpo-1-1@xl.jpg" class="kb-lightbox">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-ar1-1"
>
</a>
</div>
<div class="col">
<a href="../../../../assets/img/fpo/fpo-1-1@xl.jpg" class="kb-lightbox">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-ar1-1"
>
</a>
</div>
<div class="col">
<a href="../../../../assets/img/fpo/fpo-1-1@xl.jpg" class="kb-lightbox">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-ar1-1"
>
</a>
</div>
<div class="col">
<a href="../../../../assets/img/fpo/fpo-1-1@xl.jpg" class="kb-lightbox">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="img-ar1-1"
>
</a>
</div>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center align-items-center">
<div class="section-content">
<!-- BEGIN: Section Content -->
<h2>Fugit beatae voluptate dolore amet tempora</h2>
<p>Ullam cumque nobis molestias architecto perspiciatis aliquid, recusandae quod, assumenda quae eveniet eum fugit. Nostrum harum doloribus suscipit? Fugiat, consequatur ducimus. Recusandae voluptatibus suscipit quidem, quos doloribus expedita?</p>
<a href="#" class="btn btn-primary">CTA Button</a>
<!-- END: Section Content -->
</div>
</div>
</div>
</div>
</section>
Image Slider Example
<section class="scb-tik text-bg-light">
<div class="container-fluid gx-0">
<div class="row g-0">
<div class="col-lg d-flex">
<div class="hro-sld flex-fill img-ar3-2" style=" --kb-transition-timing: 4.75s;" data-sld-dur="5000">
<div class="sld-wrapper">
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="kb-effect1"
>
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="kb-effect2"
>
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="kb-effect3"
>
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="kb-effect4"
>
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="kb-effect5"
>
<img
srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
alt="Image description"
class="kb-effect6"
>
</div>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center align-items-center">
<div class="section-content content-spacer">
<!-- BEGIN: Section Content -->
<h2>Fugit beatae voluptate dolore amet tempora</h2>
<p>Ullam cumque nobis molestias architecto perspiciatis aliquid, recusandae quod, assumenda quae eveniet eum fugit. Nostrum harum doloribus suscipit? Fugiat, consequatur ducimus. Recusandae voluptatibus suscipit quidem, quos doloribus expedita?</p>
<a href="#" class="btn btn-primary">CTA Button</a>
<!-- END: Section Content -->
</div>
</div>
</div>
</div>
</section>