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-spacer will be added to the .section-content element
.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%; and height: 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

View in new window
<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

View in new window
View in new window for full preview
<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

View in new window
View in new window for full preview
<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

View in new window
<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

View in new window
<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>