dropcaps

Dropcaps

Base Components are usually small helper components to build Block Components.
These Components can be easily used and customized in any blocks.

Basic Dropcaps

Add a class u-dropcap to make basic dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used g-mr-20 and g-mb-10

Default dropcaps

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.


Default dropcaps with primary color

Just add an additional class g-color-primary to make primary color.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.


Underlined Dropcaps

Add a class u-dropcap-underline to make basic dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used g-mr-20 and g-mb-10

Underlined dropcaps

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.


Underlined dropcaps with primary color

Just add an additional class g-color-primary to make primary color.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.


Background Colored Dropcaps

Add a class u-dropcap-bg to make background colored dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used g-mr-20 and g-mb-10

Dark background

Add a class g-bg-gray-dark-v1 to make dark background and use g-color-white class to make light text.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Primary background

Add a class g-bg-primary to make primary background and use g-color-white class to make light text.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Gradient background

Add a class g-bg-darkgray-radialgradient-circle to make gradient background and use g-color-white class to make light text.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Rounded Dropcaps

Add a class u-dropcap-bg to make background colored dropcaps. Also, you should include an additional class g-rounded-10 to make rounded dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used g-mr-20 and g-mb-10

Dark background

Add a class g-bg-gray-dark-v1 to make dark background and use g-color-white class to make light text.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Primary background

Add a class g-bg-primary to make primary background and use g-color-white class to make light text.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Gradient background

Add a class g-bg-darkgray-radialgradient-circle to make gradient background and use g-color-white class to make light text. Please note, you may use any gradient colors.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Circle Dropcaps

Add a class u-dropcap-bg to make background colored dropcaps. Also, you should include an additional class rounded-circle to make circle dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used g-mr-20 and g-mb-10

Dark background

Add a class g-bg-gray-dark-v1 to make dark background and use g-color-white class to make light text.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Primary background

Add a class g-bg-primary to make primary background and use g-color-white class to make light text.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Gradient background

Add a class g-bg-darkgray-radialgradient-circle to make gradient background and use g-color-white class to make light text. Please note, you may use any gradient colors.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Border Rounded Dropcaps

Add a class u-dropcap-bordered to make bordered dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used g-mr-20 and g-mb-10

Default color

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Primary color

Use g-color-primary class to make primary color.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Bordered Dropcaps

Add a class u-dropcap-bordered to make bordered dropcaps. Also, you should include an additional class g-rounded-10 to make rounded dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used g-mr-20 and g-mb-10

Default color

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Primary color

Use g-color-primary class to make primary color.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Bordered Circle Dropcaps

Add a class u-dropcap-bordered to make bordered dropcaps. Also, you should include an additional class rounded-circle to make rounded dropcaps. The margin spacing might be any but for the all dropcaps examples the following margin spacing classes are used g-mr-20 and g-mb-10

Default color

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.


Primary color

Use g-color-primary class to make primary color.

D established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem, Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. Normal distribution of letters, as opposed to using 'Content here, content.