THUB-19: basic card styling

[jenbreese]

READY FOR REVIEW

Summary

• Changed the styles for a basic card.

Review By (Date)

• 6/30

Criticality

• Normal

Urgency

• Normal

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Create a new page.
3. Add some cards.
4. Verify they look like the design.
5. Designs linked in the ticket.
6. Can you look at the images to make sure they aren't distorted by the resizing in css?

Site Configuration Sync

• Is there a config:export in this PR that changes the config sync directory?

Front End Validation

• Design is approved by @ user?
• HTML validation: Is the markup using the appropriate semantic tags and passes validation? Or, QA request ticket created?
• Cross-browser testing: Has been performed? Or, QA request ticket created?
• Automated accessibility: Scans performed? Or, QA request ticket created?
• Manual accessibility: Manually tested? Or, QA request ticket created?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

- THUB-19

Resources

• AMP Tool
• Accessibility Manual Test Script
• HTML Validator
• Browserstack and link to Browserstack Credentials

[rebeccahongsf]

@jenbreese everything looks great! It looks like all we're missing is the spacing for the <p> tags. We could add a margin-bottom to the heading and add a margin-bottom to the last <p> tag 😄 Let me know what you think!

[jenbreese]

@rebeccahongsf I added margins to the <p> because headings can be optional. Thank you for catching this!

[rebeccahongsf]

Thanks @jenbreese! This looks good to me 🎉

Feel free to merge it in when you're ready since I pre-approved 😄