.o-column-layout
<div class="o-column-layout">
<div class="o-column-layout__main"></div>
<div class="o-column-layout__aside"></div>
</div>
.o-grid
.o-grid_masonry
<div class="o-grid">
<div class="o-grid__item"></div>
</div>
<div class="o-grid o-grid_masonry">
<div class="o-grid__sizer"></div>
<div class="o-grid__item"></div>
</div>
.o-stack
.o-stack_mod
Available Patterns:
'square-100', 'rect-h-75', 'rect-h-75', 'square-50''rect-h-100', 'rect-h-75', 'rect-v-75''rect-v-75', 'square-100', 'rect-h-100', 'rect-h-100'
<div class="o-stack__item o-stack__item_square-100" >
<div class="c-image-link js-waypoint">
<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/650x650);"></div>
</div>
</div>
<div class="o-stack__item o-stack__item_rect-h-75" >
<div class="c-image-link js-waypoint">
<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/490x320);"></div>
</div>
</div>
<div class="o-stack__item o-stack__item_rect-h-75" >
<div class="c-image-link js-waypoint">
<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/490x320);"></div>
</div>
</div>
<div class="o-stack__item o-stack__item_square-50" >
<div class="c-image-link js-waypoint">
<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/325x325);"></div>
</div>
</div>
<div class="o-stack__item o-stack__item_rect-v-75" >
<div class="o-stack__item-child js-waypoint">
<div></div>
</div>
<div class="c-image-link js-waypoint">
<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/320x490);"></div>
</div>
</div>
<div class="o-stack__item o-stack__item_square-100" >
<div class="o-stack__item-child js-waypoint">
<div></div>
</div>
<div class="c-image-link js-waypoint">
<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/650x650);"></div>
</div>
</div>
<div class="o-stack__item o-stack__item_rect-h-100" >
<div class="o-stack__item-child js-waypoint">
<div></div>
</div>
<div class="c-image-link js-waypoint">
<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/650x425);"></div>
</div>
</div>
<div class="o-stack__item o-stack__item_rect-h-100" >
<div class="o-stack__item-child js-waypoint">
<div></div>
</div>
<div class="c-image-link js-waypoint">
<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/650x425);"></div>
</div>
</div>
.c-article-teaser
<div class="c-article-teaser">
<a class="c-label" href="#" style="background-color: #111;">Article Label</a>
<a class="c-article-teaser__link" href="#"></a>
<div class="c-article-teaser__bg">
<div class="c-article-teaser__image" style="background-image:url(http://via.placeholder.com/360x300);"></div>
</div>
<div class="c-article-teaser__meta">
<span class="c-article-teaser__subtitle" style="color:">Article Subtitle</span>
<h3 class="c-article-teaser__title">Article Title</h3>
</div>
</div>
<div class="c-ba-widget">
<div class="c-ba-widget__section">
<div class="c-ba-widget__image" style="background-image:url();"></div>
</div>
<div class="c-ba-widget__section " >
<div class="c-ba-widget__image" style="background-image:url();"></div>
</div>
<div class="c-ba-widget__control">
<div class="c-ba-widget__control-btn"></div>
</div>
</div>
.c-ba-widget
.c-breadcrumbs
With optional Card Icon
<div class="c-breadcrumbs" style="color:" data-icon="">
<?php if(function_exists('bcn_display')) { bcn_display();} ?>
</div>
.c-callout
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tempora repudiandae fuga omnis distinctio deserunt, repellendus doloribus expedita maxime in.
Lorem ipsum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tempora repudiandae fuga omnis distinctio deserunt, repellendus doloribus expedita maxime in.
Lorem ipsum.
<div class="c-callout">
<div class="c-callout__bg" style="background-image:url()"></div>
<div class="c-callout__content">
<h3 class="c-callout__title"></h3>
<p class="c-callout__text"></p>
<a href="#" target="" class="c-callout__link"></a>
</div>
</div>
.c-card
Optional Card Icon
Variative Backgrounds
<div class="c-card" style="background-color:;">
<a href="#" class="c-card__link"></a>
<div class="c-card__background" style="background-image:url();"></div>
<div class="c-card__content">
<img src="" alt="" class="c-card__icon">
<h3 class="c-card__title"></h3>
<p class="c-card__excerpt"></p>
</div>
</div>
.c-card-slider
Styles depend on the type of collection (project, post, service, sub) passed to the data-collection-type
.c-card-slider_post
<div class="c-card-slider c-card-slider_post" >
<div class="c-card-slider__bg"></div>
<div class="c-card-slider__container js-slider" data-slider="card" data-card-type="project">
<div class="c-card-slider__wrapper">
<div class="c-card-slider__item c-card-slider__item_no-shadow">
<div class="c-article-teaser"></div>
</div>
</div>
<div class="c-card-slider__arrow c-card-slider__arrow_prev"></div>
<div class="c-card-slider__arrow c-card-slider__arrow_next"></div>
</div>
<a href="<?php echo get_the_permalink(get_option( 'page_for_posts' )); ?>" class="c-link-back" style="color: <?php echo $brand_color; ?>;">BACK TO ALL POSTS</a>
</div>
.c-card-slider_project
<div class="c-card-slider c-card-slider_project" >
<div class="c-card-slider__bg" style="background-image: url()"></div>
<a
href="<?php echo get_the_permalink(get_page_by_path('projects')); ?>"
class="c-card-slider__archive-link"
style="color: <?php echo $brand_color; ?>; border-color: <?php echo $brand_color; ?>">
MORE CASE STUDIES
</a>
<div class="c-card-slider__container js-slider" data-slider="card" data-card-type="project">
<div class="c-card-slider__wrapper">
<div class="c-card-slider__item c-card-slider__item_no-shadow">
<div class="c-article-teaser"></div>
</div>
</div>
<div class="c-card-slider__arrow c-card-slider__arrow_prev"></div>
<div class="c-card-slider__arrow c-card-slider__arrow_next"></div>
</div>
</div>
.c-card-slider_service / .c-card-slider_sub
<div class="c-card-slider c-card-slider_service" >
<div class="c-card-slider__bg" style="background-image: url()"></div>
<div class="c-card-slider__container js-slider" data-slider="card" data-card-type="service">
<div class="c-card-slider__wrapper">
<div class="c-card-slider__item">
<div class="c-card"></div>
</div>
</div>
<div class="c-card-slider__arrow c-card-slider__arrow_prev"></div>
<div class="c-card-slider__arrow c-card-slider__arrow_next"></div>
</div>
<a class="c-link c-card-slider__view-more" style="color: <?php echo $brand_color; ?>; border-color: <?php echo $brand_color; ?>">View More Services</a>
</div>
.c-category-nav
<div class="c-category-nav">
<h3 class="c-heading" style="color:; "></h3>
<ul class="c-category-nav__list">
<li class="c-category-nav__item c-category-nav__item_parent">
<a class="c-category-nav__link" href="#"></a>
<ul class="c-category-nav__list">
<li class="c-category-nav__item">
<a href="#" class="c-category-nav__link" style="color:;"></a>
</li>
</ul>
<div class="c-decorator c-decorator_horizontal" style="fill:;" >
<div class="c-decorator__line" style="background-color:;"></div>
</div>
</li>
</ul>
</div>
.c-decorator
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur non odit, atque a reiciendis. Iusto laboriosam suscipit quidem possimus animi eaque accusantium, nostrum ex odit optio ullam corporis facilis maxime sed sit dolorem voluptates eius soluta, nemo quaerat explicabo at, quas, saepe culpa officiis! Odio natus dignissimos, aliquam porro. Nulla!
.c-decorator_vertical
<div class="c-decorator c-decorator_vertical" style="fill: <?php echo $brand_color;?>;" >
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus vitae totam animi nam veniam reprehenderit.
.c-decorator_horizontal
<div class="c-decorator c-decorator_horizontal" style="fill: <?php echo $brand_color;?>;" >
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum laudantium, asperiores beatae molestiae veritatis voluptatibus possimus, molestias quam quod! Suscipit.
.c-decorator_mixed
<div class="c-decorator c-decorator_horizontal c-decorator_mixed" style="fill: <?php echo $brand_color;?>;" >
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
<img class="c-decorator__icon svg" src="<?php echo get_template_directory_uri() ?>/images/decorative-icon-01.svg" alt="">
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
</div>
.c-featured-services
<div class="c-featured-services">
<header class="c-featured-services__header">
<h3 class="c-featured-services__title"></h3>
</header>
<div class="c-featured-services__list">
<a class="c-featured-services__link" style="fill: #323131;" href="#">
<img src="" class="svg" alt="">
<span class="c-featured-services__link-text"></span>
</a>
</div>
</div>
<div class="c-filter-bar">
<h3 class="c-title">Filter projects</h3>
<div class="c-filter-bar__select" style="border-color: <?php echo $brand_color; ?>">
<div class="c-filter-bar__select-title" style="color: <?php echo $brand_color; ?>">
<h4 class="c-heading">BY SERVICE</h4>
</div>
<ul class="c-filter-bar__options">
<?php
$services = get_posts(array('post_type' => 'service', 'hide_empty' => false, 'numberposts' => -1));
foreach($services as $service) :
?>
<li class="c-filter-bar__options-entry" data-filter=".<?php echo $service->post_name; ?>">
<div class="c-decorator c-decorator_horizontal" style="fill: <?php echo $brand_color;?>;" >
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"></div>
</div>
<h4 class="c-heading"><?php echo $service->post_title; ?></h4>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="c-filter-bar__select" style="border-color: <?php echo $brand_color; ?>">
<div class="c-filter-bar__select-title" style="color: <?php echo $brand_color; ?>">
<h4 class="c-heading">BY MATERIAL</h4>
</div>
<ul class="c-filter-bar__options">
<?php
$tags = get_terms(array('hide_empty' => false,'taxonomy' => 'project-tags'));
foreach($tags as $tag) :
?>
<li class="c-filter-bar__options-entry" data-filter=".<?php echo $tag->slug; ?>">
<div class="c-decorator c-decorator_horizontal" style="fill: <?php echo $brand_color;?>;" >
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"></div>
</div>
<h4 class="c-heading"><?php echo $tag->name; ?></h4>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
.c-filter-bar
<div class="c-landing-intro">
<h1 class="c-title" style="color: <?php echo $brand_color; ?>"></h1>
<div class="c-landing-intro__content"></div>
<div class="c-decorator c-decorator_horizontal c-decorator_mixed" style="fill: <?php echo $brand_color;?>;" >
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
<img class="c-decorator__icon svg" src="<?php echo get_template_directory_uri() ?>/images/decorative-icon-01.svg" alt="decoration">
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
</div>
</div>
.c-landing-intro
.c-photo-slider
<div class="c-photo-slider" >
<div class="c-photo-slider__container js-slider" data-slider="viewport">
<div class="c-photo-slider__wrapper">
<div class="c-photo-slider__item" >
<div class="c-photo-slider__image" style="background-image: url();"></div>
<div class="c-photo-slider__caption" style="color: <?php echo $brand_color; ?>"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.31 17.37"><defs><style>.cls-1{fill:<?php echo $brand_color; ?>;}</style></defs><title>caption-icon</title><path class="cls-1" d="M8.06,7.47l.52.08A4.73,4.73,0,0,0,8.5,9.6q.59,1.83.88,1.76v.36H8.94a5.76,5.76,0,0,1-3.58-4,11.9,11.9,0,0,1,2.71-.22Zm1.4.22a6.75,6.75,0,0,1,3.22,1.9,2.08,2.08,0,0,1,.21,1.09,2.41,2.41,0,0,1-1.9.81l-.65-.29-.44-.59L9.31,9V7.7Zm-6-5.42-1-.66A2.33,2.33,0,0,0,.52,2L0,2.71v.07l.52-.51.59-.15.59.51.07.81L1.46,5v.81a1.84,1.84,0,0,0,.59,1.09,1.52,1.52,0,0,0,1.17.22q1-.52,1.25-.37l.15.59A5.32,5.32,0,0,0,2.34,9l-.59.8-.59,1.32A8.23,8.23,0,0,0,1,13.77a8,8,0,0,0,.88,2q1.46,1.68,2.71,1.61a7.43,7.43,0,0,0,.8-1.46,7.39,7.39,0,0,0,.08-2.64q-.29-1.46-2.34-1.9l-.44-.59V10l.51-1A4.14,4.14,0,0,1,4.62,8,7.13,7.13,0,0,0,8.5,12.3l1.32.29q.29.22,2.2-.36l1.17-.73h.37l.65.36.52,1.1-.08,1.46a2.67,2.67,0,0,1-.88,1.17V16l.29.29h.22a1.14,1.14,0,0,0,.73-.59q.95.07,1-.44a9,9,0,0,0-.52-2.57,13.05,13.05,0,0,0-1.09-2.12A9.49,9.49,0,0,0,11.5,8L9.45,7.11q.88-1.69,1-1.61a1.46,1.46,0,0,1,1.09-.08l1.69,1.17.73.15a15.73,15.73,0,0,0,2.93-1.17A1.63,1.63,0,0,1,18,5.94l.29.29V5.64A5.86,5.86,0,0,0,16.92,3.3l-1.25-.73a4.89,4.89,0,0,0-1.76-.22A6.15,6.15,0,0,0,8.64,7a3.73,3.73,0,0,0-1.76-.15l-1.61.29L5.2,6.74l.07-.15,1.54.08q1.39-.22.95-2.42A3.65,3.65,0,0,1,7,1.84q.52-1,1.61-.15A3.14,3.14,0,0,0,7.11.88a2.45,2.45,0,0,0-1.4.52L4.77,2.78a1.6,1.6,0,0,1,.29-1.24L5.57,1,6.23.59,5.13.81l-.8.51A1.74,1.74,0,0,0,4.1,0H4L3.89.59l.29.73A3.62,3.62,0,0,0,2.28,1l-.15.15a3.24,3.24,0,0,1,1.39.52q.59.95.52,1.24Z"/></svg></div>
</div>
</div>
<div class="c-photo-slider__pagination"></div>
<div class="c-photo-slider__arrow c-photo-slider__arrow_prev"></div>
<div class="c-photo-slider__arrow c-photo-slider__arrow_next"></div>
</div>
</div>
<div class="o-column-layout">
<div class="c-post-intro" style="background-image: url();">
<div class="c-label" style="background-color: <?php echo $brand_color; ?>"></div>
<?php get_template_part('templates/share-list'); ?>
<?php get_template_part('templates/breadcrumbs'); ?>
</div>
</div>
.c-post-intro
<div class="c-share-list">
<h4 class="c-share-list__title" style="color: <?php echo $brand_color; ?>" >SHARE</h4>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" class="c-share-list__item c-share-list__item_facebook"></a>
<a target="_blank" href="https://twitter.com/home?status=<?php echo get_permalink(); ?>" class="c-share-list__item c-share-list__item_twitter"></a>
<a target="_blank" href="mailto:?&subject=<?php echo get_the_title(); ?>&body=<?php echo get_the_permalink(); ?>" class="c-share-list__item c-share-list__item_mail"></a>
</div>
.c-share-list
<div class="c-social-list" style="color: <?php echo $brand_color; ?>">
<a href="<?php echo $s_facebook; ?>" target="_blank" class="c-social-list__item c-social-list__item_facebook"></a>
<a href="<?php echo $s_instagram; ?>" target="_blank" class="c-social-list__item c-social-list__item_instagram"></a>
<a href="<?php echo $s_linkedin; ?>" target="_blank" class="c-social-list__item c-social-list__item_linkedin"></a>
<a href="<?php echo $s_houzz; ?>" target="_blank" class="c-social-list__item c-social-list__item_houzz"></a>
</div>
.c-social-list
<h2 class="c-subtitle">
<span class="c-subtitle__text"></span>
<div class="c-decorator c-decorator_horizontal c-decorator_mixed" style="fill: <?php echo $brand_color;?>;" >
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
<img class="c-decorator__icon svg" src="<?php echo get_template_directory_uri() ?>/images/decorative-icon-01.svg" alt="">
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
</div>
</h2>
.c-subtitle
.c-testimonials
<div class="c-testimonials">
<header class="c-sidebar-header">
<h3 class="c-sidebar-header__title">TESTIMONIALS</h3>
<div class="c-decorator c-decorator_horizontal" style="fill: <?php echo $brand_color;?>;" >
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
</div>
</header>
<div class="c-testimonials__entry">
<blockquote class="c-testimonials__entry-content" style="color: <?php echo $brand_color; ?>;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nobis. Suscipit molestiae nesciunt, doloremque tempora unde nisi ullam saepe hic!</blockquote>
<span class="c-testimonials__entry-author">Title</span>
<span class="c-testimonials__entry-location">Location</span>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nobis. Suscipit molestiae nesciunt, doloremque tempora unde nisi ullam saepe hic!Location
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nobis. Suscipit molestiae nesciunt, doloremque tempora unde nisi ullam saepe hic!Location
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta esse corporis, cupiditate quas possimus aut id unde iusto aperiam dolorem.
Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Elit lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perferendis cumque ullam doloremque distinctio, nihil officia maiores tempore inventore recusandae.
.c-text-editor
ACF flexible content 'editor' field is required
<style>
.c-text-editor h1,
.c-text-editor h2,
.c-text-editor h3,
.c-text-editor h4,
.c-text-editor h5,
.c-text-editor h6 {
color: <?php echo $brand_color; ?>
}
</style>
<div class="c-text-editor">
get_sub_field('editor');
</div>
.c-title
<h3 class="c-title"></h3>
.c-heading
<h3 class="c-heading"></h3>
.c-label
<span class="c-label" style="background-color: <?php echo $brand_color; ?>;">Label</span>
.c-sidebar-header
<header class="c-sidebar-header">
<h3 class="c-sidebar-header__title"></h3>
<div class="c-decorator c-decorator_horizontal" style="fill: <?php echo $brand_color;?>;" >
<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
</div>
</header>
<div class="c-viewport-image" style="background-image: url(http://via.placeholder.com/1920x1080);">
<div class="c-viewport-image__caption" style="color: <?php echo $brand_color; ?>"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.31 17.37"><defs><style>.cls-1{fill:<?php echo $brand_color; ?>;}</style></defs><title>caption-icon</title><path class="cls-1" d="M8.06,7.47l.52.08A4.73,4.73,0,0,0,8.5,9.6q.59,1.83.88,1.76v.36H8.94a5.76,5.76,0,0,1-3.58-4,11.9,11.9,0,0,1,2.71-.22Zm1.4.22a6.75,6.75,0,0,1,3.22,1.9,2.08,2.08,0,0,1,.21,1.09,2.41,2.41,0,0,1-1.9.81l-.65-.29-.44-.59L9.31,9V7.7Zm-6-5.42-1-.66A2.33,2.33,0,0,0,.52,2L0,2.71v.07l.52-.51.59-.15.59.51.07.81L1.46,5v.81a1.84,1.84,0,0,0,.59,1.09,1.52,1.52,0,0,0,1.17.22q1-.52,1.25-.37l.15.59A5.32,5.32,0,0,0,2.34,9l-.59.8-.59,1.32A8.23,8.23,0,0,0,1,13.77a8,8,0,0,0,.88,2q1.46,1.68,2.71,1.61a7.43,7.43,0,0,0,.8-1.46,7.39,7.39,0,0,0,.08-2.64q-.29-1.46-2.34-1.9l-.44-.59V10l.51-1A4.14,4.14,0,0,1,4.62,8,7.13,7.13,0,0,0,8.5,12.3l1.32.29q.29.22,2.2-.36l1.17-.73h.37l.65.36.52,1.1-.08,1.46a2.67,2.67,0,0,1-.88,1.17V16l.29.29h.22a1.14,1.14,0,0,0,.73-.59q.95.07,1-.44a9,9,0,0,0-.52-2.57,13.05,13.05,0,0,0-1.09-2.12A9.49,9.49,0,0,0,11.5,8L9.45,7.11q.88-1.69,1-1.61a1.46,1.46,0,0,1,1.09-.08l1.69,1.17.73.15a15.73,15.73,0,0,0,2.93-1.17A1.63,1.63,0,0,1,18,5.94l.29.29V5.64A5.86,5.86,0,0,0,16.92,3.3l-1.25-.73a4.89,4.89,0,0,0-1.76-.22A6.15,6.15,0,0,0,8.64,7a3.73,3.73,0,0,0-1.76-.15l-1.61.29L5.2,6.74l.07-.15,1.54.08q1.39-.22.95-2.42A3.65,3.65,0,0,1,7,1.84q.52-1,1.61-.15A3.14,3.14,0,0,0,7.11.88a2.45,2.45,0,0,0-1.4.52L4.77,2.78a1.6,1.6,0,0,1,.29-1.24L5.57,1,6.23.59,5.13.81l-.8.51A1.74,1.74,0,0,0,4.1,0H4L3.89.59l.29.73A3.62,3.62,0,0,0,2.28,1l-.15.15a3.24,3.24,0,0,1,1.39.52q.59.95.52,1.24Z"/></svg></div>
</div>
.c-viewport-image