General CSS Utilities

Overview

Styling basic card with CSS utility classes

Examples

Sample Card

                                                        
                                                        
                                                            <div class="co-d-flex co-flex-column co-gap-2 co-p-2 co-bg-indigo-000 co-border-base co-rounded-sm">
                                                            <h2 class="co-heading-2xl">Title</h2>
                                                            <p class="co-body-md co-text-base-body">This is simple card example with CSS utility classes</p>
                                                            <button class="co-button co-button--primary">Click me!</button>
                                                        </div>
                                                        
                                                            

Used Flexbox properties for arranging items in rows and columns. In above example we have used:

• The display utilities co-d-flex co-flex-column co-gap-2 properties to display flex layout and arrange inner elements vertically.
• The gap utilities co-gap-2 to display gap between title, card content and button.
• The padding utilities co-p-2 to control the overall card spacing.
• The border, border-radius and background-color utilities co-border-base co-rounded-sm co-bg-indigo-000 to style the appearance of card.
• The color co-text-base-body to style the card text color.
• The font-size, font-weight, line-height, font-weight and font-family utilities co-heading-2xl to style the headings. Headings are using Ubuntu font families
• The font-size, font-weight, line-height, font-weight and font-family utilities co-body-md to style the body text. Text other than headings are using Arial font families.
• The background-color, spacings, text and border utilities co-button co-button—primary to style primary button.

Elevated card with Images

                                                        
                                                        
                                                            <div class="co-d-flex co-flex-column co-gap-2 co-p-2 co-bg-indigo-000 co-border-base co-rounded-sm co-align-items-center co-shadow-10">
                                                            <img src="imagePath/personal-details-2.svg" class="co-w-fit" alt="Update profile picture">
                                                            <h2 class="co-heading-2xl">John Snow</h2>
                                                            <p class="co-body-md co-text-base-body">This is sample visiting card example with CSS utility classes</p>
                                                            <button class="co-button co-button--secondary">Edit</button>
                                                        </div>
                                                        
                                                            

• In above example used same flex properties and display content in the centre of card.
• To align-items centre used co-align-items
• To display elevated card used co-shadow-10
• The width of the image is manged using co-w-fit
• The background-color, spacings, text and border utilities co-button co-button—secondary to style secondary button.

Here are few class examples