Dropcat Highlight

Click to preview the Dropcat Highlight demo. View demo

Default dropcat styles

Code:

<p><span class="dropcap bg-default"> M </span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

<p><span class="dropcap bg-default dropcap-circle "> M </span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

<p><span class="dropcap"> M </span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

<p><span class="dropcap bg-accent">M</span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

<p><span class="dropcap bg-accent dropcap-circle ">M</span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

<p><span class="dropcap color-accent">M</span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

Colored dropcat styles

Code:

<p><span class="dropcap border-accent color-accent">M</span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

<p><span class="dropcap dropcap-circle  border-accent color-accent">M</span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

<p><span class="dropcap dropcap-square border-accent color-accent">M</span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

Border dropcat styles

Code:

<p><span class="dropcap bg-accent dropcap-small">M</span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

<p><span class="dropcap bg-accent">M</span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

<p><span class="dropcap bg-accent dropcap-large">M</span>auris viverra, dui at cursus suscipit, lectus hendrerit anute, nec iaculis felis nulla quils tellus. In rhoncus pharetra ailm. Quisque tortor odio, feugiat vitae velitndle atncuion, feuiat euismod nunc. Morbi lectus nellque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus non pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendisse suscipit libero. </p>

dropcat sizes

Code:

<p>Mauris viverra, dui atle cursus suscipit, lectus hendrerit anute, neicd iaculis felis nulla quils tellus. <span class="highlight ">In rhoncus pharetra ailnm.</span> Quisque toer odio, feugiat vitae velitndle atncuion, feuiat euismod nuiednlc. Morbi lectus nellque, mollios quisnt tellus egendt, placerat viverra enaoim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus naioln pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendis sesuscipit libero. </p>

<p>Mauris viverra, dui atle cursus suscipit, lectus hendrerit anute, neicd iaculis felis nulla quils tellus. <span class="highlight bg-accent">In rhoncus pharetra ailnm.</span> Quisque toer odio, feugiat vitae velitndle atncuion, feuiat euismod nuiednlc. Morbi lectus nellque, mollios quisnt tellus egendt, placerat viverra enaoim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus naioln pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendis sesuscipit libero. </p>

<p>Mauris viverra, dui atle cursus suscipit, lectus hendrerit anute, neicd iaculis felis nulla quils tellus. <span class="highlight bg-accent"><del>In rhoncus pharetra ailnm.</del></span> Quisque toer odio, feugiat vitae velitndle atncuion, feuiat euismod nuiednlc. Morbi lectus nellque, mollios quisnt tellus egendt, placerat viverra enaoim. Sed rhoncus neque sed adipiscing bibendum. Ut euiod metus naioln pulvinar. Curabitur rutrum et lectus egestas sollicit diaun. Suspendis sesuscipit libero. </p>