Code Examples
Tab UI (English) - Lava Template
<style>
/* Tweaks */
.connect25--tag-redgrey {
margin-right: 0;
}
.post-type-container {
display: flex;
align-items: center;
vertical-align: middle;
}
.post-type-delineator {
margin-bottom: 0.25rem;
font-weight: 700;
font-size: .75rem;
line-height: 1.5;
margin-right: 0.25rem;
}
.post-type-delineator-sm {
margin-bottom: 0.0rem;
}
</style>
<link rel="stylesheet" href="https://rockrms-assets.s3.us-east-2.amazonaws.com/theme-demo/css/utilities-connect25.css">
<link rel="stylesheet" href="https://rockrms-assets.s3.us-east-2.amazonaws.com/theme-demo/css/utilities-templates.css">
<section id="section-toggle-template" class="py-6">
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<h1 class="twmc-h1 twmc-section-title--light mb-3">Connect</h1>
</div>
<div class="col-sm-10 col-sm-offset-1">
<!-- Toggle nav -->
<div class="nav-pills--twmctoggle-connectblock3">
<ul class="nav nav-pills mt-4 mb-0 nav-pills--twmctoggle-connectblock3-ul">
<li class="active"><a data-toggle="pill" href="#twmctoggleconnect-tab1" class="twmc--btn--toggle-navtab3">The Woodlands</a></li>
<li><a data-toggle="pill" href="#twmctoggleconnect-tab2" class="twmc--btn--toggle-navtab3">Woodforest</a></li>
<li><a data-toggle="pill" href="#twmctoggleconnect-tab3" class="twmc--btn--toggle-navtab3">Montgomery</a></li>
<li><a data-toggle="pill" href="#twmctoggleconnect-tab4" class="twmc--btn--toggle-navtab3">Creekside</a></li>
<li><a data-toggle="pill" href="#twmctoggleconnect-tab5" class="twmc--btn--toggle-navtab3">The Woodlands (ESP)</a></li>
<li><a data-toggle="pill" href="#twmctoggleconnect-tab6" class="twmc--btn--toggle-navtab3">Creekside (ESP)</a></li>
</ul>
</div>
<!-- End of toggle nav -->
<!-- Tab Content -->
<div class="tab-content tab-content--twmctoggle-connectblock3">
{% assign Campuses = "1,2,3,4,5,6" | Split: "," %}
<!-- Tab Panel -->
{% for Campus in Campuses %}
<div id="twmctoggleconnect-tab{{forloop.index}}" class="twmctoggleconnect-tab tab-pane fade{% if forloop.first %} in active{% endif %}" data-tab-filter="{{campusName}}">
<div class="connect25--flex-container">
{% for item in Items %}
<!-- {{ item }} -->
{% assign TabIndex = item | Attribute: 'Tabs' :'RawValue' %}
<!-- {{ TabIndex}}-->
{% assign TabSizeInt = TabIndex | Size | AsInteger %}
<!-- TabSizeInt: {{ TabSizeInt }} -->
{% assign TabBoolean = false %}
{% if TabSizeInt > 0 %}
{% assign TabBoolean = true %}
{% endif %}
<!-- TabBoolean: {{ TabBoolean }} -->
{% if TabBoolean %}
{% if TabIndex contains Campus %}
{% assign imageGuid = item | Attribute:'Image':'RawValue' %}
<div class="connect25--flex-item connect25-cardlg-ribbon-card--wrapper">
<div class="connect25--flex-item-lg twmc-pbsmall">
<div class="connect25-cardlg--ribbon connect25-cardlg--ribbon1 py-2" style="background-image: url('https://thewoodlandsmethodist.org/GetFile.ashx?guid={{ imageGuid }}');">
<div class="connect25-cardlg--ribbon-inner"></div>
</div>
<div class="connect25-cardlg-ribbon-card--inner-wrapper">
<div>
<p class="connect25-cardlg-card--title mb-2 mt-2"><strong>{{ item.Title }}</strong></p>
<div class="connect25-tag-wrapper mb-1 ">
<span>
{% assign itemCampuses = item | Attribute:'Tabs' | Split:',' %}
{% assign EventLocation = item | Attribute: 'EventLocation' | Split: ','%}
<span class="post-type-container ">
<span class="post-type-delineator">
Campus Location:
</span>
{% for location in EventLocation %}
<p class="connect25--tag-redgrey">
<span>
{{ location }}
</span>
</p>
{% endfor %}
</span>
</span>
</div>
<p class="connect25-p connect25-cardlg-excerpt my-2">{{ item.Content | StripHtml | Truncate:250,'...' }}</p>
</div>
<div>
<hr class="hr-greythin">
<div class="connect25-cardlg--btn-wrapper">
<a href="{{ item | Attribute:'Link':'RawValue' }}" class="btn btn-connect25-trad" title="Learn More" target="_blank">{{ item | Attribute: 'Button' }}</a>
</div>
</div>
</div>
</div>
<div class="connect25--flex-item-sm connect25-cardsm-ribbon-card--wrapper a-connect25-sm">
<div class="connect25-cardsm--ribbon connect25-cardsm--ribbon1 py-2" style="background-image: url('https://thewoodlandsmethodist.org/GetFile.ashx?guid={{ imageGuid }}');">
<div class="connect25-cardsm--ribbon-inner"></div>
</div>
<div class="connect25-cardsm-ribbon-card--inner-wrapper">
<a href="{{ item | Attribute:'Link':'RawValue' }}" class="a-connect25-sm" title="Learn More" target="_blank">
<h4 class="twmc-h4 connect25-cardsm-card--title mb-1">{{ item.Title }}</h4>
<div class="connect25-tag-wrapper mb-1 connect25--smtag">
<p class="connect25--smtag">
{% assign campuses = item | Attribute:'EventLocation' | Split:',' %}
{% assign campusCount = campuses | Size %}
<span>Campus:
{% for camp in campuses %}
{{ camp }}{% if campusCount > 1 and forloop.last == false %}, {% endif %}</span>
{% endfor %}
</p>
</div>
<p class="twmc-p connect25--content-text connect25-cardsm-excerpt">{{ item.Content | StripHtml | Truncate:120,'...' }} <span class="text-traditional"><strong style="color: #862633;">→</strong></span></p>
</a>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
<script>
function createExcerptForElements(selector, maxLength = 100) {
document.querySelectorAll(selector).forEach((element) => {
const fullText = element.innerText;
if (fullText.length > maxLength) {
element.innerHTML = fullText.slice(0, maxLength) + '... <span class="text-traditional"><strong style="color: #862633;">→</strong></span>';
}
});
}
createExcerptForElements("p.connect25-cardsm-excerpt", 120);
function createExcerptForElements2(selector, maxLength = 100) {
document.querySelectorAll(selector).forEach((element) => {
const fullText = element.innerText;
if (fullText.length > maxLength) {
element.innerHTML = fullText.slice(0, maxLength) + '... ';
}
});
}
createExcerptForElements2("p.connect25-cardlg-excerpt", 250);
</script>Tab (ESP)
<style>
/* Tweaks */
.connect25--tag-redgrey {
margin-right: 0;
}
.post-type-container {
display: flex;
align-items: center;
vertical-align: middle;
}
.post-type-delineator {
margin-bottom: 0.25rem;
font-weight: 700;
font-size: .75rem;
line-height: 1.5;
margin-right: 0.25rem;
}
.post-type-delineator-sm {
margin-bottom: 0.0rem;
}
</style>
<link rel="stylesheet" href="https://rockrms-assets.s3.us-east-2.amazonaws.com/theme-demo/css/utilities-connect25.css">
<link rel="stylesheet" href="https://rockrms-assets.s3.us-east-2.amazonaws.com/theme-demo/css/utilities-templates.css">
<section id="section-toggle-template" class="py-6">
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<h1 class="twmc-h1 twmc-section-title--light mb-3">Connect</h1>
</div>
<div class="col-sm-10 col-sm-offset-1">
<!-- Toggle nav -->
<div class="nav-pills--twmctoggle-connectblock3">
<ul class="nav nav-pills mt-4 mb-0 nav-pills--twmctoggle-connectblock3-ul">
<li class="active"><a data-toggle="pill" href="#twmctoggleconnect-tab1" class="twmc--btn--toggle-navtab3">The Woodlands Español</a></li>
<li><a data-toggle="pill" href="#twmctoggleconnect-tab2" class="twmc--btn--toggle-navtab3">Creekside Español</a></li>
</ul>
</div>
<!-- End of toggle nav -->
<!-- Tab Content -->
<div class="tab-content tab-content--twmctoggle-connectblock3">
{% assign Campuses = "1,2" | Split: "," %}
<!-- Tab Panel -->
{% for Campus in Campuses %}
<div id="twmctoggleconnect-tab{{forloop.index}}" class="twmctoggleconnect-tab tab-pane fade{% if forloop.first %} in active{% endif %}" data-tab-filter="{{campusName}}">
<div class="connect25--flex-container">
{% for item in Items %}
<!-- {{ item }} -->
{% assign TabIndex = item | Attribute: 'TabsEsp' :'RawValue' %}
<!-- {{ TabIndex}} -->
{% assign TabSizeInt = TabIndex | Size | AsInteger %}
<!-- TabSizeInt: {{ TabSizeInt }} -->
{% assign TabBoolean = false %}
{% if TabSizeInt > 0 %}
{% assign TabBoolean = true %}
{% endif %}
<!-- TabBoolean: {{ TabBoolean }} -->
{% if TabBoolean %}
{% if TabIndex contains Campus %}
{% assign imageGuid = item | Attribute:'Image':'RawValue' %}
<div class="connect25--flex-item connect25-cardlg-ribbon-card--wrapper">
<div class="connect25--flex-item-lg twmc-pbsmall">
<div class="connect25-cardlg--ribbon connect25-cardlg--ribbon1 py-2" style="background-image: url('https://thewoodlandsmethodist.org/GetFile.ashx?guid={{ imageGuid }}');">
<div class="connect25-cardlg--ribbon-inner"></div>
</div>
<div class="connect25-cardlg-ribbon-card--inner-wrapper">
<div>
<p class="connect25-cardlg-card--title mb-2 mt-2"><strong>{{ item.Title }}</strong></p>
<div class="connect25-tag-wrapper mb-1 ">
<span>
{% assign itemCampuses = item | Attribute:'Tabs' | Split:',' %}
{% assign EventLocation = item | Attribute: 'EventLocation' | Split: ','%}
<span class="post-type-container ">
<span class="post-type-delineator">
Campus Location:
</span>
{% for location in EventLocation %}
<p class="connect25--tag-redgrey">
<span>
{{ location }}
</span>
</p>
{% endfor %}
</span>
</span>
</div>
<p class="connect25-p connect25-cardlg-excerpt my-2">{{ item.Content | StripHtml | Truncate:250,'...' }}</p>
</div>
<div>
<hr class="hr-greythin">
<div class="connect25-cardlg--btn-wrapper">
<a href="{{ item | Attribute:'Link':'RawValue' }}" class="btn btn-connect25-trad" title="Learn More" target="_blank">{{ item | Attribute: 'Button' }}</a>
</div>
</div>
</div>
</div>
<div class="connect25--flex-item-sm connect25-cardsm-ribbon-card--wrapper a-connect25-sm">
<div class="connect25-cardsm--ribbon connect25-cardsm--ribbon1 py-2" style="background-image: url('https://thewoodlandsmethodist.org/GetFile.ashx?guid={{ imageGuid }}');">
<div class="connect25-cardsm--ribbon-inner"></div>
</div>
<div class="connect25-cardsm-ribbon-card--inner-wrapper">
<a href="{{ item | Attribute:'Link':'RawValue' }}" class="a-connect25-sm" title="Learn More" target="_blank">
<h4 class="twmc-h4 connect25-cardsm-card--title mb-1">{{ item.Title }}</h4>
<!-- <div class="connect25-tag-wrapper mb-1 connect25--smtag">
<span class="post-type-container ">
<span class="post-type-delineator post-type-delineator-sm">
Campus Location:
</span>
</span>
</div> -->
<div class="connect25-tag-wrapper mb-1 connect25--smtag">
<p class="connect25--smtag">
{% assign campuses = item | Attribute:'EventLocation' | Split:',' %}
{% assign campusCount = campuses | Size %}
<span>Campus:
{% for camp in campuses %}
{{ camp }}{% if campusCount > 1 and forloop.last == false %}, {% endif %}</span>
{% endfor %}
</p>
</div>
<p class="twmc-p connect25--content-text connect25-cardsm-excerpt">{{ item.Content | StripHtml | Truncate:120,'...' }} <span class="text-traditional"><strong style="color: #862633;">→</strong></span></p>
</a>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
<script>
function createExcerptForElements(selector, maxLength = 100) {
document.querySelectorAll(selector).forEach((element) => {
const fullText = element.innerText;
if (fullText.length > maxLength) {
element.innerHTML = fullText.slice(0, maxLength) + '... <span class="text-traditional"><strong style="color: #862633;">→</strong></span>';
}
});
}
createExcerptForElements("p.connect25-cardsm-excerpt", 120);
function createExcerptForElements2(selector, maxLength = 100) {
document.querySelectorAll(selector).forEach((element) => {
const fullText = element.innerText;
if (fullText.length > maxLength) {
element.innerHTML = fullText.slice(0, maxLength) + '... ';
}
});
}
createExcerptForElements2("p.connect25-cardlg-excerpt", 250);
</script>no-tab
<style>
/* Tweaks */
.connect25--tag-redgrey {
margin-right: 0;
}
.post-type-container {
display: flex;
align-items: center;
vertical-align: middle;
}
.post-type-delineator {
margin-bottom: 0.25rem;
font-weight: 700;
font-size: .75rem;
line-height: 1.5;
margin-right: 0.25rem;
}
.post-type-delineator-sm {
margin-bottom: 0.0rem;
}
</style>
<link rel="stylesheet" href="https://rockrms-assets.s3.us-east-2.amazonaws.com/theme-demo/css/utilities-connect25.css">
<link rel="stylesheet" href="https://rockrms-assets.s3.us-east-2.amazonaws.com/theme-demo/css/utilities-templates.css">
<section id="section-toggle-template" class="py-6">
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<h1 class="twmc-h1 twmc-section-title--light mb-3">Connect</h1>
</div>
<div class="col-sm-10 col-sm-offset-1">
<!-- Card Content -->
<div class="connect25--flex-container">
{% for item in Items %}
{% assign imageGuid = item | Attribute:'Image','RawValue' %}
<div class="connect25--flex-item connect25-cardlg-ribbon-card--wrapper">
<!-- lg -->
<div class="connect25--flex-item-lg twmc-pbsmall">
<div class="connect25-cardlg--ribbon connect25-cardlg--ribbon1 py-2" style="background-image: url('https://thewoodlandsmethodist.org/GetFile.ashx?guid={{ imageGuid }}');">
<div class="connect25-cardlg--ribbon-inner"></div>
</div>
<div class="connect25-cardlg-ribbon-card--inner-wrapper">
<div>
<p class="connect25-cardlg-card--title mb-2 mt-2"><strong>{{ item.Title }}</strong></p>
<div class="connect25-tag-wrapper mb-1 ">
<span>
{% assign itemCampuses = item | Attribute:'Tabs' | Split:',' %}
{% assign EventLocation = item | Attribute: 'EventLocation' | Split: ','%}
<span class="post-type-container ">
<span class="post-type-delineator">
Campus Location:
</span>
{% for location in EventLocation %}
<p class="connect25--tag-redgrey">
<span>
{{ location }}
</span>
</p>
{% endfor %}
</span>
</span>
</div>
<p class="connect25-p connect25-cardlg-excerpt my-2">{{ item.Content | StripHtml | Truncate:250,'...' }}</p>
</div>
<div>
<hr class="hr-greythin">
<div class="connect25-cardlg--btn-wrapper">
<a href="{{ item | Attribute:'Link':'RawValue' }}" class="btn btn-connect25-trad" title="Learn More" target="_blank">{{ item | Attribute: 'Button' }}</a>
</div>
</div>
</div>
</div>
<!-- lg end -->
<!-- small start -->
<div class="connect25--flex-item-sm connect25-cardsm-ribbon-card--wrapper a-connect25-sm">
<div class="connect25-cardsm--ribbon connect25-cardsm--ribbon1 py-2" style="background-image: url('https://thewoodlandsmethodist.org/GetFile.ashx?guid={{ imageGuid }}');">
<div class="connect25-cardsm--ribbon-inner"></div>
</div>
<div class="connect25-cardsm-ribbon-card--inner-wrapper">
<a href="{{ item | Attribute:'Link','RawValue' }}" class="a-connect25-sm" title="Learn More" target="_blank">
<h4 class="twmc-h4 connect25-cardsm-card--title mb-1">{{ item.Title }} </h4>
<div class="connect25-tag-wrapper mb-1 ">
<p class="connect25--smtag">
{% assign campuses = item | Attribute:'EventLocation' | Split:',' %}
{% assign campusCount = campuses | Size %}
<span>Campus:
{% for camp in campuses %}
{{ camp }}{% if campusCount > 1 and forloop.last == false %}, {% endif %}</span>
{% endfor %}
</p>
{% comment %}<p class="connect25--smtag">{% endcomment %}
{% comment %} <span>{{ item | Attribute:'Campus' }}</span> | <span>{{ item | Attribute:'Audience' }}</span> | {% endcomment %}
{% comment %}</p>{% endcomment %}
</div>
<p class="twmc-p connect25--content-text connect25-cardsm-excerpt">{{ item.Content | StripHtml | Truncate:120,'...' }} <span class="text-traditional"><strong style="color: #862633;">→</strong></span></p>
</a>
{% comment %} Featured: {{ item | Attribute:'Featured' }} {% endcomment %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
<!-- Excerpt JS -->
<script>
function createExcerptForElements(selector, maxLength = 100) {
const elements = document.querySelectorAll(selector);
elements.forEach((element) => {
const fullText = element.innerText;
if (fullText.length > maxLength) {
const excerptText = fullText.slice(0, maxLength) + '... ';
element.innerHTML = excerptText + '<span class="text-traditional"><strong style="color: #862633;">→</strong></span>';
}
});
}
createExcerptForElements("p.connect25-cardlg-excerpt", 250);
</script>