Comment Bubbles
- Category: Typography
- Written by Super User
- Hits: 9080
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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>