Cards have been refactored to support a simple semantic layout:
<div class="card">
<div class="card-header">
...
</div>
<div class="card-block">
...
</div>
<div class="card-footer">
...
</div>
</div>
.card-img
classWe recommend moving all card actions into the card footer.
Deprecated Classes | Replacement |
---|---|
.card-link |
Flat/Link Buttons - .btn .btn-sm .btn-link |
.group |
.card-media-block |
.card-overflow-menu |
.dropdown |
.card-img-top |
Use the .card-img class irrespective of where the image is placed in the card. |
.card-divider |
Card header and blocks now have a bottom border which act as card dividers. Multiple card blocks can be used to divide the content. This helps organizing the content in cards. |
To give our users the ability to easily customize the look of the Clarity Design System, we have added over-rideable variables to the Clarity SASS source code.
We recommend that users make customizations in the
utils/_overwrite.clarity.scss
. This file was created so that users of the Clarity Design System could overwrite our default variable assignments in one location.
Overriding the default Clarity Design System variables requires you to rebuild Clarity with your own SASS build.