<div id="tcb-typography" style="padding: 1px">
	<div class="tve_editable thrv-typography tcb-el-group" data-element-name="All Elements" data-selector-key="all">

		<?php /* All Headings */ ?>
		<div class="tve_editable thrv-typography tcb-el-group" data-element-name="All Headings" data-selector-key="headings">
			<?php for ( $i = 1; $i <= 6; $i ++ ) : ?>
				<div class="tve_editable thrv-typography" data-element-name="Heading <?php echo $i ?>" data-selector-key="h<?php echo $i ?>">
					<h<?php echo $i; ?>>H<?php echo $i; ?> Heading Example, <strong>Bold</strong> and <em>Italic</em></h<?php echo $i; ?>>
				</div>
				<div class="typography-spacer"></div>
			<?php endfor; ?>
		</div>

		<div class="typography-spacer"></div>

		<?php /* All Texts */ ?>
		<div class="tve_editable thrv-typography tcb-el-group" data-element-name="All Texts" data-selector-key="texts">
			<div class="tve_editable thrv-typography" data-element-name="Text/Paragraph" data-selector-key="p">
				<p>An example paragraph text including some <strong>bold text</strong> and some <em>italic</em> text.</p>
				<p>This is a longer paragraph so you can see what happens when the text spans across multiple lines. This is helpful when judging things like line spacing and margin settings.</p>
			</div>

			<div class="typography-spacer"></div>

			<div class="tve_editable thrv-typography" data-element-name="List" data-selector-key="ul">
				<ul>
					<?php foreach ( range( 0, 2 ) as $i ) : ?>
						<li class="tve_editable thrv-typography" data-element-name="List Item" data-selector-key="li">
							<?php if ( $i === 1 ) : ?>
								A list item that spans across multiple lines. Helpful when trying to identify the correct line heights and line spacing. Use the line spacing control to set an appropriate distance between bullet points.
							<?php else : ?>
								A list item example with some <strong>bold text</strong> and some <em>italic</em> text.
							<?php endif ?>
						</li>
					<?php endforeach ?>
				</ul>
			</div>

			<div class="typography-spacer"></div>

			<!-- thrv-typography-link -> this will replace the old general link, inside it are the other, more specific links	-->
			<div class="thrv-typography-link tcb-selector-mouseover tve_editable" data-element-name="All Links" data-selector-key="link" style="padding:10px;">
				<div style="margin:0;padding-left:10px;padding-bottom: 5px;" class="thrv_text_element breadcrumbs-hidden">
					<p style="padding:0;">
						<a class="tcb-not-editable thrv-typography-link-text">
							This is a hyperlink. These settings apply to all links unless you edit a specific one.
						</a>
					</p>
				</div>
				<!--Link on Heading-->
				<div style="margin-bottom:8px;padding-left:10px;" class="thrv_text_element breadcrumbs-hidden">
					<h5 style="padding: 0;">
						<a class="tcb-selector-mouseover tve_editable tcb-heading-link"
						   data-element-name="<?php echo esc_attr__( 'Heading Link', 'thrive-cb' ); ?>"
						   data-selector-key="heading_link"
						   href="https://thrivethemes.com" target="_blank">
							This is a hyperlink in headings.
						</a>
					</h5>
				</div>

				<!--Link on Paragraph-->
				<div style="margin:0;padding-left:10px;" class="thrv_text_element breadcrumbs-hidden">
					<p style="padding:0;">
						<a class="tcb-selector-mouseover tve_editable"
						   data-element-name="<?php echo esc_attr__( 'Paragraph Link', 'thrive-cb' ); ?>"
						   data-selector-key="p_link" href="https://thrivethemes.com" target="_blank">
							This is a hyperlink in a paragraph.
						</a>
					</p>
				</div>

				<!--Link on List Item-->
				<div style="padding-left:10px;" class="tcb-styled-list breadcrumbs-hidden">
					<a class="tcb-selector-mouseover tve_editable"
					   data-selector-key="li_link"
					   data-element-name="<?php echo esc_attr__( 'List Item Link', 'thrive-cb' ); ?>"
					   href="https://thrivethemes.com" target="_blank">
						This is a hyperlink inside lists.
					</a>
				</div>

				<!--Link on Plain Text(spans)-->
				<div style="padding-left:10px;" class="thrv_text_element breadcrumbs-hidden">
					<div class="tcb-plain-text breadcrumbs-hidden" style="cursor:pointer;">
						<a class="tcb-selector-mouseover tve_editable"
						   data-selector-key="plaintext_link"
						   data-element-name="<?php echo esc_attr__( 'Plaintext Link', 'thrive-cb' ); ?>"
						   href="https://thrivethemes.com" target="_blank">
							This is a hyperlink inside span tags.
						</a>
					</div>
				</div>
			</div>

			<div class="typography-spacer"></div>

			<div class="typography-spacer"></div>

			<div class="thrv-typography tve_editable" data-selector-key="blockquote" data-element-name="Blockquote">
				<blockquote>This is an example of a blockquote.</blockquote>
			</div>

			<div class="typography-spacer"></div>
			<div class="tve_editable thrv-typography" data-element-name="Plain Text" data-selector-key="plaintext">
				<div class="tcb-plain-text">
					This is a &quot;Plain Text&quot;. This text type is the default fallback font for any element that is not included in this &quot;Typography&quot; list.<br>
					&quot;Plain Texts&quot; are simple texts that do not inherit styling from the theme. Here are a few examples where the &quot;Plain Text&quot; type is used: text inputs, drop-down elements, buttons (used in places like a search bar, a contact form, a Lead Generation element) etc.
				</div>
			</div>
			<div class="typography-spacer"></div>
		</div>
		<div class="typography-spacer"></div>
	</div>
	<div class="thrv-typography tve_editable" data-selector-key="pre" data-element-name="Preformatted text">
		<pre>This is an example of preformatted text.</pre>
	</div>
</div>
