![]() If you were to view this blog post on a small screen you’d see that the cards switch to a single column and back to 3 columns on larger screens. Beneath the code is an example of how the cards look so far. In fact, once you have this basic structure, as shown below, you really just need to add the content. Tailwind doesnt include pre-designed card components out of the box, but theyre easy to build using. As you can see, they aren’t really too complicated. Examples of building card components with Tailwind CSS. Basic structureīelow is the basic structure of the parent container, the grid container, and the cards themselves. As the saying goes, sometimes less is more. Plus I think four columns is heading into cluttered screen territory for most dashboards. ![]() You could add a fourth card and go to 2 columns by 2 rows around 460px screen width, but I am not sure how many devices really fall into that screen size range. ![]() Taking a mobile first approach, the grid will have a single column on small screens (less than 768px) and three columns on larger screens (at least 768px or larger). We want the number to catch the user’s eye so it will have a large font size. Lastly, the cards themselves will have a title and a number. We’ll also define how many columns our grid will have, and the gap around our columns. The grid container is where we will define our grid. We’ll also be adding some padding in the parent container so the spacing is even when the stat cards are next to other elements on a page. In this div we will set the background-color to a light grey, which is a subtle way to make the cards stand out a bit more. The parent container is the top level div. Our stat cards will contsist of a parent container, a grid container, and the card elements themselves.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |