Close

Card header with tabs

This is an example of a card header with tabs, designed using HTML, CSS, and Bootstrap framework 4. The card consists of three tabs. The body of the form is given the styles of font-family as "sans-serif", font-size as .88rem, font-weight as 400, line-height as 1.5, color as #495057, text-align as left, and background-color as #E91E63. The card is given the styles of box-shadow as 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03), and transition as all .2s. The card title has the styles of text-transform as uppercase to automatically convert the text to uppercase, color as rgba(13, 27, 62, 0.7), font-weight as bold, and font-size as .88rem. The card footer is given the styles of padding as .75rem 1.25rem, background-color as #fff, and border-top as 1px solid rgba(26, 54, 126, 0.125). The three tabs are given a font size as 0.8rem, and they take box-shadow effect of 0 0 0 0 rgba(82, 88, 93, 0.5), in a hover event. Source: https://bbbootstrap.com/snippets/card-header-tabs-24201356

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.