[vc_row][vc_column][vc_custom_heading text=”Background Teaser” font_container=”tag:h2|text_align:center|line_height:1″ use_theme_fonts=”yes” css=”.vc_custom_1496992852351{margin-bottom: 20px !important;}”][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][cms_teaser background_overlay=”rgba(1,178,183,0.85)” icon_type=”rticon2″ icon_rticon2=”rt-icon2-heart2″ icon_color=”#cb5151″ link=”url:%23|title:Regular%20Button||” btn_type=”btn-secondary” image=”545″ title=”Color Big”]This is teaser with big size color icon with h3 heading and RT-Icon
icon[/cms_teaser][/vc_column][vc_column width=”1/3″][cms_teaser background_overlay=”rgba(16,32,53,0.9)” icon_type=”rticon2″ icon_rticon2=”rt-icon2-leaf” icon_color=”#ffffff” link=”url:%23|title:Inverse%20Button||” btn_type=”btn-white” image=”548″ title=”Color Big”]This is teaser with big size color icon with h3 heading and RT-Icon
icon[/cms_teaser][/vc_column][vc_column width=”1/3″][cms_teaser background_overlay=”rgba(203,81,81,0.9)” icon_fontawesome=”fa fa-star-half-o” icon_color=”#ffffff” link=”url:%23|title:Regular%20Button||” btn_type=”btn-primary” image=”549″ title=”Color Big”]This is teaser with big size color icon with h3 heading and Font Awesome
icon[/cms_teaser][/vc_column][/vc_row][vc_row][vc_column][vc_separator color=”custom” accent_color=”#dddddd” css=”.vc_custom_1496993262598{margin-top: 20px !important;margin-bottom: 20px !important;}”][/vc_column][/vc_row][vc_row css=”.vc_custom_1496993320374{padding-top: 30px !important;}”][vc_column][vc_custom_heading text=”Icon Teasers” font_container=”tag:h2|text_align:center|line_height:1″ use_theme_fonts=”yes” css=”.vc_custom_1496993508296{margin-bottom: 10px !important;}”][/vc_column][/vc_row][vc_row css=”.vc_custom_1496993598791{margin-bottom: 10px !important;}”][vc_column][vc_column_text]

You can manage icon types by toggling following classes to teaser_icon div: „grey”, „highlight”, „size_big”, „size_small”, „size_normal”, „dark_bg_color”, „main_bg_color”, „border_icon”, „round”. Also you can remove button from teaser and add a link inside any header.

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1496993320374{padding-top: 30px !important;}”][vc_column][vc_custom_heading text=”Normal Icons” font_container=”tag:h3|text_align:center|line_height:1″ use_theme_fonts=”yes” css=”.vc_custom_1496993980482{margin-bottom: 60px !important;}”][/vc_column][/vc_row][vc_row][vc_column width=”1/3″][cms_teaser layout=”layout2″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-heart” icon_size=”size_normal” icon_color=”#ffffff” title_heading=”h2″ title=”Grey Normal”]This is teaser with normal size grey icon with h2 heading and link inside header[/cms_teaser][/vc_column][vc_column width=”1/3″][cms_teaser layout=”layout2″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-heart” icon_size=”size_small” icon_color=”#01b2b7″ link=”url:%23|title:Regular%20Button||” btn_type=”btn-primary” title=”Color Small”]This is teaser with normal size grey icon with h3 heading and link inside header[/cms_teaser][/vc_column][vc_column width=”1/3″][cms_teaser layout=”layout2″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-heart” icon_color=”#ffffff” title_heading=”h4″ title=”Black Normal”]This is teaser with normal size grey icon with h4 heading and link inside header[/cms_teaser][/vc_column][/vc_row][vc_row][vc_column][vc_separator color=”custom” accent_color=”#dddddd” css=”.vc_custom_1496994197327{margin-top: 20px !important;margin-bottom: 40px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Background & Border Icons” font_container=”tag:h3|text_align:center|line_height:1″ use_theme_fonts=”yes” css=”.vc_custom_1496994105057{margin-bottom: 50px !important;}”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″ offset=”vc_col-lg-3 vc_col-md-3″][cms_teaser layout=”layout3″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-star” icon_color=”#ffffff” icon_border=”1″ icon_round=”” title_heading=”h2″ title=”Black Big”]This is teaser with big size black icon with h2 heading and link inside header[/cms_teaser][/vc_column][vc_column width=”1/2″ offset=”vc_col-lg-3 vc_col-md-3″][cms_teaser layout=”layout3″ icon_fontawesome=”fa fa-cube” icon_size=”size_small” icon_color=”#01b2b7″ icon_border=”1″ icon_round=”1″ link=”url:%23|title:Regular%20Button||” btn_type=”btn-primary” title=”Color Small”]This is teaser with big size color icon with h3 heading and Font Awesome icon[/cms_teaser][/vc_column][vc_column width=”1/2″ offset=”vc_col-lg-3 vc_col-md-3″][cms_teaser layout=”layout3″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-sound” icon_size=”size_normal” icon_color=”#ffffff” icon_border=”” icon_round=”” icon_bg=”#1a1a1a” title_heading=”h4″ link=”url:%23|title:Inverse%20Button||” btn_type=”btn-inverse” title=”Dark BG Normal”]This is teaser with dark background normal size icon and h4 heading[/cms_teaser][/vc_column][vc_column width=”1/2″ offset=”vc_col-lg-3 vc_col-md-3″][cms_teaser layout=”layout3″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-settings” icon_size=”size_normal” icon_color=”#ffffff” icon_border=”” icon_round=”1″ icon_bg=”#01b2b7″ link=”url:%23|title:Know%20More!||” btn_type=”btn-secondary” title=”Main BG Normal”]This is teaser with big size color background icon and h3 heading[/cms_teaser][/vc_column][/vc_row][vc_row][vc_column][vc_separator color=”custom” accent_color=”#dddddd” css=”.vc_custom_1496995089868{margin-top: 20px !important;margin-bottom: 50px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Teasers With Borders and Backgrounds” font_container=”tag:h2|text_align:center|line_height:1″ use_theme_fonts=”yes” css=”.vc_custom_1496995099505{margin-bottom: 10px !important;}”][/vc_column][/vc_row][vc_row css=”.vc_custom_1496995122381{margin-bottom: 20px !important;}”][vc_column][vc_column_text]

You can add a border or a background to any of them by adding a with_border or with_background, dark_bg_color, main_bg_color classes to teaser element.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″ offset=”vc_col-lg-3 vc_col-md-3″][cms_teaser layout=”layout4″ with_border=”1″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-heart” icon_color=”#ffffff” icon_border=”” icon_round=”” icon_bg=”#01b2b7″ title_heading=”h4″ link=”url:%23|title:Know%20More!||” btn_type=”btn-secondary” title=”Border Teaser”]This is teaser with normal size grey icon with h4 heading[/cms_teaser][/vc_column][vc_column width=”1/2″ offset=”vc_col-lg-3 vc_col-md-3″][cms_teaser layout=”layout4″ with_border=”” background_type=”gray_light_bg” icon_fontawesome=”fa fa-paint-brush” icon_color=”#01b2b7″ icon_border=”” icon_round=”” link=”url:%23|title:Know%20More!||” btn_type=”btn-primary” title=”Muted Teaser”]This is teaser with big size color icon with h3 heading and Font Awesome icon[/cms_teaser][/vc_column][vc_column width=”1/2″ offset=”vc_col-lg-3 vc_col-md-3″][cms_teaser layout=”layout4″ with_border=”” background_type=”dark_bg” icon_type=”rticon2″ icon_rticon2=”rt-icon2-star” icon_color=”rgba(255,255,255,0.6)” icon_border=”” icon_round=”” title_heading=”h4″ link=”url:%23|title:Know%20More!||” title=”Dark Teaser”]This is teaser with big size icon, dark background and h4 heading with border[/cms_teaser][/vc_column][vc_column width=”1/2″ offset=”vc_col-lg-3 vc_col-md-3″][cms_teaser layout=”layout4″ with_border=”” background_type=”primary_bg” icon_type=”rticon2″ icon_rticon2=”rt-icon2-eye” icon_size=”size_small” icon_color=”rgba(255,255,255,0.6)” icon_border=”1″ icon_round=”1″ link=”url:%23|title:Know%20More!||” btn_type=”btn-inverse” title=”Color Teaser”]This is teaser with small size icon with border, color background and h3 heading[/cms_teaser][/vc_column][/vc_row][vc_row][vc_column][vc_separator color=”custom” accent_color=”#dddddd” css=”.vc_custom_1497003212806{margin-top: 20px !important;margin-bottom: 40px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Side Teasers” font_container=”tag:h2|text_align:center|line_height:1″ use_theme_fonts=”yes” css=”.vc_custom_1497002849222{margin-bottom: 10px !important;}”][/vc_column][/vc_row][vc_row css=”.vc_custom_1496995122381{margin-bottom: 20px !important;}”][vc_column][vc_column_text css=”.vc_custom_1497003280231{margin-bottom: 10px !important;}”]

You can style icons for side teaser same as for regular teaser

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][cms_teaser layout=”layout5″ with_border=”” text_right=”” icon_type=”rticon2″ icon_rticon2=”rt-icon2-heart” icon_size=”size_normal” icon_color=”#01b2b7″ icon_border=”” icon_round=”” title_heading=”h4″ title=”Normal Icon Side Teaser”]This is a side teaser with small size icon and h4 heading[/cms_teaser][/vc_column][vc_column width=”1/2″][cms_teaser layout=”layout5″ with_border=”” text_right=”1″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-heart” icon_size=”size_small” icon_color=”#ffffff” icon_border=”” icon_round=”” icon_bg=”#01b2b7″ title=”Small Icon Side Teaser”]This is a side teaser with small size icon and h3 heading[/cms_teaser][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][cms_teaser layout=”layout5″ with_border=”1″ text_right=”” icon_type=”rticon2″ icon_rticon2=”rt-icon2-heart” icon_size=”size_small” icon_color=”#ffffff” icon_border=”” icon_round=”1″ icon_bg=”#323232″ title=”Small Icon Side Teaser With Border”]This is a side teaser with small size icon and h3 heading[/cms_teaser][/vc_column][vc_column width=”1/2″][cms_teaser layout=”layout5″ with_border=”” background_type=”primary_bg” text_right=”1″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-heart” icon_size=”size_small” icon_color=”rgba(255,255,255,0.6)” icon_border=”1″ icon_round=”” title_heading=”h4″ title=”Small Icon Side Teaser”]This is a side teaser with small size icon and h4 heading[/cms_teaser][/vc_column][/vc_row][vc_row][vc_column][vc_separator color=”custom” accent_color=”#dddddd” css=”.vc_custom_1497003212806{margin-top: 20px !important;margin-bottom: 40px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Horizontal Teasers” font_container=”tag:h2|text_align:center|line_height:1″ use_theme_fonts=”yes” css=”.vc_custom_1497057692696{margin-bottom: 10px !important;}”][/vc_column][/vc_row][vc_row css=”.vc_custom_1496995122381{margin-bottom: 20px !important;}”][vc_column][vc_column_text css=”.vc_custom_1497057957426{margin-bottom: 36px !important;}”]

You can style icons for horizontal teaser same as for regular teaser

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1497058252279{padding-bottom: 40px !important;}”][vc_column][cms_teaser layout=”layout6″ icon_type=”rticon2″ icon_rticon2=”rt-icon2-clock3″ icon_size=”size_small” icon_color=”#ffffff” icon_border=”” icon_round=”1″ icon_bg=”#01b2b7″ title_heading=”h2″ title=”Business Meetings”]At vero eos et accusam justo duo dolores ea rebum skasd gubergren no sea takimata sanctus est lorem ipsum[/cms_teaser][/vc_column][/vc_row][vc_row css=”.vc_custom_1497058262970{padding-bottom: 40px !important;}”][vc_column][cms_teaser layout=”layout6″ background_type=”gray_light_bg” icon_type=”rticon2″ icon_rticon2=”rt-icon2-clock3″ icon_color=”#01b2b7″ icon_border=”” icon_round=”1″ title=”Business Meetings”]At vero eos et accusam justo duo dolores ea rebum skasd gubergren no sea takimata sanctus est lorem ipsum[/cms_teaser][/vc_column][/vc_row][vc_row][vc_column][cms_teaser layout=”layout6″ background_type=”primary_bg” icon_type=”rticon2″ icon_rticon2=”rt-icon2-clock3″ icon_color=”rgba(255,255,255,0.6)” icon_border=”1″ icon_round=”1″ title=”Business Meetings”]At vero eos et accusam justo duo dolores ea rebum skasd gubergren no sea takimata sanctus est lorem ipsum[/cms_teaser][/vc_column][/vc_row]