Touts

Feature

cms-name: tout

cms-class: feature

recommended-container: container-touts

color-options: green/orange, blue/pink

component-name: tout-feature

css: library/tout-featue

<div data-ignore style="max-width: 600px">
	<tout-feature data-vue-comp="tout-feature" data-vue-sample="tout"></tout-feature>
</div>

Feature Wide

cms-name: tout

cms-class: feature-wide

recommended-container: container-touts

color-options: green/orange, blue/pink

component-name: tout-feature-wide

css: library/tout-featue-wide

<tout-feature data-vue-comp="tout-feature-wide" data-vue-sample="tout"></tout-feature>

Simple

cms-name: tout

cms-class: simple

recommended-container: container-touts-decorated-plus

color-options: green/orange, blue/pink

component-name: tout-simple

css: library/tout-simple

<div data-ignore style="max-width: 600px">
	<tout-simple data-vue-comp="tout-simple" data-vue-sample="toutSimple"></tout-simple>
</div>

With Border

cms-name: tout

cms-class: with-border

recommended-container: container-touts-padded / container-touts-padded-decorated-lines

color-options: green/orange, blue/pink

component-name: tout-with-border

css: library/tout-with-border

<div data-ignore style="max-width: 500px">
	<tout-with-border data-vue-comp="tout-with-border" data-vue-sample="toutWithBorder"></tout-with-border>
</div>

With Event

cms-name: tout

cms-class: with-event

recommended-container: container-touts-padded / container-touts-padded-decorated-lines

color-options: green/orange, blue/pink

component-name: tout-with-event

css: library/touts/tout-with-event

<div data-ignore style="max-width: 500px">
	<tout-with-border data-vue-comp="tout-with-event" data-vue-sample="toutWithEvent"></tout-with-border>
</div>

With Image

cms-name: tout

cms-class: with-image

recommended-containers(s): container-touts-padded / container-touts-padded-decorated-lines

color-options: green/orange, blue/pink

component-name: tout-with-image

css: library/tout-with-image

  • Note: gradient is baked into image. When providing images, please include gradient behind text
<div data-ignore style="max-width: 500px">
	<tout-with-image data-vue-comp="tout-with-image" data-vue-sample="toutWithImage"></tout-with-image>
</div>

With Video

cms-name: tout

cms-class: with-video

recommended-container: container-touts-padded / container-touts-padded-decorated-lines

color-options: green/orange, blue/pink

component-name: tout-with-video

css: library/touts/tout-with-video

<div data-ignore style="max-width: 500px">
	<tout-with-video data-vue-comp="tout-with-video" data-vue-sample="toutWithVideo"></tout-with-video>
</div>