Basic Cards
Huro cards are very versatile and can be used in any type of
layout. Huro provides 3 main basic cards with the following
classes: .s-card, .r-card and
.l-card. The main difference each one of those is
the border radius, giving a unique look and feel to each one
of them. If you explore Huro SCSS code, you will notice that
they serve as a base for numerous components, using the SCSS
@extend directive.
Iam an S-Card
I can be used as is in any layout. S Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Iam an R-Card
I can be used as is in any layout. R Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Iam an L-Card
I can be used as is in any layout. L Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Elevated Cards
Huro cards can be elevated and show a slight box shadow. To
display elevated cards, simply add the
is-raised class to the target card element.
Raised S-Card
I can be used as is in any layout. S Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Raised R-Card
I can be used as is in any layout. R Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Raised L-Card
I can be used as is in any layout. L Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Colored Cards
Huro cards can have colored backgrounds when you need them to.
To display Available color modifiers are
.is-primary, .is-info,
.is-success, .is-warning and
.is-danger.
Primary S-Card
I can be used as is in any layout. S Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Secondary R-Card
I can be used as is in any layout. R Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Info L-Card
I can be used as is in any layout. L Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Success S-Card
I can be used as is in any layout. S Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Warning R-Card
I can be used as is in any layout. R Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Danger L-Card
I can be used as is in any layout. L Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
Structured Cards
Huro cards can have a small flex header where you can put come content. Reference the markup for more details about usage.
I can be used as is in any layout. L Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
I can be used as is in any layout. L Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.
I can be used as is in any layout. L Cards are simple containers that can hold any type of content, from simple plain text to more structured markup.