Comment Bubbles

This is a sample page with examples on Bubbles. They are to be used for comment like paragraphs.

/* Bubble 1*/
<div class="ja-typo-bubble bubble-1">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>

/* Bubble 2*/
<div class="ja-typo-bubble bubble-2">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>

/* Bubble 3*/
<div class="ja-typo-bubble bubble-3">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>

/* Bubble 4*/
<div class="ja-typo-bubble bubble-4">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>

/* Bubble 5*/
<div class="ja-typo-bubble bubble-5">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
	</p>
</div>

/* Bubble 6 */
<div class="ja-typo-bubble bubble-6">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>

/* Rounded Bubble 1*/
<div class="ja-typo-bubble bubble-rounded bubble-1">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>

/* Rounded Bubble 2 */
<div class="ja-typo-bubble bubble-rounded bubble-2">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>

/* Rounded Bubble 3 */
<div class="ja-typo-bubble bubble-rounded bubble-3">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>

/* Rounded Bubble 4 */
<div class="ja-typo-bubble bubble-rounded bubble-4">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
lt;/div>

/* Rounded Bubble 5 */
<div class="ja-typo-bubble bubble-rounded bubble-5">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>

/* Rounded Bubble 6 */
<div class="ja-typo-bubble bubble-rounded bubble-6">
	<div class="ja-typo-bubblect">
		Your text goes here.
	</div>
	<p class="ja-typo-bubble-meta">
		<span class="ja-typo-bubble-arrow"></span>
		<span class="ja-typo-bubble-author">Author Name</span>
	</p>
</div>