See how the tk-bootstrap patterns grid is different from the original bootstrap grid
| Small devices Phones (<=768px) | Large devices Desktops (>768px) | |||
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 1284px | ||
| Class prefix | .col-xs- |
.col-lg- |
||
| # of columns | 12 | |||
| Column width | Auto | 87px | ||
| Gutter width | 20px (10px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
| Extra small devices Phones (<768px) | Small devices Tablets (>=768px) | Medium devices Desktops (>=992px) | Large devices Desktops (>=1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # of columns | 12 | |||
| Column width | Auto | 60px | 78px | 95px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
H1 - centered by default |
<h1>
|
H1 Lorem Ipsum Dolor Sit Amet, Consectetur |
H1 Alternate - centered by default |
<h1 class="h1-alternate">
|
H1 Lorem Ipsum Dolor Sit Amet, Consectetur |
H1 Alternate - SEO friendly |
<h1 class="h1-alternate">
|
Lorem Ipsum Dolor Sit |
H2 |
<h2>
|
H2 Lorem Ipsum Dolor Sit Amet, Consectetur |
H3 |
<h3>
|
H3 Lorem Ipsum Dolor Sit Amet, Consectetur |
Secondary Info |
<div class="secondary-info">
|
Secondary Info Donec facilisis justo magna, id tincidunt orci placerat sed. Suspendisse in erat hendrerit, dictum nunc quis, dapibus lacus.
|
P |
<p>
|
Paragraph Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. |
Credit |
<span class="content label">
|
EXAMPLE HEADING LINK Value |
Content Label |
<span class="content label">
|
EXAMPLE HEADING |
Content Value |
<span class="content value">
|
EXAMPLE VALUE |
Phone |
<span itemprop="telephone">
|
850-648-4200 |
Dollars |
<span class="dollars" itemprop="priceRange">
|
$$$$$ |
Bulleted list |
<ul>
|
|
Bulleted Icon list with multiple lines |
<ul class="list-unstyled xs-divider">
|
|
A within a P |
<p>
|
Paragraph anchor Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. |
A within a H1 |
<h1>
|
Heading 1 black link blue link |
A within a H2 |
<h2>
|
Heading 2 anchor |
A within a H3 |
<h3>
|
Heading 3 anchor |
Fine Print |
<small>
|
Bacon ipsum dolor sit amet tail shoulder sirloin drumstick. |
Byline |
<p class="byline">
|
H2 within a module |
<div class="modules">
|
H2 MODULE LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING |
H3 within a module |
<div class="modules">
|
H3 Module lorem ipsum dolor sit amet, consectetur adipiscing |
Module with view more link |
<div class="modules with-more-link">
|
Real Wedding CakesView All ▸ |
H2 within a footer |
<footer>
|
|
H3 within a footer |
<footer>
|
| Font Name | Weight | Weight Name |
|---|---|---|
| Gotham | 400 | Book |
| Gotham | 500 | Medium |
| Gotham | 700 | Bold |
| Whitney | 300 | Light |
| Whitney | 400 | Book |
| Whitney | 500 | Medium |
| Whitney | 600 | Semi-bold |
NOTE: For responsive version add .responsive class to the anchor tag.
```html_example
FAVORITE
```
```html_example
```
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus et Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus et Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.more-less-md
or
.more-less-lgNOTE: To get the date consistency across multiple platforms, the datepicker attaches a hidden input field
with the $('#tk-datepicker').val(); will output YYYY-MM-DD format on desktop. Pre-populating the field on page load
expects the populated date to be in M-D-YYYY format.
##### Dependency - input-calendar.js
```html_example
```
*/
/* fonts */
/* animation */
/* This is the modified and stripped down version of the bootstrap datetime picker styles for tk-bootstrap */
/*!
* Datetimepicker for Bootstrap v3
* https://github.com/Eonasdan/bootstrap-datetimepicker/
*/
/* fonts */
/* animation */
.bootstrap-datetimepicker-widget {
top: 0;
left: 0;
width: 250px;
padding: 15px;
z-index: 99999;
border-radius: 0; }
.bootstrap-datetimepicker-widget .dow {
width: 14.2857%;
padding-top: 15px;
font-family: 'Gotham A', 'Gotham B';
font-weight: 700;
font-style: normal;
font-size: 12px; }
.bootstrap-datetimepicker-widget .datepicker > div {
display: none; }
.bootstrap-datetimepicker-widget .picker-switch {
text-align: center; }
.bootstrap-datetimepicker-widget table {
width: 100%;
margin: 0; }
.bootstrap-datetimepicker-widget thead tr:first-child {
background: #E9E9E9; }
.bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th {
text-align: center;
border-radius: 0; }
.bootstrap-datetimepicker-widget td.day {
height: 15px;
line-height: 20px;
width: 20px;
border-radius: 30px;
font-family: 'Gotham A', 'Gotham B';
font-weight: 500;
font-style: normal;
font-size: 12px; }
.bootstrap-datetimepicker-widget td.day:hover {
background: #E9E9E9;
cursor: pointer; }
.bootstrap-datetimepicker-widget td.old, .bootstrap-datetimepicker-widget td.new {
color: #C3C3C3; }
.bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td.active:hover {
background-color: #8AD2F3;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-radius: 30px; }
.bootstrap-datetimepicker-widget td.disabled, .bootstrap-datetimepicker-widget td.disabled:hover {
background: none;
color: #E9E9E9;
cursor: not-allowed;
border-radius: 30px; }
.bootstrap-datetimepicker-widget th {
height: 15px;
line-height: 15px;
width: 20px; }
.bootstrap-datetimepicker-widget th.switch {
width: 145px;
font-family: 'Gotham A', 'Gotham B';
font-weight: 500;
font-style: normal;
font-size: 12px; }
.bootstrap-datetimepicker-widget th:not(.switch) {
cursor: pointer; }
.bootstrap-datetimepicker-widget th.prev {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px; }
.bootstrap-datetimepicker-widget th.next {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px; }
.bootstrap-datetimepicker-widget th.next, .bootstrap-datetimepicker-widget th.prev {
font-size: 14px;
color: #888888; }
.calendar-input {
position: relative;
width: 250px; }
.calendar-input input[data-type="datepicker"] {
line-height: 19px;
position: relative; }
.calendar-input span.placeholder {
position: absolute;
left: 0;
top: 0;
z-index: 2;
color: #C3C3C3;
padding: 6px;
font-family: 'Whitney A', 'Whitney B';
font-weight: 400;
font-style: normal;
font-size: 16px; }
.calendar-input .icon {
position: absolute;
right: 0;
z-index: 2;
font-size: 15px;
padding: 8px;
color: #C3C3C3; }
.picker-switch {
font-family: 'Gotham A', 'Gotham B';
font-weight: 500;
font-style: normal;
font-size: 14px; }
/* mobile */
@media (max-width: 768px) {
.input-group, .calendar-input {
width: 100%; }
.calendar-input .icon {
font-size: 20px; }
.calendar-input input[data-type="datepicker"] {
line-height: 25px; }
.calendar-input span.placeholder {
padding: 9px; } }
/* icons */
/*
mobile: 28px;
desktop: 20px;
*/
/* text */
/*
mobile: 18px;
desktop: 16px;
*/
input[type="checkbox"].hide + label > .fake-checkbox {
cursor: pointer; }
input[type="checkbox"].hide + label > .fake-checkbox:before {
content: '-';
color: transparent;
position: relative;
left: -1px; }
@media (min-width: 768px) {
input[type="checkbox"].hide + label > .fake-checkbox:before {
top: 3px; } }
@media (max-width: 768px) {
input[type="checkbox"].hide + label > .fake-checkbox:before {
top: 6px; } }
input[type="checkbox"].hide:checked + label > .fake-checkbox {
background: #FFFFFF; }
input[type="checkbox"].hide:checked + label > .fake-checkbox:before {
color: #6CC6F0;
/*eventual icon character goes here*/
font-family: "tk-icons";
content: "\e623"; }
.fake-checkbox {
margin: 0 8px 0 0;
display: inline-block;
border-radius: 3px;
border: 1px solid #6CC6F0; }
@media (min-width: 768px) {
.fake-checkbox {
width: 20px;
height: 20px; } }
@media (max-width: 768px) {
.fake-checkbox {
width: 28px;
height: 28px; } }
.fake-checkbox:before {
/*eventual icon character goes here*/
width: 10px;
display: inline; }
@media (min-width: 768px) {
.fake-checkbox:before {
font-size: 20px; } }
@media (max-width: 768px) {
.fake-checkbox:before {
font-size: 28px; } }
@media (min-width: 768px) {
.fake-checkbox:before {
line-height: 10px; } }
@media (max-width: 768px) {
.fake-checkbox:before {
line-height: 16px; } }
.checkbox-label-left {
margin-left: -5px; }
@media (min-width: 768px) {
.checkbox-label-left {
font-family: 'Whitney A', 'Whitney B';
font-weight: 400;
font-style: normal;
font-size: 16px; } }
@media (max-width: 768px) {
.checkbox-label-left {
font-family: 'Whitney A', 'Whitney B';
font-weight: 400;
font-style: normal;
font-size: 18px; } }
input[type="radio"].hide + label > .fake-radio {
cursor: pointer; }
input[type="radio"].hide + label > .fake-radio:before {
content: '-';
color: transparent;
position: relative;
left: -1px; }
@media (min-width: 768px) {
input[type="radio"].hide + label > .fake-radio:before {
top: 3px; } }
@media (max-width: 768px) {
input[type="radio"].hide + label > .fake-radio:before {
top: 6px; } }
input[type="radio"].hide:checked + label > .fake-radio {
background: #FFFFFF; }
input[type="radio"].hide:checked + label > .fake-radio:before {
color: #6CC6F0;
/*eventual icon character goes here*/
font-family: "tk-icons";
content: "\e622"; }
.fake-radio {
margin: 0 8px 0 0;
display: inline-block;
border: 1px solid #6CC6F0; }
@media (min-width: 768px) {
.fake-radio {
width: 20px;
height: 20px; } }
@media (max-width: 768px) {
.fake-radio {
width: 28px;
height: 28px; } }
@media (min-width: 768px) {
.fake-radio {
border-radius: 10px; } }
@media (max-width: 768px) {
.fake-radio {
border-radius: 14px; } }
.fake-radio:before {
/*eventual icon character goes here*/
width: 10px;
display: inline; }
@media (min-width: 768px) {
.fake-radio:before {
font-size: 20px; } }
@media (max-width: 768px) {
.fake-radio:before {
font-size: 28px; } }
@media (min-width: 768px) {
.fake-radio:before {
line-height: 10px; } }
@media (max-width: 768px) {
.fake-radio:before {
line-height: 16px; } }
.radio-label-left {
margin-left: -5px; }
@media (min-width: 768px) {
.radio-label-left {
font-family: 'Whitney A', 'Whitney B';
font-weight: 400;
font-style: normal;
font-size: 16px; } }
@media (max-width: 768px) {
.radio-label-left {
font-family: 'Whitney A', 'Whitney B';
font-weight: 400;
font-style: normal;
font-size: 18px; } }
.form-control {
font-family: 'Whitney A', 'Whitney B';
font-weight: 300;
font-style: normal;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #FFFFFF;
border: 1px solid #C3C3C3;
border-radius: 0;
color: #1F1F1F;
/* mobile */
/* desktop */ }
.form-control:focus {
-moz-box-shadow: inset 0 0 4px 0 rgba(31, 31, 31, 0.3);
-webkit-box-shadow: inset 0 0 4px 0 rgba(31, 31, 31, 0.3);
box-shadow: inset 0 0 4px 0 rgba(31, 31, 31, 0.3);
border-color: #C3C3C3; }
.form-control.invalid {
border: 1px solid #FA6466; }
@media (max-width: 768px) {
.form-control {
font-size: 18px;
height: 38px;
line-height: 24px;
padding-left: 10px; } }
@media (min-width: 768px) {
.form-control {
font-size: 16px;
height: 32px;
line-height: 19px;
padding-left: 8px; } }
.form-control + .message {
display: block; }
.input-lg.invalid, .form-horizontal .form-group-lg .invalid.form-control, .input-group-lg > .invalid.form-control, .input-group-lg > .invalid.input-group-addon, .input-group-lg > .input-group-btn > .invalid.btn, .no-touch #the-knot .nav-top .input-group-lg > .input-group-btn > .invalid.signup-link, .input-md.invalid {
margin-bottom: 2px; }
.input-lg, .form-horizontal .form-group-lg .form-control, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn, .no-touch #the-knot .nav-top .input-group-lg > .input-group-btn > .signup-link {
font-size: 18px;
height: 44px;
line-height: 24px;
padding-left: 10px; }
.input-md {
font-size: 16px;
height: 32px;
line-height: 19px;
padding-left: 8px; }
@media (max-width: 768px) {
.input-group {
padding-top: 3px;
padding-bottom: 3px; } }
/*doc
---
title: "Tags"
name: 85-form-tags
category: "graphic elements"
---
Static tags
```html_example
tag
```
Clickable tags
```html_example
dresses
```
*/
/* fonts */
/* animation */
.tag {
font-family: 'Whitney A', 'Whitney B';
font-weight: 300;
font-style: normal;
font-size: 16px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #888888;
padding: 6px 12px 7px;
background-color: #FFFFFF; }
.tag span {
font-family: 'Whitney A', 'Whitney B';
font-weight: 300;
font-style: normal;
font-size: 16px; }
.tag:hover {
text-decoration: none; }
.tag.icon-general-close {
padding-bottom: 9px; }
.tag.icon-general-close:before {
font-size: 12px;
padding-right: 12px; }
/*doc
---
name: 11-form-elements-nav
title: "Form Elements"
category: "form"
---
*/
/*doc
---
parent: 11-form-elements-nav
name: 12-form-checkbox
---
##Checkbox
NOTE: There is a nested <label> tag used for the icon instead of a <span> to fix a click rebinding
issue with fastclick. The fastclick library only re-binds events to form labels and this was causing a bug on the mobile
where the click event wouldn't get attached to the span, causing the checkbox toggle to not work.
```html_example
```
*/
.fake-checkbox {
background-color: #FFFFFF;
margin-left: -33px;
/* https://www.pivotaltracker.com/story/show/86649172 */ }
/*doc
---
parent: 11-form-elements-nav
name: 12-form-radio
---
##Radio
```html_example
```
*/
.fake-radio {
background-color: #FFFFFF;
margin-left: -28px;
/* https://www.pivotaltracker.com/story/show/86649172 */ }
/*doc
---
parent: 01-input-fields-nav
name: 40-textarea-forms
---
###Textarea
```html_example
```
*/
/* mobile
18/28 */
/* desktop
16/22 */
/* mobile */
@media (max-width: 768px) {
textarea.form-control {
font-size: 18px;
line-height: 28px; } }
/* desktop */
@media (min-width: 768px) {
textarea.form-control {
font-size: 16px;
line-height: 22px; } }
/*doc
---
parent: 11-form-elements-nav
name: 12-toggle-buttons
---
###Toggle Buttons
```html_example
These blues are meant to be used in these specific use cases to optimize for readability but appear optically as the same color.
Knottie Blue
|
|
New Blue
|
|
Dark Gray
|
|
Medium Gray
|
|
Warm Gray
|
|
Light Gray
|
|
Background Gray
|
|
Black
|
|
Green
|
|
Knottie Red
|
|
Light Gray - Warm
|
|
Medium Gray - Warm
|
|
NOTE: Attach the class "xs-only" to the list item that will display on mobile. All other list items will be
hidden and the xs-only anchor tag tap area will be expanded to fill the entire background of the mobile breadcrumb.
```html_example
```
*/
/* fonts */
/* animation */
.breadcrumb {
margin-bottom: 0; }
.breadcrumb li, .breadcrumb li.active, .breadcrumb li > a:link, .breadcrumb li > a:visited {
font-family: 'Gotham A', 'Gotham B';
font-weight: 400;
font-style: normal;
font-size: 12px;
text-transform: capitalize;
color: #888888;
line-height: 24px;
letter-spacing: 0.5px; }
.breadcrumb .breadcrumb > li + li:before {
font-size: 9px;
padding: 0 8px 0 4px; }
/* mobile */
@media (max-width: 768px) {
.breadcrumb {
background: #E9E9E9;
border-radius: 0;
height: 38px;
position: relative; }
.breadcrumb li {
position: relative; }
.breadcrumb li:not(.xs-only) {
display: none; }
.breadcrumb li.xs-only {
width: 100%;
height: 100%; }
.breadcrumb li.xs-only a {
/* requires parent element to be position:relative */ }
.breadcrumb li.xs-only a:before {
content: '';
position: absolute;
top: -8px;
right: -15px;
bottom: -8px;
left: -15px;
max-height: 44px; }
.breadcrumb li, .breadcrumb li.active, .breadcrumb li > a:link, .breadcrumb li > a:visited {
color: #888888; }
.breadcrumb li:active {
opacity: 0.6; }
.breadcrumb li:before {
padding-right: 5px; }
.breadcrumb > li + li:before, .breadcrumb li:before {
font-family: "tk-icons";
content: "\e03e";
color: #888888;
vertical-align: top; } }
/* desktop */
@media (min-width: 768px) {
.breadcrumb {
background: none;
padding-left: 5px;
padding-top: 15px;
padding-bottom: 15px; }
.breadcrumb > li + li:before {
font-family: "tk-icons";
content: "\e018";
vertical-align: top; }
li > a:link:hover {
opacity: 0.6; } }
/*doc
---
title: "Toggles"
name: 66-toggle-buttons
category: navigation
---
Toggle buttons are used to tab between different types or views of content. Selected state is white, rollover is blue.
*/
/*doc
---
name: 67-toggle-text
category: navigation
---
###Toggles with Text
For full general and category icon options (both fill and stroke), please refer to: smb://nyfs01/Creative/_CREATIVE_RESOURCES/Illustrations/_The_Knot/tk-icons
*/ /*doc --- parent: 15-graphic-elements-icons name: 20-graphic-elements-icons-general ---.star-rating-lg
or
.star-rating-md, .star-rating-sm
NOTE: Use the class .no-border-lg at .storefront level to remove border and box-shadow from storefront photo card on desktop
```html_example
NOTE: Use the class .no-border-lg at .real-weddings level to remove border and box-shadow from photo card on desktop
```html_example
```
*/
/* fonts */
/* animation */
.photo-card.real-weddings .panel-image a {
/* requires parent element to be position:relative */ }
.photo-card.real-weddings .panel-image a:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: -60px;
left: 0;
max-height: none; }
.photo-card.real-weddings .panel-heading {
display: -webkit-flex;
display: flex;
height: 60px; }
.photo-card.real-weddings .panel-heading h2 {
display: block;
/* Fallback for non-webkit */
display: -webkit-box;
max-width: 100%;
line-height: 19px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: auto;
margin-bottom: auto; }
.photo-card.real-weddings .panel-heading .btn.favorite, .photo-card.real-weddings .panel-heading .no-touch #the-knot .nav-top .favorite.signup-link, .no-touch #the-knot .nav-top .photo-card.real-weddings .panel-heading .favorite.signup-link, .photo-card.real-weddings .panel-heading .btn.favorited, .photo-card.real-weddings .panel-heading .no-touch #the-knot .nav-top .favorited.signup-link, .no-touch #the-knot .nav-top .photo-card.real-weddings .panel-heading .favorited.signup-link {
bottom: 13px; }
/* desktop */
@media (min-width: 768px) {
.photo-card.real-weddings.no-border-lg {
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; } }
/*doc
---
parent: 17-photo-cards-top
name: 57-memcom-photo-card
---
##Mem Com Photo Card
```html_example
```
*/
/* fonts */
/* animation */
.photo-card.memcom .panel-image a {
/* requires parent element to be position:relative */ }
.photo-card.memcom .panel-image a:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: -60px;
left: 0;
max-height: none; }
.photo-card.memcom .panel-heading .btn, .photo-card.memcom .panel-heading .no-touch #the-knot .nav-top .signup-link, .no-touch #the-knot .nav-top .photo-card.memcom .panel-heading .signup-link {
padding: 10px;
display: inline-block; }
.photo-card.memcom .panel-heading .btn .icon-general-edit, .photo-card.memcom .panel-heading .no-touch #the-knot .nav-top .signup-link .icon-general-edit, .no-touch #the-knot .nav-top .photo-card.memcom .panel-heading .signup-link .icon-general-edit {
color: #6CC6F0;
font-size: 20px; }
.photo-card.memcom .panel-heading h3 {
display: inline-block; }
/* fonts */
/* animation */
.panel-group .panel {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
background-color: transparent;
overflow: visible;
border-bottom: 1px solid #E9E9E9; }
.panel-group .panel + .panel {
margin-top: -3px; }
.panel-group .panel .panel-heading {
border-top: 1px solid #E9E9E9;
height: 50px;
padding: 0;
position: relative; }
.panel-group .panel .panel-heading a {
text-decoration: none;
display: block; }
.panel-group .panel .panel-heading a .icon-general-caret-down {
display: none; }
.panel-group .panel .panel-heading a .icon-general-caret-up {
display: block; }
.panel-group .panel .panel-heading a[data-toggle="collapse"].collapsed .icon-general-caret-down {
display: block; }
.panel-group .panel .panel-heading a[data-toggle="collapse"].collapsed .icon-general-caret-up {
display: none; }
.panel-group .panel .panel-heading a h2 {
text-align: center;
line-height: 50px; }
.panel-group .panel .panel-heading a h2.panel-title:active {
opacity: 0.6; }
.panel-group .panel .panel-heading a .icon {
color: #6CC6F0;
font-size: 18px;
line-height: 50px;
position: absolute;
right: 30px;
top: 0; }
.panel-group .panel .panel-heading + .panel-collapse .panel-body {
border-top: 0; }
@media (min-width: 768px) {
.panel-group .panel .panel-heading a h2 {
text-align: left; }
.panel-group .panel .panel-heading a h2.panel-title:hover {
opacity: 0.6; }
.panel-group .panel .panel-heading a .icon {
right: 0; } }
/*doc
---
title: "Collapsible"
name: 63-contentmodules-collapsible
category: "Content Modules"
---
```html_example
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Note: The color filter inputs are not wrapped in an `` tag and have the `data-custom-filter="color"` and `data-filter-anchor`
attributes on the input.
The javascript window object now has TKPL.Filters object which makes selectedFilters available via
TKPL.Filters.selectedFilters
NOTE .yourContainer is container for the docs demo, replace it with your container and the loader will expand to the
container dimensions
```html_example
NOTE .yourContainer is container for the docs demo, replace it with your container and the loader will expand to the
container dimensions
```html_example
| Mobile (<768px) | Desktop (≥768px) | Responsive | |
|---|---|---|---|
Breadcrumbs |
Hidden | Visible | Yes |
Buttons |
Visible | Visible | Yes |
Cards |
Visible | Visible | Yes |
Label-Value |
Visible | Visible | Yes |
More/Less |
Visible | Visible | Yes |
Star Rating |
Visible | Visible | Yes |
List |
Visible | Visible | Visible |
Icon Best of Weddings |
Visible | Visible | Visible |
Input |
Visible | Visible | Visible |
Collapsible |
Visible | Visible | Visible |
Toggle Button |
Visible | Visible | Visible |
Typography |
Visible | Visible | Visible |
Label/Value |
Visible | Visible | Visible |
Form Label |
Visible | Visible | Visible |
Radio |
Visible | Visible | Visible |
Checkbox |
Visible | Visible | Visible |
.component-name |
Visible | Visible | Visible |