GSA / GSA/sam-design-system

Sam Styles Vertical Header

Open
#962 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
27
Forks
19
Avg merge
8h 19m
Merged PRs (30d)
14

Description

**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is
Currently the Vertical Header contains @media properties that change the structure of the vertical header.

**Describe the desired solution**
We are requesting a new CSS class that does not contain this @media property so the Vertical Header does not change.

**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
N/A

**Additional context**
Add any other context or screenshots about the feature request here.
Here is the vertical header sam styles url:
https://federalist-0ad5a602-ca98-4a7e-8d6e-d9ece7bc4cf8.app.cloud.gov/site/gsa/sam-styles/components/detail/cards-demo--vertical.html

First Image is a mock-up of what we are trying to achieve.
![image](https://user-images.githubusercontent.com/26351294/165585264-0502558a-b770-44dd-80b2-ace5f73dfd0f.png)

Second is what we currently have live.
![image](https://user-images.githubusercontent.com/26351294/165585299-c8a3e858-1661-41d1-a33d-4e91b1c3883c.png)

Contributor guide

Open the contributing guide

Research direction

Start with the linked vertical-header demo and compare its responsive behavior with the mock-up and current screenshots. Locate the vertical header styles used by that demo, then verify that the requested additional CSS class preserves the vertical header structure without the existing media-query changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.