0byt3m1n1-V2

Path: /app/wp-content/plugins/livecanvas/editor/ [ Home ]
File: side-panel-blocks.html
<section item-type="blocks" >
    <h1>Blocks</h1> 
    <!--
	<div class="sidepanel-tabs">
		<a data-show="basic-blocks" class="active"><i class="fa fa-ellipsis-h" aria-hidden="true"></i> <span> Basic</span>  </a>
		<a data-show="bootstrap-blocks"><i class="fa fa-bold" aria-hidden="true"></i> <span>BootStrap</span></a>
		<a data-show="your-custom-blocks"><i class="fa fa-star" aria-hidden="true"></i> <span>Custom</span>  </a> 
    </div>   
	-->
	 
	<form id="basic-blocks" class="blocks-browser">
		
		<h4 style="margin-top:0" class="opened">Basic</h4>
		<div style="display: block">

			
			<block>
				<i class="fa fa-header" aria-hidden="true"></i>
				<h5 class="block-name"> One Heading & Some Lipsum </h5>
				<i class="block-description">An H2 heading, and a paragraph</i>
				<template> 
					<div editable="rich">
						 
						<h2>The quick brown fox jumps over the lazy dog</h2>
						 
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam,
							vulputate eu tellus ac, mattis cursus nunc. In aliquet erat ac eros congue maximus. Fusce cursus leo at elit tincidunt, consequat ultrices ante pretium. Vivamus ut dapibus nisl, nec condimentum purus.</p>
					</div>
				</template>
			</block>
			
			<block>
				<i class="fa fa-align-left" aria-hidden="true" ></i>
				<h5 class="block-name">  Flat Lipsum Text</h5>
				<i class="block-description">A simple paragraph </i>
				<template> 
					<div editable="rich">
						<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor
							ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.
						</p>
					</div>
				</template>
			</block>
			<!-- 
			<block>
				<h5 class="block-name">A large centered Heading</h5>
				<i class="block-description">Heading and Subheading </i>
					<template>
						<h2 class="display-1 text-center mb-2" editable="inline"> The Heading</h2>
						<h4 class=" text-center mb-5" editable="inline">The subheading text goes here. Explain what's going on in here.</h4>
					</template>
			</block> -->
 

			
			
			
			<block>
				<i class="fa fa-file-image-o" aria-hidden="true"></i>
				<h5 class="block-name">Image</h5>
				<i class="block-description">A simple responsive image, just an <b>img</b> tag</i>
				<template> 
					<img class="img-fluid" src="https://images.unsplash.com/photo-1503624886539-b1355ee1a745?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjM3ODR9&amp;s=05d1b7e1db6bcbdc11c57c357768c11c">
				</template>
			</block>
			
			
			
			
			<block>
				<i class="fa fa-star-o" aria-hidden="true" ></i>
				<h5 class="block-name">Icon</h5>
				<i class="block-description">A centered FontAwesome icon and some text</i>
				<template> 
					<div class="text-center">
						<i class="fa fa-skyatlas mb-2" style="font-size:10vw;"></i>
						<h4 class="mb-0" editable="inline">Icon Label</h4>
						<p editable="inline">Some Dummy Description Text</p>
					</div>	
				</template>
			</block>
			
			<block>
				<i class="fa fa-dot-circle-o" aria-hidden="true" ></i>
				<h5 class="block-name">Button</h5>
				<i class="block-description">A button that can link to anything</i>
				<template>
					<a class="btn btn-primary"   href="#" role="button"  >Click me, I'm a button</a>
				</template>
			</block>

			<block>
				<i class="fa fa-quote-right" aria-hidden="true"></i>
				<h5 class="block-name"> Blockquote</h5>
				<i class="block-description">List categories. Uses the <b>wp_list_categories</b>  standard   parameters.</i>
				<template>					
					<blockquote class="blockquote text-center">
						<p editable="inline" class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
						<footer editable="inline" class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
					</blockquote>
				</template>

				
			</block>




		</div>
		
		
		<h4>Embed</h4>
		<div id="media-blocks">

			<block>
				<i class="fa fa-youtube-play " aria-hidden="true"></i>
				<h5 class="block-name">YouTube</h5>
				 <template> 
					<div class="embed-responsive embed-responsive-16by9" lc-helper="video-embed">
						<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/HLKQD6GoKNU?feature=oembed"></iframe>
					</div>			
				</template>
			</block>
			
			<block>
				<i class="fa fa-vimeo " aria-hidden="true"></i>
				<h5 class="block-name">Vimeo</h5>
			 	<template> 
					<div class="embed-responsive embed-responsive-16by9" lc-helper="video-embed">
						<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/183213801?color=ffffff&title=0&byline=0&portrait=0"  ></iframe>
					</div>			
				</template>
			</block>
			
			<block>
				<i class="fa fa-soundcloud " aria-hidden="true"></i>
				<h5 class="block-name">SoundCloud</h5>
				 <template> 
					<div class="embed-responsive embed-responsive-16by9" lc-helper="video-embed">
						<iframe class="embed-responsive-item" src="https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F564062355&amp;show_artwork=true&amp;maxwidth=640&amp;maxheight=960&amp;dnt=1"></iframe>
					</div>		
				</template>
			</block>

			<block>
				<i class="fa fa-mixcloud " aria-hidden="true"></i>
				<h5 class="block-name">Mixcloud</h5>
				 <template> 
					<div class="embed-responsive embed-responsive-16by9" lc-helper="video-embed">
						<iframe class="embed-responsive-item" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2FDJJazzyJeff%2Fsummertime-mixtape-vol-9%2F&amp;amp;hide_cover=1"></iframe>
					</div>		
				</template>
			</block>
			

			
			<block>
				<i class="fa fa-map-marker" aria-hidden="true"></i>
				<h5 class="block-name">Google Map</h5> 
				<template> 
					<div class="embed-responsive embed-responsive-16by9" lc-helper="gmap-embed">
						<iframe class="embed-responsive-item" src="https://maps.google.com/maps?q=London%2C%20UK&amp;t=m&amp;z=8&amp;output=embed&amp;iwloc=near"></iframe>
					</div>				
				</template>
			</block>	
		
		</div>

		<h4>Bootstrap 4 blocks</h4>
		
		<div id="bootstrap-blocks">
			
			<block>
				<i class="fa fa-vcard-o" aria-hidden="true"></i>
				<h5 class="block-name">Blurb</h5>
				<i class="block-description">A horizontally stacked icon & text</i>
				<template>  
					<!-- Start Blurb -->
					<div class="row py-2">
						<div class="col-3 text-center">
							<i class="fa fa-check fa-3x mt-3" aria-hidden="true"></i>
						</div>
						<div class="col-9" editable="inline">
							<strong>Hello World</strong><br>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. 
						</div>
					</div>
					<!-- End Blurb -->
				</template>
			</block>
			
			<block>
				<i class="fa fa-id-badge" aria-hidden="true"></i>
				<h5 class="block-name">Card</h5>
				<i class="block-description">A simple <b>card</b>  </i>
				<template> 
					<div class="card">
						<img class="card-img-top" src="https://images.unsplash.com/photo-1457410129867-5999af49daf7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjM3ODR9&s=cb232cd6f30672a50ae14d6682fc2aa9" alt="Card image top">
						<div class="card-body">
						  <h3 class="card-title" editable="inline">Card title</h3>
						  <!-- <h4 class="card-subtitle" editable="inline">Card subtitle</h4> -->
						  <p class="card-text" editable="inline">This is a simple Card example</p>
						</div>
					  </div>    
				</template>
			</block>
			<block>
				<i class="fa fa-wpforms" aria-hidden="true"></i>
				<h5 class="block-name">Card with Overlayed image</h5>
				<i class="block-description">A simple <b>card</b>  </i>
				<template> 
					<div class="card">
						<img class="card-img-top" src="https://images.unsplash.com/photo-1457410129867-5999af49daf7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjM3ODR9&s=cb232cd6f30672a50ae14d6682fc2aa9" alt="Card image top">
						<div class="card-img-overlay">
						  <h3 class="card-title" editable="inline">Card title</h3>
						  <!-- <h4 class="card-subtitle" editable="inline">Card subtitle</h4> -->
						  <p class="card-text" editable="inline">This is a simple Card example</p>
						</div>
					  </div>    
				</template>
			</block>
			
			<block>
				<i class="fa fa-info-circle" aria-hidden="true"></i>
				<h5 class="block-name">Alert</h5>
				<i class="block-description">A clean way to show important things </i>
				<template>
					<div class="alert alert-primary" role="alert" editable="rich">
						A simple   alert with some editable text.
					  </div>
				</template>
				
				
			</block>
			
			
			<block>
				<i class="fa fa-minus" aria-hidden="true"></i>
				<h5 class="block-name">Progress Bar</h5>
				<i class="block-description">A clean way to show important things </i>
				<template>
					<div class="progress">
						<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
					</div>
				</template>
				
				
			</block>
					
			<block>
				<i class="fa fa-plus-square" aria-hidden="true"></i>
				<h5 class="block-name">Button + Collapsible</h5>
				<i class="block-description">A button that can reveal a hidden block</i>
				<template>
					<a class="btn btn-primary" data-toggle="collapse" href="#collapse-@randomid@" role="button" aria-expanded="false" aria-controls="collapse-@randomid@">Click me to reveal content</a>
					
					
					<div class="lc-block collapse" id="collapse-@randomid@">
						<div class="card card-body" editable="rich">
							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
						</div>
					</div>
	
				</template>
			</block>
			
			<block>
				<i class="fa fa-server" aria-hidden="true"></i>
				<h5 class="block-name">Accordion</h5>
				<i class="block-description">A tabbed way to show stuff </i>
				<template>
					
					<div class="accordion" id="accordion-@randomid@">
						<div class="card">
						  <div class="card-header" id="headingOne">
							<h5 class="mb-0">
							  <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-@randomid@-1" aria-expanded="true" aria-controls="collapse-@randomid@-1"> Item #1 </button>
							</h5>
						  </div>
					  
						  <div id="collapse-@randomid@-1" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion-@randomid@">
							<div class="card-body lc-block">
								<div editable="rich">
									<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor
									ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.
									</p>
								</div>
							</div>
						  </div>
						</div>
						<div class="card">
						  <div class="card-header" id="headingTwo">
							<h5 class="mb-0">
							  <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-@randomid@-2" aria-expanded="false" aria-controls="collapse-@randomid@-2"> Item #2  </button>
							</h5>
						  </div>
						  <div id="collapse-@randomid@-2" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion-@randomid@">
							<div class="card-body lc-block">
								<div editable="rich">
									<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor
									ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.
									</p>
								</div>
							</div>
						  </div>
						</div>
						<div class="card">
						  <div class="card-header" id="headingThree">
							<h5 class="mb-0">
							  <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-@randomid@-3" aria-expanded="false" aria-controls="collapse-@randomid@-3"> Item #3</button>
							</h5>
						  </div>
						  <div id="collapse-@randomid@-3" class="collapse" aria-labelledby="headingThree" data-parent="#accordion-@randomid@">
							<div class="card-body lc-block">
								<div editable="rich">
									<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor
									ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.
									</p>
								</div>
							</div>
						  </div>
						</div>
					  </div>
					
				</template>
				
				
			</block>
				
			
			 
			
			<block>
				<em>
					 <i class="fa fa-photo" aria-hidden="true"></i>	 
				</em>
				<h5 class="block-name">Carousel</h5>
				<i class="block-description">A simple <b>images</b> slider</i>
				<template> 
					<div id="carousel-@randomid@" class="carousel slide carousel-fade" data-ride="carousel">
						<div class="carousel-inner">
						  <div class="carousel-caption <!-- d-none d-md-block --> lc-block"   >
								
							<h1 class="font-weight-bold" style="font-size:5vw;" editable="inline">Any Bold Claim.</h1>
							<p class="font-weight-light" style="font-size:1.5vw;" editable="inline">And some more text as a subtitle or explanation of your goals.</p>  
						  </div>	
						  <div class="carousel-item active ">
							<img class="d-block w-100" src="https://cdn.dopewp.com/media/architecture/s1.jpg" alt="First slide">
						  </div>
						  <div class="carousel-item">
							<img class="d-block w-100" src="https://cdn.dopewp.com/media/architecture/s2.jpg" alt="Second slide">
						  </div>
						  <div class="carousel-item">
							<img class="d-block w-100" src="https://cdn.dopewp.com/media/architecture/s3.jpg" alt="Third slide">
						  </div>
						</div>
						<a class="carousel-control-prev" href="#carousel-@randomid@" role="button" data-slide="prev">
						  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
						  <span class="sr-only">Previous</span>
						</a>
						<a class="carousel-control-next" href="#carousel-@randomid@" role="button" data-slide="next">
						  <span class="carousel-control-next-icon" aria-hidden="true"></span>
						  <span class="sr-only">Next</span>
						</a>
					  </div>				
				</template>
			</block>
			
			<block>
				<i class="fa fa-mouse-pointer" aria-hidden="true" style="font-size:2vh;"></i>	<i class="fa fa-window-maximize" aria-hidden="true"></i>
				<h5 class="block-name">Button + Modal Window</h5>
				<i class="block-description">A button that triggers a modal window</i>
				<template>
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-@randomid@">Open the modal</button>
					
					<!-- Modal -->
					<div class="modal fade" id="modal-@randomid@" tabindex="-1" role="dialog" aria-labelledby="modal-@randomid@-Label" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" editable="inline" id="modal-@randomid@-Label">Modal title</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							  <span aria-hidden="true">×</span>
							</button>
								</div>
								<div class="modal-body" editable="rich">Lorem ipsum dolor sit amet, malis offendit ad usu, nostrum posidonium dissentias vim an. Impetus epicurei deterruisset duo cu, vix impetus consulatu no. An vis labores deseruisse scribentur, et has odio
									epicuri. Pro et luptatum vivendum, unum audiam suscipit at duo.</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
					
								</div>
							</div>
						</div>
					</div>
				</template>
			</block>
		</div>

		
		<h4>WordPress Integration</h4>
		<div id="wordpress-integration-blocks">		 
			<block>
				<i class="fa fa-wordpress" aria-hidden="true"></i>
				<h5 class="block-name">Shortcode</h5>
				<i class="block-description">Embed any WP Shortcode</i>
				<template>
					<div  lc-helper="shortcode" class="live-shortcode">[lc_dummyshortcode]</div>
				</template>
			</block>
			
					 
			<block>
				<i class="fa fa-wordpress" aria-hidden="true" ></i>
				<h5 class="block-name"> Get Posts</h5>
				<i class="block-description">List posts, pages or any custom post type. Uses the <b>get_posts</b>  standard   parameters. Click the shortcode to easily edit the parameters.</i>
				<template>
					<div lc-helper="posts-loop" class="live-shortcode">[lc_get_posts]</div>
				</template>
			</block>
			
			<block>
				<i class="fa fa-wordpress" aria-hidden="true"></i>
				<h5 class="block-name"> Get Categories</h5>
				<i class="block-description">List categories. Uses the <b>wp_list_categories</b>  standard   parameters.</i>
				<template>
					<div lc-helper="shortcode" class="live-shortcode">[lc_get_cats]</div>
				</template>
			</block>
		
		</div>
		
		
		
		<h4 data-load="custom-html-blocks">Your Custom Blocks</h4>
		<div id="custom-html-blocks">
			
		</div>
		
		
		
	</form>
	<!--
	<form id="bootstrap-blocks" class="blocks-browser">
		


		 
	</form>

	<form id="your-custom-blocks" class="blocks-browser">
		
		<h4> Your HTML Blocks </h4>
		 
		<div id="lc-your-html-blocks"></div>
		 
	</form>
    -->
   
</section>