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.
We offer best in class service for your needs
About Us
About Unify dolor sit amet, consectetur adipiscing elit. Maecenas eget nisl id libero tincidunt sodales.
Useful Links
Our Contacts
795 Folsom Ave, Suite 600,
San Francisco, CA 94107 795
(+123) 456 7890
(+123) 456 7891