Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

updated documentation for vf-container (issue 1841) #1861

Merged
merged 1 commit into from
Feb 7, 2023
Merged

updated documentation for vf-container (issue 1841) #1861

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions components/vf-card-container/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,17 @@ A multi-column container for `vf-card`.

## Usage

### Section header

- Use one card container for all cards that belong to the same section.
- Always include [a vf-section header](https://stable.visual-framework.dev/components/vf-section-header/index.html) to the card container. This ensures that your page will not have [skipped headings](https://www.w3.org/WAI/tutorials/page-structure/headings/#heading-ranks) between the cards and the preceding content outside the container.
- If you do not want the section header to be visible, you can hide it using the class `vf-u-sr-only` (for screen reader only). See the [example with the hidden header below](#examples).

### Card container background
- Use a white background for both [striped (green) cards](https://stable.visual-framework.dev/components/vf-card/#vf-card--striped) and [bordered (white) cards](https://stable.visual-framework.dev/components/vf-card/#vf-card--bordered).
- `vf-u-background-color-ui--grey--light` (which is called 'Gray lightest' in [the equivalent WP block](https://stable.visual-framework.dev/wordpress/blocks/container-block/)) may be used as an alternative background of bordered (white) cards, especially when the section header is hidden and there is no text between the section header and the cards.
- The [Meet our people page](https://www.ebi.ac.uk/about/jobs/meet-our-people) at the EMBL-EBI site includes examples of the card container that [pass the basic contrast tests for accessibility](https://wave.webaim.org/report#/https://www.ebi.ac.uk/about/jobs/meet-our-people#).

### Columns

The containier defaults to three columns (the recommended number of image-based cards per row). However if text-only cards are being used, a 4-column variant is supported `cards_per_row: 4` which appends CSS class `vf-card-container__col-4`.
Expand Down