Saturday, 25 March 2017
A+ R A-

Comment Bubbles

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

Bubble 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Bubble 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Bubble 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Bubble 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Bubble 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Bubble 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Rounded Bubble 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Rounded Bubble 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Rounded Bubble 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Rounded Bubble 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Rounded Bubble 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

Rounded Bubble 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

  Author Name

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

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

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

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

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

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

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

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

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

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

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

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