Avatars
Avatars are used for display pictures, images in cards, email signatures, etc.
You can use avatar of 4 different sizes. Use class
avatar
and
avatar_circle
with the
<img>
or circular avatars. For size, use
avatar_xs
,
avatar_sm
,
avatar_md
and
avatar_lg
.
You can use avatars for texts too. Use classes
avatar_text
in addition to the previous classes. Use
<div>
here.
Alerts
Alerts are used to when we need to get user's attention immediately.
You can use several types of alerts you can use. Use class
alert_primary
,
alert_secondary
, and
alert_success
etc., as given in the code snippets below to use the colors of
respective kind.
You can use alerts with a closing button too.
Javascript
Badges
Badges are used to show the active/inactive, online/offline status of users by using dots of some specific colors on their images.
You can these with the avatars. Use class
badge_green
and
badge_red
to change the color of dots.
Badges on Avatars
Badges on icons
Icons on the badges come with 2 sizes viz. small and medium. You
don't need to do something for small icons, but to use medium ones,
you need to use
md
class as shown in the code.
Cards
Cards in chroma come in different sizes and orientation.
Bored Ape
by Vee
Rs.5000
Rs.6000
Bored Ape
by Vee
Rs.5000
Rs.6000
card_overlay
on the card and a container with a class
overlay_div
inside the card.
Bored Ape
by Vee
Rs.5000
Rs.6000
Card heading
Here you can put the subheadings that you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, sapien lacinia tincidunt commodo, felis leo vehicula metus, et placerat mi velit et lacus
Bored Ape
by Vee
Responsive images
Responsive images in chroma come under 2 categories: normal responsive images and round reponsive images.
img_responsive
to make the image reposive.
img_round
for the image to be round.
Forms
Forms are used to take user data. Forms in chroma come under 2 categories viz. simple forms and forms with validation.
field_required
if you want the field to be mandatory, with
required
attribute in the input tag.
form_valid
class and id to check the validity of your forms.
Typography
You can use classes
h1
,
h2
,
h3
,
h4
,
h5
,
h6
to use Chroma's font sizes.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<p>
tags. Use classes
txt_rg
,
txt_lg
,
txt_md
, and
txt_sm
for text of regular, large, medium and small sizes.
This is a large text.
This is a medium text.
This is a regular text.
This is a small text.
txt_light
for lighest and
txt_boldest
for boldest text of Chroma.
This is the boldest text.
This is a bold text.
This is a semi-bold text.
This is a regular text.
This is a light text.
gray_primary
, for headings and
gray_secondary
, for the content. You can also use
txt_right
and
txt_center
to adjust the alignment of text accordingly. Use
txt_strikethrough
for using strike through text.
Primary gray text.
Seconday gray text.
A strike through center text.
A right aligned text.
Grids
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
grid
class to set the display to grid,
grid_50_50
to set the layout to 50:50, and
gap_1
class to add a gap of 16px.
grid_three_column
class to make the grid display 3 columns layout,
gap_y_1
to give a row gap of 16px, and
gap_x_1
class to give a column gap of 16px.
grid_four_column
class to make the grid display 4 columns layout.
grid_20_80
class to apply this layout.
grid_30_70
class to apply this layout.
Lists
Lists organise similar kind of data in the same place. They come handy in many places like nav bars, stacked notifications, etc.
list_style_square
class to make the bullets square, and
list_style_circle
to make them circular. Please note that you need not to use
list_container
and
styled_list
class. These are used just to make things clear.
- list item1
- list item2
- list item3
- list item1
- list item2
- list item3
- list item1
- list item2
- list item3
list_style_none
to remove the bullets from the lists.
- list item1
- list item2
- list item3
list_inline
to make your list inline.
- list item1
- list item2
- list item3
stacked_list
to make your components stacked one over another.
Rating
Rating can be used in forms while applying filters, or it can also be used as static component to show the rating of an entity.
rating_star_input
to make the stars colorful on click.
Modal
Modals are used when you want the user to take an action on priority. This pushes all the content of the website back, thus, getting the attention of the user to the desired content.
modal_container
class.To display the modal, add
show_modal
class to your cta button. Use
modal
class to wrap your message. Provide
close_modal
class on the close button of modal. To close the modal, you can
click anywhere outside the modal, press the Esc key, or just press
the cross button.
This is a sample modal window.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Slider
Sliders can be used to change the value of granular elements like volume, price, etc.