Skip to content

fix(card): add wrapper to img #2578

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

Merged
mcoker merged 3 commits into from
Jan 20, 2020
Merged

fix(card): add wrapper to img #2578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5dc2821
fix(card): add wrapper to img
christiemolloy Jan 14, 2020
82c5848
fix(card): update name
christiemolloy Jan 20, 2020
6159bc9
fix(card): update
christiemolloy Jan 20, 2020
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
6 changes: 6 additions & 0 deletions src/patternfly/components/Card/card-head-main.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="pf-c-card__head-main{{#if card-head-main--modifier}} {{card-head-main--modifier}}{{/if}}"
{{#if card-head-main--attribute}}
{{{card-head-main--attribute}}}
{{/if}}>
{{> @partial-block}}
</div>
9 changes: 7 additions & 2 deletions src/patternfly/components/Card/examples/Card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ cssPrefix: pf-c-card
```hbs title=With-image-and-action
{{#> card card--id="card-action-example-1"}}
{{#> card-head}}
<span>img goes here</span>
{{#> card-head-main}}
<img src="/assets/images/pf_logo.svg" width="300px" alt="Logo">
{{/card-head-main}}
{{#> card-actions}}
{{#> dropdown id=(concat card--id "-dropdown-kebab-right-aligned") dropdown--IsActionMenu="true" dropdown-toggle--modifier="pf-m-plain" dropdown--HasKebabIcon="true" aria-label="Actions"}}
{{/dropdown}}
Expand Down Expand Up @@ -79,7 +81,9 @@ cssPrefix: pf-c-card
```hbs title=With-only-image-in-head
{{#> card}}
{{#> card-head}}
<span>img goes here</span>
{{#> card-head-main}}
<img src="/assets/images/pf_logo.svg" width="300px" alt="Logo">
{{/card-head-main}}
{{/card-head}}
{{#> card-header}}
Header
Expand Down Expand Up @@ -237,6 +241,7 @@ A card is a generic rectangular container that can be used to build other compon
| `.pf-c-card__footer` | `<div>` | Creates the footer of a card. |
| `.pf-c-card__head` | `<div>` | Creates the head of the card where images or actions can go. |
| `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card head. |
| `.pf-c-card__head-main` | `<div>` | Creates a wrapper element to be used in the card head when using an image, logo or text. |
| `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. |
| `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
| `.pf-m-hoverable` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
Expand Down