Home
Style Elements
Navigation
Forms
Lists
Components
Resources
Github Repo

Components

This elements are created individually that will be use to build and structure the user interface with focus, clarity, usability and accessibility.

Each components has a clear purpose and behavior where they were designed to work together to form a cohesive user experience as well, considering the different needs when interacting with the website.

Cards

In this example, the card is set to take up 100% of the width of its container, and its contents are stacked vertically using the flex-direction property. The image is set to fill the width of the card, and the text elements are given some margin to create space between them and the edges of the card. The box-shadow property creates a shadow effect around the card to give it some depth. This code can be modified as needed to create different layouts and styles for the responsive card.
Skincare routine, Skin health, Skin care secrets, Skin care steps

Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur totam, enim dolor nobis debitis facere animi, itaque est temporibus dolorem minima magnam doloribus sit!

View more
HTML
CSS

Product Card

This component contributes to the deciding factor of whether users should make a decision over buying our products or not. In this example it is essential to display an image of the product and a brief description with an action button that potentially turns into a sale. Also, keep in mind that this card build according the image sizing values for example this one follows the 3:2 ratio.
Skincare routine, Skin health, Skin care secrets, Skin care steps

Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

View more
HTML
CSS
This slideshow will contain a series of content with control indicators for the previous and next slide as well, the images must be in landscape orientation also, it is important to follow the sizing guidelines for images
Skincare routine, Skin health, Skin care secrets, Skin care steps
Skincare routine, Skin health, Skin care secrets, Skin care steps
Skincare routine, Skin health, Skin care secrets, Skin care steps
HTML
CSS

This is a second version of a carousel where we display products and allows you to display multiple products or images in a single container element to showcase featured products or product categories.

For displaying purposes in the design system the container main#carousel is justify: flex-start but in the example is set as center to follow the guidelines.

Skincare routine, Skin health, Skin care secrets, Skin care steps

Name of product

$$

Skincare routine, Skin health, Skin care secrets, Skin care steps

Name of product

$$

Anti-aging skincare, Natural skincare, Organic skincare, Cruelty-free skincare, Sensitive skin products, Acne treatment, Beauty routines/regimens

Name of product

$$

Skincare routine, Skin health, Skin care secrets, Skin care steps

Name of product

$$

Skincare routine, Skin health, Skin care secrets, Skin care steps

Name of product

$$

HTML
CSS

Table

In this example, the table is set to take up 100% of the width of its container, and the border-collapse property is used to collapse the borders of the table cells. The th and td elements are given some padding and a border, so they are separated visually. The media query at the end applies styles only to screens with a maximum width of 767 pixels. In this case, the table is set to display as a block element with horizontal scrollbars, so the table can be scrolled horizontally as needed on small screens.
Name Age Email
Jane Doe 25 jane@example.com
John Smith 30 john@example.com
HTML
CSS

In this example, the <footer> tag is used to wrap the footer content, and CSS class .footer-basic is used to style the footer's background color, padding, and alignment. The <ul> tag is used to hold the footer content, and CSS is used to set its margin to 0 to remove extra space.

HTML
CSS