Go back to Examples

Section component

Component - Intermediate

Components are used to manage recurring layouts and content more efficiently across your site. Properties can be added and then binded to elements this allows you to have the same layout but different content. If a component is updated all components that reference it will also be updated.

                <!-- Component: v-section -->
<section class="py-24">
    <div class="container">
        <div class="row">
            <div class="col lg:w-6/12">
                <h1 v-html="header"></h1>
                <p v-html="subHeader"></p>
            </div>
            <div class="col lg:w-6/12">
                <img v-bind:src="image" v-bind:alt="imageAlt" />
            </div>
        </div>
    </div>
</section>

<!-- Referencing a component -->
<template v-component="v-section" v-data="{'header': 'This is a header'}"></template>
CMS Select Component inside loop