![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-127.png)
Checkout How They Are Named!
Card-Variant/default
Card-Variant/hover
The Slash “/” is the named convention for variants
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-128.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-129.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-130.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-131.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-132.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-133.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-134.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-135.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-137.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-138.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-139.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-140.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-141.png)
Another way to create components, Select both and icon is here:
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-142.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-144.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-146.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-147.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-149.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-151.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-152.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-153.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-154.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-155.png)
![](https://blog.propellermind.com/wp-content/uploads/2024/03/image-156.png)
Checkout How They Are Named!
Card-Variant/default
Card-Variant/hover
The Slash “/” is the named convention for variants
Another way to create components, Select both and icon is here: