The W3CSS Card, a sub-module of the Drupal Module W3CSS Paragraphs, is a versatile and customizable tool for creating responsive, two-column cards on websites. This sub-module leverages the features of the W3.CSS framework to offer a wide range of styling options, making it an ideal choice for developers and designers looking to add visually appealing content sections to their Drupal sites. Below is a detailed description of its features:

Display Tab

The Display tab in the W3CSS Card module is where users can extensively customize the appearance of the card. It includes a variety of fields:

1. Background Colors: Users can choose from 30 different colors to set the background color of the card.
2. Background Color Hover: This option allows for 30 color choices that apply when the mouse hovers over the card.
3. Text Colors: 30 different color options are available for customizing the text color.
4. Text Color Hover: Similar to the background color hover, this field offers 30 color options for text when hovered.
5. Border Color: Users can select from 30 different colors for the card's border.
6. Border Color Hover: This provides another 30 color choices for the border color on hover.
7. Background Color Opacity: After selecting a background color, users can adjust its opacity between 5% to 95% in increments of 10%. This feature offers a total of 330 color variations, applying only to the background.
8. Width: The card's width can be adjusted, with options ranging from 30% to 100% of the container width.
9. Borders: There are 11 different border styles to choose from.
10. Round Borders: Users can select from 6 styles to round the borders of the card.
11. Margin: This field offers 6 styles for setting the margin around the card.
12. Padding: Users can choose from 8 different padding styles to adjust the space inside the card.
13. Box Shadow: Adds a bordered shadow to the card, with options for a 2px or 4px shadow.
14. W3.CSS Classes: This field allows users to apply additional W3.CSS classes for more customization.
15. Card Layout Style: There are 10 predefined styles that users can select to quickly define the card's appearance.

Content Tab

The Content tab focuses on the content aspects of the card:

1. Title: A field for entering the content title of the card.
2. Card Content Body: Equipped with a WYSIWYG editor, this area is for the main content of the card.
3. Media Field: Users can upload an image to accompany the content. Upon uploading, three fields become available:
   • Alternative Text: For accessibility and SEO purposes.
   • Title: The title of the image.
   • Image Link (optional): If the image needs to be clickable, a link can be provided.
   • Image Link Title: This is the title attribute for the image, enhancing accessibility and SEO.

The W3CSS Card sub-module is an impressive tool for content presentation, offering extensive customization options that cater to a wide range of design preferences. Its integration with the W3.CSS framework ensures that the cards are not only aesthetically pleasing but also responsive and functional across different devices and screen sizes.