SASS Buttons Homework

Use only semantic tags (<button>, <a>) with OCS classes. Remove all inline style attributes and custom classes. Keep %%html and the UI_RUNNER comment.

Popcorn Hacks

1. Add the base class ocs__btn to the resource link
2. Add pill and fill to “Complete Daily Check-In” and wrap both buttons in ocs__links
3. Change the check-in tone to alert-green, upgrade the container to ocs__links--wide, and add fill to Crisis Support

Homework Hack 1: Adaptive Resource Toolbar

Wrap all three actions in ocs__links:

• Urgent Support: ocs__btn alert-red fill pill
• Self-Care: ocs__btn alert-green fill pill
• Community: ocs__btn accent outline pill

Homework Hack 2: Primary vs. Secondary Action Priority

Wrap all three actions in ocs__links:

• Log Mood Entry: ocs__btn accent fill
• View Weekly Trends: ocs__btn outline
• Crisis Hotline: ocs__btn alert-red outline

Grading (1 point)

• Popcorn Hacks 1-3: 0.30
• Homework Hack 1: 0.35
• Homework Hack 2: 0.35

Mental Health Resource Directory

Save Draft Journal

Get Crisis Support

Urgent Support Self-Care Community

View Weekly Trends Crisis Hotline