Shortcodes
-
Custom Widgets
01
-
Instructions
02
-
Live preview
03
-
Archived widgets
04
-
Archived widgets 2
05
-
Your questions
06
Select a widget, click the copy button and then paste the code into the Widget/HTML module of your website.
Text Card
<div class="is-matrix is-card content-teaser bg-primary-light is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button mid-round right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Text Card 2
<div class="is-matrix is-card content-teaser bg-dark color-white is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button ghost-white right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Text Card 3
<div class="is-matrix is-card content-teaser br10 bg-white has-shadow is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button bg-round large-btn right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
Text Card 4
<div class="is-matrix is-card content-teaser bg-white has-border-shadow is--flex is-flex-block cc-clearover">
<div class="center-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
<br />
<a class="hs-button weight-500 ghost-dark" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Learn more<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
Text Card 5
<div class="is-matrix is-card content-teaser bg-dark color-white white-solid-border is--flex is-flex-block cc-clearover">
<div class="center-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
<br />
<a class="hs-button weight-500 ghost-white" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Learn more<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
Text Card 6
<div class="is-matrix is-card is-parallax is--flex rel no-padding br15" style=
"background: url('https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-abstract.jpg') no-repeat center;background-attachment:scroll!important;background-size: cover!important;">
<div class="hs-overlay opacity-8 bg-primary br15">
</div>
<div class="max-inner color-white m-padding cc-clearover is-anim-block" style="padding:20px 0;">
<div class="is-matrix content-teaser bg-transparent is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<p>
Create a beautiful Jimdo website for your business
</p>
<h3>
Make it stand out
</h3>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button right-align weight-500 bg-white br15" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Learn more<svg viewbox="0 0 24 24"
focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
</div>
Image Slider
<style>
/* <![CDATA[ */
.is-matrix-slider .item {
height:450px!important;
}
@media only screen and (max-width: 459px) {
.is-matrix-slider .item {
height:300px!important;
}
}
/*]]>*/
</style><div class="is-matrix-slider is-content-slider owl-carousel owl-theme">
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide01.jpg" alt="Matrix Themes" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide02.jpg" alt="Matrix Themes" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Make dreams come true
</h3>
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide03.jpg" alt="Matrix Themes" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Work with the professionals
</h3>
<!-- ************* mid-rounded button ************* -->
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-content-slider').owlCarousel({
autoPlay: 5000,
autoplay: true,
smartSpeed:250, // Speed Calculate
items : 1,
nav: true,
loop:true,
navText: ["<i class='fa fa-angle-left'><\/i>", "<i class='fa fa-angle-right'><\/i>"],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
});
})(jQuery);
//]]>
</script>
Image Slider (FadeIn)
<style>
/* <![CDATA[ */
.is-matrix-slider .item {
height:450px!important;
}
@media only screen and (max-width: 459px) {
.is-matrix-slider .item {
height:300px!important;
}
}
/*]]>*/
</style><div class="is-matrix-slider is-fadeIn-slider owl-carousel owl-theme has-inside-dots">
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide01.jpg" alt="Matrix Themes" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Stand out with a professional Jimdo website
</h3>
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide02.jpg" alt="Matrix Themes" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Make dreams come true
</h3>
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
<!-- start slide -->
<div class="item has-overlay">
<img src="https://u.jimcdn.com/cms/o/sba417fe136d7d4a0/userlayout/img/matrix-slide03.jpg" alt="Matrix Themes" />
<div class="is-new-caption">
<div class="inner">
<div class="col-6 color-white add-30 cc-box">
<h3>
Work with the professionals
</h3>
<!-- ************* mid-rounded button ************* -->
<a class="link-outlined link-white" href="https://www.matrix-themes.com/" target="">Read more</a>
</div>
</div>
</div>
</div>
<!-- end slide -->
</div>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.is-fadeIn-slider').owlCarousel({
loop: true,
slideSpeed: 300,
paginationSpeed: 400,
smartSpeed:250, // Speed Calculate
autoplay: true,
navText: ["<i class='fa fa-angle-left'><\/i>", "<i class='fa fa-angle-right'><\/i>"],
// autoplayHoverPause:true,
items: 1,
animateIn: 'fadeIn', // add this
animateOut: 'fadeOut', // and this
responsiveClass: true,
nav: true,
responsive: {
0: {
items: 1
// nav:true
},
600: {
items: 1,
// nav: false
},
1000: {
items: 1,
// nav: true
// loop:false
}
}
});
});
})(jQuery);
//]]>
</script>
Image Card
<div class="is-matrix is-anim-block is-card bg-primary-light is-flex is-flex-block no-padding">
<div class="col-3">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
What's new in 2024 Tech
</h3>
<span class="is-tag">image card</span>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="primary-color" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Card 2
<div class="is-matrix is-card is-anim-block is-flex is-flex-block no-padding has-border-radius has-shadow">
<div class="col-3">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
What's new in 2024 Tech
</h3>
<span class="is-tag">image card</span>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="primary-color" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Card 3
<div class="is-matrix is-anim-block is-card bg-primary-dark color-white is-flex is-flex-block no-padding">
<div class="col-3">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
What's new in 2024 Tech
</h3>
<span class="is-tag bg-dark">image card</span>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button mid-round small-btn" href="https://www.matrix-themes.com/" target="">Custom Button</a>
</div>
</div>
</div>
Image Card 4
<div class="is-matrix is-anim-block is-card is-flex is-flex-block no-padding has-border-shadow">
<div class="col-3">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
What's new in 2024 Tech
</h3>
<span class="is-tag">image card</span>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button weight-500 ghost-dark extra-small-btn" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24"
focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Card 5
<div class="is-matrix is-anim-block is-card is-flex is-flex-block no-padding has-color-border-shadow">
<div class="col-3">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
What's new in 2024 Tech
</h3>
<span class="is-tag">image card</span>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button weight-500 extra-small-btn" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable=
"false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Image Card 6
<div class="is-matrix is-anim-block is-card bg-primary-light is-flex is-flex-block no-padding">
<div class="col-3">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
What's new in 2024 Tech
</h3>
<span class="is-tag">image card</span>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button bg-dark small-btn" href="https://www.matrix-themes.com/" target="">Custom Button</a> <a class="hs-button weight-500 ghost-dark small-btn" style="padding: 18px 25px;"
href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role="presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
</div>
</div>
</div>
Icon Card
<div class="is-matrix is-card is-anim-block is-flex is-flex-block no-padding">
<div class="col-1">
<div class="fa fa-gift fa-3x primary-color">
</div>
</div>
<div class="col-12">
<h3>
The Icon Card title
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
Icon Card 2
<div class="is-matrix is-card is-anim-block bg-primary-light br10 is-flex is-flex-block no-padding">
<div class="col-1">
<div class="fa fa-gift fa-3x primary-color" style="padding:20px 20px 0 20px;">
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
The Icon Card title
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
Icon Card 3
<div class="is-matrix is-card is-anim-block bg-primary color-white is-flex is-flex-block no-padding">
<div class="col-1">
<div class="fa fa-gift fa-3x" style="padding:20px 20px 0 20px;">
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
The Icon Card title
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="arrow-link is-white" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
Icon Card 4
<div class="is-matrix is-card is-anim-block is-flex is-flex-block no-padding" style="margin-top:10px;border:2px solid var(--bg-primary);">
<div class="col-1">
<div class="fa fa-gift primary-color fa-3x" style="padding:0px 5px 0 5px;margin:-20px 0 0 10px;background:#fff;">
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
The Icon Card title
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
Quote Card
<div class="is-matrix is-anim-block is-card br10 is--flex is-flex-block cc-clearover" style="border: 3px solid var(--bg-primary);margin-top:10px;">
<div class="left-align col-12 add-10 cc-box">
<div class="fa fa-quote-left fa-5x primary-color bg-white" style="margin-top:-30px;">
</div>
<h3>
<span style="font-size:40px;">This is a quote title</span>
</h3>
<p>
Etiam rhoncus. Aenean commodo ligula eget dolor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Aenean viverra rhoncus pede. Sed hendrerit. Vestibulum dapibus nunc
ac augue. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Etiam imperdiet imperdiet orci.
</p>
<p class="add-top-10 size-13">
- Quote ( Style 01 )
</p>
</div>
</div>
Quote Card 2
<div class="is-matrix is-card is-anim-block is--flex is-flex-block cc-clearover margin-top-5 has-border-shadow" style="margin-top:10px;">
<div class="left-align col-12 add-10 cc-box">
<div class="fa fa-quote-left fa-5x bg-white" style="margin-top:-30px;">
</div>
<h3>
<span style="font-size:40px;">This is a quote title</span>
</h3>
<p>
Etiam rhoncus. Aenean commodo ligula eget dolor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Aenean viverra rhoncus pede. Sed hendrerit. Vestibulum dapibus nunc
ac augue. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Etiam imperdiet imperdiet orci.
</p>
<p class="add-top-10 size-13">
- Quote ( Style 02 )
</p>
</div>
</div>
Quote Card 3
<div class="is-matrix is-card is--flex is-flex-block bg-primary-light cc-clearover margin-top-5 br10" style="margin-top:10px;">
<div class="col-2">
<img class="is-img is-rel" style="margin-top:-10px;border-radius:500px;height:120px;width:120px;padding:5px;border:2px solid #000;" src="https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490"
alt="Matrix Themes" />
</div>
<div class="col-10 add-20 cc-box">
<h3>
<span style="font-size:40px;">This is a quote title</span>
</h3>
<p>
Etiam rhoncus. Aenean commodo ligula eget dolor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Aenean viverra rhoncus pede. Sed hendrerit. Vestibulum dapibus nunc
ac augue. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Etiam imperdiet imperdiet orci.
</p>
<p class="add-top-10 size-13">
- Quote ( Style 03 )
</p>
</div>
</div>
Quote Card 4
<div class="is-matrix is-card is--flex is-flex-block cc-clearover margin-top-5 has-color-border-shadow is-rel" style="margin-top:10px;">
<div class="col-2">
<img class="is-img is-rel" style="background:#fff;margin-top:-10px;border-radius:500px;height:120px;width:120px;padding:5px;border:2px solid var(--bg-primary);" src=
"https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="Matrix Themes" />
</div>
<div class="col-10 add-20 cc-box">
<h3>
<span style="font-size:40px;">This is a quote title</span>
</h3>
<p>
Etiam rhoncus. Aenean commodo ligula eget dolor. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Aenean viverra rhoncus pede. Sed hendrerit. Vestibulum dapibus nunc
ac augue. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Etiam imperdiet imperdiet orci.
</p>
<p class="add-top-10 size-13">
- Quote ( Style 04 )
</p>
</div>
</div>
Pricing Card
<div class="is-matrix is-card content-teaser bg-primary-light is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Package 1
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-primary">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list green-color">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box mobile-fullwidth-btn">
<a class="hs-button mid-round right-align" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 2
<div class="is-matrix is-card content-teaser bg-primary color-white is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Package 2
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-primary-light">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box mobile-fullwidth-btn">
<a class="hs-button ghost-white mid-round right-align" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 3
<div class="is-matrix is-card content-teaser bg-transparent add-20 is--flex is-flex-block no-padding cc-clearover" style="border:2px solid #000;">
<div class="left-align col-8 add-30 cc-box no-border-mobile no-border-column" style="border-right:2px solid #000;">
<h3>
Package 3
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-dark">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button right-align bg-dark fullwidth-btn" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 4
<div class="is-matrix is-card content-teaser bg-dark color-white add-20 is--flex is-flex-block no-padding cc-clearover">
<div class="left-align col-8 add-30 cc-box no-border-mobile no-border-column" style="border-right:2px solid #fff;">
<h3>
Package 4
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-white">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button right-align ghost-white fullwidth-btn" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 5
<div class="is-matrix is-card content-teaser bg-white has-shadow br15 is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Package 5
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-round bg-gradient no-padding" style="height:5px;">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box mobile-fullwidth-btn">
<a class="hs-button bg-round right-align" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Pricing Card 6
<div class="is-matrix is-card is-rel content-teaser bg-primary color-white has-shadow br15 is--flex is-flex-block cc-clearover" style="border:3px solid #f7b267;">
<span class="size-12 bg-round text-center absolute-top-left" style="background:#f7b267;top: -12px; left: 15px; color: #000; padding: 2px 18px;">Most Popular</span>
<div class="left-align col-8 add-20 cc-box">
<h3>
Package 6
</h3>
<p>
This is professional package design
</p>
<p style="font-size:40px;font-weight:600;">
€90
</p>
<div class="is-line bg-round bg-gradient no-padding" style="height:5px;">
</div>
<div class="pricing-items add-top-25 add-btm-15">
<div class="has-check-list">
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Lifetime updates
</li>
</ul>
</div>
</div>
</div>
<div class="right-align col-4 add-20 cc-box mobile-fullwidth-btn">
<a class="hs-button bg-round bg-white right-align" href="https://www.matrix-themes.com/" target="">Get started</a>
</div>
</div>
Feature list 2
<div class="has-check-list bg-primary-light add-20 br10 green-color">
<h3>
Feature List 2
</h3>
<ul>
<li>Quick installation
</li>
<li>30+ custom widgets
</li>
<li>Professional 24/7 Support
</li>
</ul>
</div>
Feature list 3
<div class="has-check-list-2 green-color">
<h3>
Feature List 3
</h3>
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
Feature list 4
<div class="has-check-list-2 bg-primary color-white add-20 br10">
<h3>
Feature List 4
</h3>
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
Feature list 5
<div class="has-check-list-2 green-color add-20 br10" style="border:2px solid #000;">
<h3>
Feature List 5
</h3>
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
Feature list 6
<div class="has-check-list-3 add-20 has-border-shadow">
<h3>
Feature List 6
</h3>
<ul>
<li class="size-18 weight-600">Quick installation
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">30+ custom widgets
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
<li class="size-18 weight-600">Professional 24/7 Support
<p>
Cras dapibus. Etiam ut purus mattis mauris sodales aliquam. Nam adipiscing. Donec id justo.
</p>
</li>
</ul>
</div>
Feature links
<div class="links">
<h3>
Feature links
</h3>
<br />
<ul>
<li>
<a href="https://www.matrix-themes.com/templates">Matrix themes</a>
</li>
<li>
<a href="https://www.matrix-themes.com/page-builder">Matrix Page Builder</a>
</li>
<li>
<a href="https://www.matrix-themes.com/docs">Professional 24/7 support</a>
</li>
<li>
<a href="https://www.matrix-themes.com/templates/showcase">Inspiration websites</a>
</li>
</ul>
<br />
</div>
Feature links 2
<div class="bg-primary add-20 br10 links link-white color-white">
<h3>
Feature links
</h3>
<br />
<ul>
<li>
<a href="https://www.matrix-themes.com/templates">Matrix themes</a>
</li>
<li>
<a href="https://www.matrix-themes.com/page-builder">Matrix Page Builder</a>
</li>
<li>
<a href="https://www.matrix-themes.com/docs">Professional 24/7 support</a>
</li>
<li>
<a href="https://www.matrix-themes.com/templates/showcase">Inspiration websites</a>
</li>
</ul>
<br />
</div>
Feature links 3
<div class="add-20 br10 links" style="border:2px solid #000;">
<h3>
Feature links
</h3>
<br />
<ul>
<li>
<a href="https://www.matrix-themes.com/templates">Matrix themes</a>
</li>
<li>
<a href="https://www.matrix-themes.com/page-builder">Matrix Page Builder</a>
</li>
<li>
<a href="https://www.matrix-themes.com/docs">Professional 24/7 support</a>
</li>
<li>
<a href="https://www.matrix-themes.com/templates/showcase">Inspiration websites</a>
</li>
</ul>
<br />
</div>
Feature links 4
<div class="add-20 links links--no-border has-border-shadow">
<h3>
Feature links
</h3>
<br />
<ul class="snip-nav">
<li>
<a href="https://www.matrix-themes.com/templates">Matrix themes</a>
</li>
<li>
<a href="https://www.matrix-themes.com/page-builder">Matrix Page Builder</a>
</li>
<li>
<a href="https://www.matrix-themes.com/docs">Professional 24/7 support</a>
</li>
<li>
<a href="https://www.matrix-themes.com/templates/showcase">Inspiration websites</a>
</li>
</ul>
</div>
Promo card
<div class="is-matrix is-card bg-primary has-border-radius is-flex is-flex-block no-padding">
<div class="col-7 wow is-folded-left-img">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/5reasons.jpg?t=1696715613" alt="Matrix Themes" />
</div>
<div class="col-5 is--flex">
<div class="add-20 col-12 cc-box is-promo-block bg-white br10" style="margin:20px 0 20px -20%;">
<h3>
What's new in 2024 Tech
</h3>
<span class="is-tag bg-red">special price</span>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
</div>
Promo card 2
<div class="is-matrix is-card bg-white has-border-shadow is-flex is-flex-block no-padding">
<div class="col-5 wow is-folded-left-img">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/5reasons.jpg?t=1696715613" alt="Matrix Themes" />
</div>
<div class="col-7 is--flex">
<div class="add-20 col-12 cc-box bg-white is-promo-block" style="margin:20px 0 20px -20%;border:2px solid #000;">
<h3>
What's new in 2024 Tech
</h3>
<span class="is-tag bg-red">special price</span>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="arrow-link" href="http://www.matrix-themes.com/templates/" target="">See more<span class="arrow"> </span></a>
</div>
</div>
</div>
Counter card
<div class="is-matrix bg-primary is-card is-flex is-flex-block center-align cc-clearover">
<div class="col-4 color-white">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x">
</div>
<p class="hs-center add-top-20">
Official Jimdo Experts
</p>
</div>
</div>
<div class="col-4 color-white opacity-2">
<div class="gutter-20 center-align">
<div class="fa fa-cogs fa-4x">
</div>
<p class="hs-center add-top-20">
Freelancers and Web Agencies
</p>
</div>
</div>
<div class="col-4 color-white opacity-4">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Countries around the world
</p>
</div>
</div>
</div>
Counter card 2
<div class="is-matrix bg-primary is-card is-flex is-flex-block center-align cc-clearover">
<div class="col-3 color-white">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x">
</div>
<p class="hs-center add-top-20">
Jimdo Experts
</p>
</div>
</div>
<div class="col-3 color-white opacity-2">
<div class="gutter-20 center-align">
<div class="fa fa-paper-plane fa-4x">
</div>
<p class="hs-center add-top-20">
12 Web Agencies
</p>
</div>
</div>
<div class="col-3 color-white opacity-4">
<div class="gutter-20 center-align">
<div class="fa fa-globe fa-4x">
</div>
<p class="hs-center add-top-20">
18 Countries
</p>
</div>
</div>
<div class="col-3 color-white opacity-6">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Professional support
</p>
</div>
</div>
</div>
Counter card 3
<div class="is-matrix is-card is-flex is-flex-block center-align cc-clearover">
<div class="bg-primary col-4 color-white cc-box br15" style="border:3px solid #fff;">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x">
</div>
<p class="hs-center add-top-20">
Official Jimdo Experts
</p>
</div>
</div>
<div class="bg-primary col-4 color-white cc-box br15" style="border:3px solid #fff;">
<div class="gutter-20 center-align">
<div class="fa fa-cogs fa-4x">
</div>
<p class="hs-center add-top-20">
Freelancers and Web Agencies
</p>
</div>
</div>
<div class="bg-primary col-4 color-white cc-box br15" style="border:3px solid #fff;">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Countries around the world
</p>
</div>
</div>
</div>
Counter card 4
<div class="is-matrix is-card is-flex is-flex-block center-align cc-clearover">
<div class="bg-primary col-3 color-white cc-box br15" style="border:3px solid #fff;">
<div class="gutter-20 center-align">
<div class="fa fa-rocket fa-4x">
</div>
<p class="hs-center add-top-20">
Jimdo Experts
</p>
</div>
</div>
<div class="bg-primary col-3 color-white cc-box br15" style="border:3px solid #fff;">
<div class="gutter-20 center-align">
<div class="fa fa-paper-plane fa-4x">
</div>
<p class="hs-center add-top-20">
12 Web Agencies
</p>
</div>
</div>
<div class="bg-primary col-3 color-white cc-box br15" style="border:3px solid #fff;">
<div class="gutter-20 center-align">
<div class="fa fa-globe fa-4x">
</div>
<p class="hs-center add-top-20">
18 Countries
</p>
</div>
</div>
<div class="bg-primary col-3 color-white cc-box br15" style="border:3px solid #fff;">
<div class="gutter-20 center-align">
<div class="fa fa-thumbs-up fa-4x">
</div>
<p class="hs-center add-top-20">
Professional support
</p>
</div>
</div>
</div>
Tile card
<div class="is-matrix is-card bg-primary color-white">
<div class="is-flex is-flex-block cc-clearover">
<div class="col-6">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
</div>
<div class="col-6 add-20 cc-box">
<h3>
3 Reasons to choose Matrix Themes
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button small-btn bg-white" href="https://www.matrix-themes.com/" target="">Custom button</a> <a class="hs-button small-btn ghost-white" href="https://www.matrix-themes.com/"
target="">Custom button</a>
</div>
</div>
</div>
Tile card 2
<div class="is-matrix is-card bg-primary color-white is-reverse">
<div class="is-flex is-flex-block cc-clearover">
<div class="col-6 add-20 cc-box">
<h3>
3 Reasons to choose Matrix Themes
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button small-btn bg-white" href="https://www.matrix-themes.com/" target="">Custom button</a> <a class="hs-button small-btn ghost-white" href="https://www.matrix-themes.com/"
target="">Custom button</a>
</div>
<div class="col-6">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
</div>
</div>
</div>
Overlay card
<div class="is-matrix is-card bg-primary color-white">
<div class="is-flex is-flex-block cc-clearover">
<div class="col-4 hs-thumbnail is-rel">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
<div class="thumbnail-hover">
<a href="http://matrix-themes.com/"></a>
</div>
</div>
<div class="col-8 add-20 cc-box">
<h3>
Design the Website You Imagine
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button small-btn ghost-white is-outlined" href="https://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Overlay card 2
<div class="is-matrix is-card bg-primary color-white has-border-radius bigger-radius">
<div class="is-flex is-flex-block cc-clearover">
<div class="col-4 hs-thumbnail is-rel">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
<div class="thumbnail-hover">
<a href="http://matrix-themes.com/"></a>
</div>
</div>
<div class="col-8 add-20 cc-box">
<h3>
Design the Website You Imagine
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button small-btn ghost-white is-outlined" href="https://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
YouTube popup
<div class="is-matrix is-card bg-white has-shadow is-flex is-flex-block no-padding has-border-radius">
<div class="col-3 is-anim-block">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-video.jpg?t=1705669529" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
New YouTube video
</h3>
<div class="is-line bold-line small-line bg-primary">
</div>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="hs-button extra-small-btn bg-red rel br5">
<div class="fa-brands fa-youtube add-right-5">
</div>
Watch video <a class="popup-youtube div-link" href="https://www.youtube.com/watch?v=gOJnE4svLuY" target="_top"></a>
</div>
</div>
</div>
</div>
Vimeo popup
<div class="is-matrix is-card bg-white has-shadow is-flex is-flex-block no-padding has-border-radius">
<div class="col-3 is-anim-block">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-video.jpg?t=1705669529" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
New Vimeo video
</h3>
<div class="is-line bold-line small-line bg-primary">
</div>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="hs-button extra-small-btn bg-blue rel br5">
<div class="fa-brands fa-vimeo add-right-5">
</div>
Watch video <a class="popup-vimeo div-link" href="https://vimeo.com/366012302" target="_top"></a>
</div>
</div>
</div>
</div>
Iframe popup
<div class="is-matrix is-card bg-white has-shadow is-flex is-flex-block no-padding has-border-radius">
<div class="col-3 is-anim-block">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/matrix-card.jpg?t=1704403814" alt="Matrix Themes" />
</div>
<div class="col-9">
<div class="add-20">
<h3>
Open External Page
</h3>
<div class="is-line bold-line small-line bg-primary">
</div>
<div class="c">
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div class="hs-button extra-small-btn ghost-dark rel br5">
<div class="fa fa-circle-info add-right-5">
</div>
Read more <a class="popup-vimeo div-link" href="https://www.matrix-themes.com/templates/"></a>
</div>
</div>
</div>
</div>
Rating card
<div class="is-matrix is-card bg-primary-light br15 is-flex is-flex-block no-padding">
<div class="col-12 add-20 cc-box">
<h3>
Simply the best!
</h3>
<!-- star rating widget -->
<div class="star-rating" title="">
<div class="back-stars size-20">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="front-stars" style="width: 70%">
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
<div class="fa fa-star" aria-hidden="true">
</div>
</div>
</div>
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div style="display:flex;">
<div class="">
<img class="is-img is-rel" style="background:#fff;margin-top:-10px;border-radius:500px;height:60px;width:60px;padding:5px;border:2px solid #000;" src=
"https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="Matrix Themes" />
</div>
<div style="padding:15px 5px;display:inline-block;">
- Alice (Berlin)
</div>
</div>
</div>
</div>
Rating card 2
<div class="is-matrix is-card is-flex is-flex-block no-padding" style="margin-top:10px;border:2px solid var(--bg-primary);">
<div class="col-12 add-20 cc-box">
<h3>
Simply the best!
</h3>
<!-- star rating widget -->
<div class="star-rating" title="">
<div class="back-stars size-20">
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="front-stars" style="width: 70%">
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
<div class="fa fa-star">
</div>
</div>
</div>
</div>
<br />
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<div style="display:flex;">
<div class="">
<img class="is-img is-rel" style="background:#fff;margin-top:-10px;border-radius:500px;height:60px;width:60px;padding:5px;border:2px solid var(--bg-primary);" src=
"https://u.jimcdn.com/cms/o/sdc1e1935163480b6/userlayout/img/500x500.jpg?t=1568284490" alt="Matrix Themes" />
</div>
<div style="padding:15px 5px;display:inline-block;">
- Alice (Berlin)
</div>
</div>
</div>
</div>
Menu card
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3>
French omelette
</h3>
</div>
<div class="m-line">
</div>
<div style="display:flex;">
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
<div class="m-price-holder">
<h3 style="font-size:20px;font-weight:600;">
$21
</h3>
</div>
</div>
</div>
Menu card 2
<div class="m-menu-content bg-primary-light add-20 br10 is-matrix">
<div class="m-title-holder">
<h3>
French omelette with long title
</h3>
</div>
<div class="m-line">
</div>
<div style="display:flex;">
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
<div class="m-price-holder">
<h3 style="font-size:20px;font-weight:600;">
$21
</h3>
</div>
</div>
</div>
Menu card 3
<div class="m-menu-content add-20 is-matrix" style="border:2px solid #000;">
<div class="m-title-holder">
<h3>
French omelette with long title
</h3>
</div>
<div class="m-line">
</div>
<div style="display:flex;">
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
<div class="m-price-holder">
<h3 style="font-size:20px;font-weight:600;">
$21
</h3>
</div>
</div>
</div>
Menu card 4
<div class="is-matrix is-card bg-primary color-white is-flex is-flex-block no-padding">
<div class="col-2 is-anim-block">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/bg-menu-item.jpg?t=1705742607" alt="Matrix Themes" />
</div>
<div class="col-10">
<div class="add-20">
<div class="m-menu-content is-matrix">
<div class="m-title-holder">
<h3>
French omelette
</h3>
</div>
<div class="is-line bg-gradient">
</div>
<div style="display:flex;">
<div class="m-btm-holder">
<p class="size-16">
Fresh herbs, Spanish onion, roasted peppers, spinach & fetta served with brioche
</p>
</div>
<div class="m-price-holder">
<h3 style="font-size:20px;font-weight:600;">
$21
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
Business hours
<ul class="hours">
<li>
<span>Monday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Tuesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Wednesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Thursday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Friday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Saturday</span>
<p>
09:00 - 12:30
</p>
</li>
<li>
<span>Sunday</span>
<p>
Closed
</p>
</li>
</ul>
Business hours 2
<ul class="hours bg-primary mid-round color-white add-10">
<li>
<span>Monday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Tuesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Wednesday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Thursday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Friday</span>
<p>
09:00 - 20:00
</p>
</li>
<li>
<span>Saturday</span>
<p>
09:00 - 12:30
</p>
</li>
<li>
<span>Sunday</span>
<p>
Closed
</p>
</li>
</ul>
Skills widget 2
<div class="skill">
<h3>
<span class="skill_name">Skills big</span>
</h3>
<div class="skill_bar">
<div class="skill_active bg-primary" style="width: 75%;">
</div>
<span>75%</span>
</div>
</div>
Accordion
<div class="toggle weight-500 size-20">
<a class="switch" href="#">Your toggle title</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
Accordion 2
<div class="toggle weight-500 size-20">
<a class="switch bg-primary-light" href="#">Your toggle title</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliqui p ex ea commodo consequat.
</p>
</div>
</div>
Accordion 3
<div class="toggle color-white weight-500 size-18">
<a class="switch bg-dark" href="#">Your toggle title</a>
<div class="content color-dark">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
Accordion 4
<div class="toggle color-white weight-500">
<a class="switch hs-button small-btn" href="#">Your toggle title</a>
<div class="content color-dark">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
Accordion 5
<div class="is-faqs">
<input type="checkbox" id="f1" />
<h3 style="">
<label for="f1">Fusce convallis metus id felis?</label>
</h3>
<div class="is-faqs__content">
<p>
Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Ut a nisl id ante tempus hendrerit. Praesent venenatis metus at tortor
pulvinar varius. Nam pretium turpis et arcu. Aenean imperdiet. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Praesent egestas tristique nibh. Praesent congue erat at
massa. Vivamus aliquet elit ac nisl. Aenean commodo ligula eget dolor. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Proin pretium, leo ac pellentesque mollis,
felis nunc ultrices eros, sed gravida augue augue mollis justo. Quisque malesuada placerat nisl. Etiam feugiat lorem non metus. Vestibulum ullamcorper mauris at ligula.
</p>
</div>
</div>
Tabs widget
<ul class="tabs-nav">
<li class="active">
<a href="#tab1">First</a>
</li>
<li>
<a href="#tab2">Second</a>
</li>
<li>
<a href="#tab3">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab1" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod t empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo connnnsequat.
</p>
</div>
<div id="tab2" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab3" class="tab-content">
<p>
Lorem ipsum dolor sit amet, jjconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Tabs widget 2
<ul class="tabs-nav snip-nav center-align">
<li class="active">
<a href="#tab01">First</a>
</li>
<li>
<a href="#tab02">Second</a>
</li>
<li>
<a href="#tab03">Third</a>
</li>
</ul>
<div class="tabs-container">
<div id="tab01" class="tab-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod t empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="tab02" class="tab-content">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
<div id="tab03" class="tab-content">
<p>
Lorem ipsum dolor sit amet, jjconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
Tabs widget 3
<div class="tabs">
<input type="radio" name="tabs" id="a" checked="checked" /> <label for="a">First Tab</label>
<div class="tab">
<h3>
First Tab Content
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<input type="radio" name="tabs" id="b" /> <label for="b">Second Tab</label>
<div class="tab">
<h3>
Second Tab Content
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<input type="radio" name="tabs" id="c" /> <label for="c">Third Tab</label>
<div class="tab">
<h3>
Third tab content
</h3>
<p>
hfioezhogehzioghz
</p>
</div>
</div>
Divider widget 2
<div class="is-line bold-line small-line bg-primary">
</div>
Social icons
<div class="hs-social new-social small-social text-left size-11 is-circle-solid-white is-rounded link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-x-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
</div>
Social icons 2
<div class="hs-social text-left new-social small-social size-11 is-circle-border link-dark is-rounded">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-x-twitter fa-2x add-right-5"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5"></a>
</div>
Social icons 3
<div class="hs-social text-left new-social small-social size-11 is-circle-border link-dark">
<a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-facebook fa-2x add-right-5 br3"></a> <a href="https://www.matrix-themes.com/" target="_blank" class=
"fa-brands fa-x-twitter fa-2x add-right-5 br3"></a> <a href="https://www.matrix-themes.com/" target="_blank" class="fa-brands fa-instagram fa-2x add-right-5 br3"></a>
</div>
Social icons 4
<div class="hs-button small-btn ghost-dark rel">
<div class="fa-brands fa-facebook add-right-5">
</div>
Facebook <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button ghost-dark small-btn rel">
<div class="fa-brands fa-x-twitter add-right-5">
</div>
Twitter <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button ghost-dark small-btn rel">
<div class="fa-brands fa-instagram add-right-5">
</div>
Instagram <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
Social icons 5
<div class="hs-button small-btn br3 rel">
<div class="fa-brands fa-facebook add-right-5">
</div>
Facebook <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button small-btn br3 rel">
<div class="fa-brands fa-x-twitter add-right-5">
</div>
Twitter <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button small-btn br3 rel">
<div class="fa-brands fa-instagram add-right-5">
</div>
Instagram <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
Social icons 6
<div class="hs-button extra-small-btn bg-round rel">
<div class="fa-brands fa-facebook add-right-5">
</div>
Facebook <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button extra-small-btn bg-round rel">
<div class="fa-brands fa-x-twitter add-right-5">
</div>
Twitter <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
<div class="hs-button extra-small-btn bg-round rel">
<div class="fa-brands fa-instagram add-right-5">
</div>
Instagram <a class="div-link" href="https://www.matrix-themes.com/" target="_top"></a>
</div>
Team Card
<div class="is-matrix is-card bg-primary-light is-flex is-flex-block no-padding">
<div class="col-2">
<img class="is-img is-rel" srcset="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/showcase-team.jpg?t=1632470005" alt="Matrix Themes" />
</div>
<div class="col-10">
<div class="add-20">
<h3>
Thomas Berg
</h3>
<p>
Founder & CEO
</p>
<p>
Maecenas nec odio et ante tincidunt tempus. Etiam rhoncus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Fusce fermentum odio nec arcu. Aliquam lorem ante, dapibus
in, viverra quis, feugiat a, tellus.
</p>
<br />
<div class="fa fa-envelope">
</div>
<a href="mailto:office@mail.se">office@mail.se</a>
</div>
</div>
</div>
Team Card 2
<div class="is-matrix is-card is-flex is-flex-block no-padding br10" style="margin-top:10px;border:2px solid var(--bg-primary);">
<div class="col-3">
<div class="image_wrapper resp-img" style="height:150px;width:150px;">
<img class="is-img is-rel" style="background:#fff;margin-top:-20px;margin-left:10px; border-radius:500px;padding:5px;border:2px solid var(--bg-primary);" src=
"https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/showcase-team.jpg?t=1632470005" alt="Hembarevskyy Serhiy" />
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
Thomas Berg
</h3>
<p>
Founder & CEO
</p>
<p>
Maecenas nec odio et ante tincidunt tempus. Etiam rhoncus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Fusce fermentum odio nec arcu. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus.
</p>
<br />
<div class="fa fa-envelope">
</div>
<a href="mailto:office@mail.se">office@mail.se</a>
</div>
</div>
Team Card 3
<div class="is-matrix is-card bg-primary color-white link-white is-flex is-flex-block no-padding br10">
<div class="col-3">
<div class="image_wrapper resp-img" style="width:150px;">
<img style="background:#fff;margin-top:-20px;margin-left:10px; border-radius:10px;padding:5px;border:2px solid var(--bg-primary);" src=
"https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/showcase-team.jpg?t=1632470005" alt="Hembarevskyy Serhiy" />
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
Thomas Berg
</h3>
<p>
Founder & CEO
</p>
<p>
Maecenas nec odio et ante tincidunt tempus. Etiam rhoncus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Fusce fermentum odio nec arcu. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus.
</p>
<br />
<div class="fa fa-envelope">
</div>
<a href="mailto:office@mail.se">office@mail.se</a>
</div>
</div>
Team Card 4
<div class="is-matrix is-card is-flex is-flex-block no-padding has-border-shadow">
<div class="col-3">
<div class="image_wrapper resp-img" style="width:150px;">
<img style="background:#fff;margin-top:-20px;margin-left:10px; border-radius:0px;padding:5px;border:2px solid #000;" src=
"https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/showcase-team.jpg?t=1632470005" alt="Hembarevskyy Serhiy" />
</div>
</div>
<div class="col-12 add-20 cc-box">
<h3>
Thomas Berg
</h3>
<p>
Founder & CEO
</p>
<p>
Maecenas nec odio et ante tincidunt tempus. Etiam rhoncus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Fusce fermentum odio nec arcu. Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus.
</p>
<br />
<div class="fa fa-envelope">
</div>
<a href="mailto:office@mail.se">office@mail.se</a>
</div>
</div>
Image Mask 1
<div class="is-matrix is-card bg-primary-light br5">
<div class="is--flex is-flex-block cc-clearover">
<div class="col-5">
<div class="mask-img resp-img" style="mask-image: url(https://u.jimcdn.com/cms/o/s77270d56027027a9/userlayout/font/mask-06.svg?t=1710323091);">
<img src="https://u.jimcdn.com/cms/o/s77270d56027027a9/userlayout/img/bg-halmstad-creative.jpg?t=1710317297" class="" alt="Matrix themes" />
</div>
</div>
<div class="col-7 add-20 cc-box">
<h3 class="weight-600">
3 Reasons to choose Matrix Themes
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button small-btn weight-400 weight-600 bg-round" href="https://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Image Mask 2
<div class="is-matrix is-card br5" style="border:2px solid #000;">
<div class="is--flex is-flex-block cc-clearover">
<div class="col-5">
<div class="mask-img resp-img" style="mask-image: url(https://u.jimcdn.com/cms/o/s77270d56027027a9/userlayout/font/mask-32.svg?t=1710323091);">
<img src="https://u.jimcdn.com/cms/o/s77270d56027027a9/userlayout/img/bg-halmstad-creative.jpg?t=1710317297" class="" alt="Matrix themes" />
</div>
</div>
<div class="col-7 add-20 cc-box">
<h3 class="weight-600">
3 Reasons to choose Matrix Themes
</h3>
<p>
Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<br />
<a class="hs-button small-btn weight-400 weight-600" href="https://www.matrix-themes.com/" target="">Custom button</a> <a class="hs-button small-btn ghost-primary weight-400 weight-600"
href="https://www.matrix-themes.com/" target="">Custom button</a>
</div>
</div>
</div>
Vertical Timeline
<div class="timeline-container alt">
<ul class="vl">
<li>
<h3>
Step 01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</li>
<li>
<h3>
Step 02
</h3>
<p>
Morbi ac felis. Praesent ac massa at ligula laoreet iaculis. Etiam imperdiet imperdiet orci. Vestibulum fringilla pede sit amet augue. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem. Nunc nonummy metus.
</p>
</li>
<li>
<h3>
Step 03
</h3>
<p>
In auctor lobortis lacus. Phasellus nec sem in justo pellentesque facilisis.
</p>
</li>
<li class="is-green">
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit. Pellentesque ut neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent egestas neque eu enim.
</p>
</li>
</ul>
</div>
Vertical Timeline 2
<div class="timeline-container bg-primary-light add-20 mid-round">
<ul class="vl">
<li>
<h3>
Step 01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</li>
<li>
<h3>
Step 02
</h3>
<p>
Morbi ac felis. Praesent ac massa at ligula laoreet iaculis. Etiam imperdiet imperdiet orci. Vestibulum fringilla pede sit amet augue. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem. Nunc nonummy metus.
</p>
</li>
<li>
<h3>
Step 03
</h3>
<p>
In auctor lobortis lacus. Phasellus nec sem in justo pellentesque facilisis.
</p>
</li>
<li>
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit. Pellentesque ut neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent egestas neque eu enim.
</p>
</li>
</ul>
</div>
Vertical Timeline (Image)
<div class="timeline-container alt">
<div class="timeline-container has-img alt">
<ul class="vl">
<li>
<div style="position: absolute;left: -33px;top:-15px;">
<img class="is-img resp-img is-rel" style="max-width:60px;border:1px dashed #ddd;border-radius:500px;background:#fff;" srcset=
"https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/01-walk.png" alt="Matrix Themes" />
</div>
<h3>
Step 01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</p>
</li>
<li>
<div style="position: absolute;left: -33px;top:-15px;">
<img class="is-img resp-img is-rel" style="max-width:60px;border:1px dashed #ddd;border-radius:500px;background:#fff;" srcset=
"https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/02-bus.png" alt="Matrix Themes" />
</div>
<h3>
Step 02
</h3>
<p>
Morbi ac felis. Praesent ac massa at ligula laoreet iaculis. Etiam imperdiet imperdiet orci. Vestibulum fringilla pede sit amet augue. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem. Nunc nonummy metus.
</p>
</li>
<li>
<div style="position: absolute;left: -33px;top:-15px;">
<img class="is-img resp-img is-rel" style="max-width:60px;border:1px dashed #ddd;border-radius:500px;background:#fff;" srcset=
"https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/03-train.png" alt="Matrix Themes" />
</div>
<h3>
Step 03
</h3>
<p>
In auctor lobortis lacus. Phasellus nec sem in justo pellentesque facilisis.
</p>
</li>
<li class="is-green">
<div style="position: absolute;left: -33px;top:-15px;">
<img class="is-img resp-img is-rel" style="max-width:60px;border:1px dashed #ddd;border-radius:500px;background:#fff;" srcset=
"https://u.jimcdn.com/cms/o/s758c0057fdaf08b1/userlayout/img/04-airplane.png" alt="Matrix Themes" />
</div>
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit. Pellentesque ut neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Praesent egestas neque eu enim.
</p>
</li>
</ul>
</div>
Horizontal Timeline
<div class="timeline-container is-horizontal">
<ul class="vl">
<li>
<h3>
Step01
</h3>
<p>
In turpis. Phasellus ullamcorper ipsum rutrum nunc. Suspendisse potenti.
</p>
</li>
</ul>
</div>
Vertical T.(last item)
<div class="timeline-container is-horizontal is-last">
<ul class="vl">
<li>
<h3>
Step 04
</h3>
<p>
Phasellus consectetuer vestibulum elit.Vestibulum fringilla pede sit amet augue.
</p>
</li>
</ul>
</div>
Button 2
<a class="hs-button mid-round" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button 3
<a class="hs-button bg-round" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button 4
<a class="hs-button ghost-primary" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button 5
<a class="hs-button ghost-dark" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button 6
<a class="hs-button ghost-white" href="http://www.matrix-themes.com/" target="">Custom Button</a>
Button 7
<a class="hs-button weight-500 ghost-dark" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
Button 8
<a class="hs-button weight-500 ghost-white" style="padding: 18px 25px;" href="http://www.matrix-themes.com/templates/" target="">Custom button<svg viewbox="0 0 24 24" focusable="false" role=
"presentation" class="is-arrow">
<path fill="none" stroke-linejoin="bevel" stroke="currentcolor" stroke-width="3" stroke-linecap="square" d="M12 3l9 9-9 9m-9-9h16.714H3z">
</path></svg></a>
Button 9
<a class="link-outlined weight-500" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Button 10
<a class="link-outlined link-white weight-500" href="https://www.matrix-themes.com/" target="">Custom Button</a>
Global
Applies animations for every single module
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.jtpl-content .j-module').addClass('is-anim');
// wow
wow = new WOW(
{
boxClass: 'is-anim',
animateClass: 'animate__animated animate__fadeInUp',
mobile: true,
offset: 50
}
)
wow.init();
});
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
page animations
</div>
Columns
Applies animations only for columns elements
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.jtpl-content .j-hgrid,.jtpl-content .is-anim-block').addClass('is-anim');
// wow
wow = new WOW(
{
boxClass: 'is-anim',
animateClass: 'animate__animated animate__fadeInUp',
mobile: true,
offset: 50
}
)
wow.init();
});
})(jQuery);
//]]>
</script>
<div class="matrix-msg invisible">
page animations
</div>
Instructions
1. General
Once clicked the copy button, you paste the code to the module 'Widget/HTML' of your website.
2. Customizations
To change the image inside the custom widget, you need to upload your own image to
Design> Custom> Custom Template> Files.
Once uploaded, click the image name which will be opened in a new tab and copy the url of the image from the browser address bar:
Paste it inside the module Widget/HTML replacing the default image of demo site:
...
<div class="hs-thumbnail">
<img src="https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/tile09.jpg" alt="" />
</div>
...
3. Card concept
The new Matrix Themes widget features a card concept. This implies that it adopts one style when added as a standalone widget (1) and a different style when incorporated inside columns (2).
Your questions
has-right-col-border
Resources
Documentation
Quick links
hide-in-doc-page
draggable-logo
Global colors
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
Template colors
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
Footer Styles
| background | |
| text color | |
| link color | |
| horizontal line |
Buttons
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
Mobile navigation
| background color | |
| navigation color |
Other elements
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| size-15 weight-400 snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.
is-switcher
Matrix themes (Tuesday, 02 January 2024 18:44)
@Stefan you need to update the font awesome framework. In your case you'll have to update the whole template https://www.matrix-themes.com/support/updates/guidances/
Stefan Weingaertner (Tuesday, 02 January 2024 15:33)
Hi, how can I change the twitter fa-icon to X-icon? This doesn't work:
<a href="https://twitter.com/ai_associates/" target="_blank" class=
"fa fa-x-twitter fa-2x add-right-5">
Support team (Tuesday, 31 October 2023 09:37)
@Pawel the shortocode doesn't exist anymore as it has been replaced by the class 'has-no-gutter' that can be added to any widget of content section to reduce the space between the header and content.
pawel (Monday, 30 October 2023 22:00)
Dear, how to place widget between menu and middle area on the website. I can recall there was shortcode that allowed me to add widget on the background top banner. I hope you can recall what I mean. KR/Pawel
Alan (Monday, 30 January 2023 14:51)
Hey Serhiy,
Unfortunately all my full width images and slider are not working and i can´t get the code from my shortcode section.
Thanks for your help.
Cheers
Alan
Johannes Hauser (Monday, 23 January 2023 18:40)
Ah yes, thank you. Now its fixed.
Matrix Themes (Monday, 23 January 2023 18:15)
@Johannes probably you haven’t updated the shortcodes widget with the latest version of font awesome.
Johannes Hauser (Monday, 23 January 2023 17:57)
Hi, why are the social media icons just showing squares, instead of the Logo?
Stefan (Wednesday, 06 July 2022 13:30)
On your website you mention "Tile Banner 02" (https://www.matrix-themes.com/support/help/matrix-variables/). Where can I find the shortcode for that widget?
Matrix themes (Friday, 01 July 2022 18:24)
@Stefan B.
The cloud tags widget has been removed in the latest themes:
<!-- ************* Tags widget style 01 ************* -->
<div class="tagcloud cc-clearover">
<a href="https://www.matrix-themes.com/">Jimdo</a>
<a href="https://www.matrix-themes.com/">Matrix</a>
<a href="https://www.matrix-themes.com/">Design</a>
<a href="https://www.matrix-themes.com/">Responsive</a>
<a href="https://www.matrix-themes.com/">templates</a>
<a href="https://www.matrix-themes.com/">business</a>
</div>
<!-- ************* end Tags widget style 01 ************* -->
Stefan B. (Friday, 01 July 2022 14:00)
Hi there,
where I can find the code for cloug tags? I saw them on the matrix theme website but can't find them in the shortcodes section.
Matrix themes (Thursday, 28 April 2022 22:26)
@Johannes on youre homepage you're not using the content carousel from this page but the one from add-ons.
Johannes Hauser (Thursday, 28 April 2022 16:04)
The shortcode Content Carousel doesn't slide automatically is this normal/standard or is it a bug?
Matrix themes (Friday, 14 January 2022 21:28)
@Roberto click the Widget/HTML and find the following code of the button to edit it. Replace your own text and link:
<a class="hs-button bg-white " href="https://www.matrix-themes.com" target="" >Custom button</a>
Roberto Jara (Friday, 14 January 2022 21:23)
Hello! I am using the Fullwidth Ultimate Tile 3. I see that it has a custom buttom BUT I don´t know how to add a link in it to use the buttom. May you help me?
Matrix themes (Monday, 20 September 2021)
@Ron:
<a href="#popup-article02" class="hs-button bg-round">article popup</a>
<div id="popup-article02" class="popup popup-overlay">
Ron (Monday, 20 September 2021 14:26)
@Serhiy Ok, but if I add different ID for each popup section and connect them with the "href-tag" of the different buttons, the box in which the text is normally placed for the "small dialog ID" disappears. And you can't read the text because it is shown in grey on a opac background.
Matrix themes (Friday, 17 September 2021 16:08)
@Ron the popup widget can be used once on a page.For multiply widgets, you need to add different ID for each popup section
Ron (Friday, 17 September 2021 14:24)
Hello Serhiy,
I think there is a bug with the modal popup because it shows only one text. For example: I have four different topics that I would like to explain individually using the modal popup.
But when I write the texts in the widgets, only the first text is displayed in all popups. Is there a possibility that the individual texts are displayed in the individual popups?
Best regards
Matrix themes (Sunday, 21 March 2021 20:45)
Please get in touch from support page indicating all details.
Thank you.
Steffen (Sunday, 21 March 2021 20:42)
The image alignment doesnt seem to work in my case, I already tried that. The image isn´t displayed at all..
Maybe it hast something to do with fullwidth?
Matrix themes (Sunday, 21 March 2021 20:10)
@Steffen the image alignment allows you to display the text box on the the left or right side.
'The classes 'has padding' and 'h-75' can be used only with other helper classes.
For more details please check the section "helper classes"
Steffen (Sunday, 21 March 2021 20:00)
Hi,
ok, so I will do it with "Text with Photo/Alternative Text"
If I use the white version of "is-overlay" the box is on the left, if I use the black version, it´s on the right. Where can I edit it, so the white box is displayed on the right and also is there any way how to influence it´s size? (All with fullwidth image)
And in your examples there is a tag "has-padding" or "h-75" underneath some pics. What does that do? I tried around a bit, but couldn´t find any differences.
Thanks for any help! :)
Steffen,
Matrix themes (Saturday, 20 March 2021 21:56)
@Steffen it can't be displayed inside the image like in your case. The quote teaser can be displayed inside the hero section ( image) which is hidden with a body class 'no-hero'
Steffen (Saturday, 20 March 2021 20:31)
Hello,
sorry for asking this, because, this should be quite simple, but I wasn´t able to find a solution:
How can I display a quote-teaser on top of a fullwidth image?
If I place a fullwidth image there is no html-code I can work in, right? Only the title and alternative text..
So what would be the way to go?
Thanx for any hint and have a great weekend!
Cheers,
Steffen.
Matrix themes (Thursday, 18 March 2021 14:58)
@Björn please by all means read the documentation as many issues are already explained with further details and tutorials.
01. To hide the hero section, use the body class 'no-hero'
02. Any widget then with the class 'is-header' can be displayed on the top of the content section.
Björn (Thursday, 18 March 2021 14:38)
Thanks,
please can you also tell mw how to hide the background and only use the full widht carousel like:
https://alsten-template2.jimdofree.com/shortcodes/
Matrix themes (Thursday, 18 March 2021 13:45)
@Björn In Matrix themes menu> enterprise package> ultimate widgets
Björn (Thursday, 18 March 2021 12:51)
Hi,
how can I make the tile widget full width? The widget should go from side to side.
Thx and Br
Björn
Matrix themes (Monday, 01 February 2021 20:26)
@Donato there are 2 different widgets: toggles and timeline. The time line steps should be used as a separate widget/HTML. For more details, please contact the support from this page:
https://www.matrix-themes.com/support/
Donato Biasco (Monday, 01 February 2021 20:03)
Dear Support
question the matrix widget toogle, how can i put the different steps tighter together?
thanks and best wishes
Donato
Matrix themes (Tuesday, 01 September 2020 00:16)
@Sascha if the video works in default widget, please check: a) correct url of youtube video b) settings of your youtube video/account
Sascha (Thursday, 27 August 2020 07:27)
hello when I try to put a youtube link in YOUTUBE POP UP there is no video?
Matrix themes (Wednesday, 06 May 2020 17:12)
@Laszlo please check all social icons available in Font Awesome framework:
https://fontawesome.com/v4.7.0/icons/#brand
Laszlo (Wednesday, 06 May 2020 17:09)
Hallo
Kurze Frage: Könntest Du auch ein Icon für Pinterest zu den social media icons hinzufügen?
Matrix themes (Thursday, 09 April 2020 15:19)
@Steffen if you're talking about blog post, Jimdo has "show more" button to display previous blog posts. Regarding the online store,- if you have more than 100 items, probably you need to change the website builder. The option you asked, can be added only by Jimdo itself, no one external widget can do it.
Steffen Dettmann (Thursday, 09 April 2020 12:33)
Hello,
I never found a pagebreak widget od similar, to avoid endless scrolling pages. On desktop computers that is somehow not really necessary, I find, but on moblie devices it would be a benefit. I am talking about article overviews with 100+ items, that are to split in let's say 4 - 5 pages. Is there anything like a widget to avoid to split all items with keywords?
Greetings,
Steffen
Max (Thursday, 02 April 2020 23:58)
Thank you for the fast answer. You are totally right. I made the mistake and used the embed link instead of the regula URL.
Matrix themes (Thursday, 02 April 2020 23:36)
@Max "Access denied by Youtube" is a problem with the video, not with the plugin
Max (Thursday, 02 April 2020 23:35)
Hi, short question: the youtube pop up does not work ("Access denied by Youtube") - it works with the standard jimdo plug-in. Is there an other working matrix solution?
Hope you are healthy. Thanks
Matrix themes (Wednesday, 01 April 2020 12:36)
@Kathrin no, no sense to use opacity since you can't use the background image for the whole block. You can only change the default color in CSS
Kathrin (Wednesday, 01 April 2020 12:24)
Hi, is it possible to change the opacity of "wrap this module"? - If I take changes, the wrap is blank.
Matrix themes (Saturday, 21 March 2020 14:14)
@Kathrin there's no such option in Matrix themes
Kathrin Schierl (Saturday, 21 March 2020 12:36)
I would like to put the ghost-button with hs-magic into the navigation. Is it possible to change automatically the color (like the color of the navigation does?)
If I am on the header image, the navigation font color is white (and you can't see the ghost-dark button). If I scroll down, the navigation font color is dark...
Matrix themes (Tuesday, 03 March 2020 20:56)
@Stephanie there’s no way to add the url but just an option to upload a file.
Stephanie (Tuesday, 03 March 2020 20:54)
I found the download button but I can't find the URL for the PDFs to add to the styled link. Thanks for your help.
Matrix themes (Tuesday, 03 March 2020 20:31)
@Stephanie the download button can be found as default Jimdo module
Stephanie (Tuesday, 03 March 2020 17:38)
Where can I find the download button? Is it listed as a Matrix shortcode? The Jimdo Download buttons don't display a url code.
Thanks!
Stephanie (Tuesday, 03 March 2020 16:47)
Found a solution to the problem.
Stephanie (Tuesday, 03 March 2020 16:26)
Hi!
Is it possible to change the styled link and links in general to a simple black underline (no animation)?