Class

Collection of predefined components to use on your site
Sample Class I
  • Little Lambs
    Class name
    12-24 Month olds
    9 Class size
    Click here
  • Bouncy Bears
    Class name
    2-3 Years olds
    12 Class size
    Click here
  • Tenderhearts
    Class name
    3-4 Years olds
    15 Class size
    Click here
  • Shining Stars
    Class name
    2-3 Years olds
    12 Class size
    Click here
Show code Hide code 
<!-- Class -->

<div class="template-component-class template-clear-fix">



	<!-- Layout 50x50 -->

	<ul class="template-layout-50x50">



		<!-- Left column -->

		<li class="template-layout-column-left">



			<!-- Layout flex 50x50 -->

			<div class="template-layout-flex-50x50">



				<!-- Left column -->

				<div>



					<!-- Header -->

					<h5>Little Lambs</h5>



					<!-- Subheader -->

					<span>Class name</span>



					<!-- Layout flex 50x50 -->

					<div class="template-layout-flex-50x50">

						<div>

							<span>12-24</span>

							<span>Month olds</span>

						</div>

						<div>

							<span>9</span>

							<span>Class size</span>

						</div>



					</div>

				</div>



				<!-- Right column -->

				<div class="template-component-class-background-1">



					<!-- Button -->



					<a href="#" class="template-component-button template-component-button-style-1">Click here<i></i></a>



				</div>	



			</div>



		</li>



		<!-- Right column -->

		<li class="template-layout-column-right">

			<div class="template-layout-flex-50x50">

				<div>

					<h5>Bouncy Bears</h5>

					<span>Class name</span>

					<div class="template-layout-flex-50x50">

						<div>

							<span>2-3</span>

							<span>Years olds</span>

						</div>

						<div>

							<span>12</span>

							<span>Class size</span>

						</div>

					</div>

				</div>

				<div class="template-component-class-background-2">

					<a href="#" class="template-component-button template-component-button-style-1">Click here<i></i></a>

				</div>	

			</div>

		</li>



		<!-- Left column -->

		<li class="template-layout-column-left">

			<div class="template-layout-flex-50x50">

				<div>

					<h5>Tenderhearts</h5>

					<span>Class name</span>

					<div class="template-layout-flex-50x50">

						<div>

							<span>3-4</span>

							<span>Years olds</span>

						</div>

						<div>

							<span>15</span>

							<span>Class size</span>

						</div>

					</div>

				</div>

				<div class="template-component-class-background-3">

					<a href="#" class="template-component-button template-component-button-style-1">Click here<i></i></a>

				</div>	

			</div>

		</li>



		<!-- Right column -->

		<li class="template-layout-column-right">

			<div class="template-layout-flex-50x50">

				<div>

					<h5>Shining Stars</h5>

					<span>Class name</span>

					<div class="template-layout-flex-50x50">

						<div>

							<span>2-3</span>

							<span>Years olds</span>

						</div>

						<div>

							<span>12</span>

							<span>Class size</span>

						</div>

					</div>

				</div>

				<div class="template-component-class-background-4">

					<a href="#" class="template-component-button template-component-button-style-1">Click here<i></i></a>

				</div>	

			</div>

		</li>



	</ul>



</div>
©  Fable - Children Kindergarten Template by QuanticaLabs