@patternfly/patternfly

--- id: Card section: components cssPrefix: pf-v5-c-card ---import './Card.css' ## Examples ### Basic ```html <div class="pf-v5-c-card" id="card-basic-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### With image and action ```html <div class="pf-v5-c-card" id="card-action-example-1"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__header-main"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 706.3 132.5" fill="currentColor" width="300px" > <g> <path d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6 c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9 c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1 c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1 c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z" /> <path d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2 c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z" /> <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" /> <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" /> <path d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z" /> <path d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5 c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483 l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5 c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2 H478.9z" /> <path d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3 c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4 c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z" /> <path d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z" /> <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" /> <path d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z" /> </g> <g> <path d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7 l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7 l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101 L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2 l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5 L101.1,70z" /> </g> </svg> </div> <div class="pf-v5-c-card__actions"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="card-action-example-1-dropdown-kebab-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="card-action-example-1-dropdown-kebab-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" aria-label="Standalone check" id="card-action-example-1-check" name="card-action-example-1-check" aria-labelledby="card-action-example-1" /> </div> </div> </div> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text" id="card-action-example-1-check-label" >Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### With title in head ```html <div class="pf-v5-c-card" id="card-action-example-2"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="card-action-example-2-dropdown-kebab-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="card-action-example-2-dropdown-kebab-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" aria-label="Standalone check" id="card-action-example-2-check" name="card-action-example-2-check" aria-labelledby="card-action-example-2" /> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text" id="card-action-example-2-check-label" >This is a really really really really really really really really really really long title</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### With only actions in head (no title/footer) ```html <div class="pf-v5-c-card" id="card-action-example-3"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="card-action-example-3-dropdown-kebab-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="card-action-example-3-dropdown-kebab-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" aria-label="Standalone check" id="card-action-example-3-check" name="card-action-example-3-check" aria-labelledby="card-action-example-3" /> </div> </div> </div> <div class="pf-v5-c-card__body" id="card-action-example-3-check-label" >This is the card body. There are only actions in the card head.</div> </div> ``` ### Actions with no offset ```html <div class="pf-v5-c-card" id="card-action-no-offset"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <button class="pf-v5-c-button pf-m-primary" type="button">Action</button> </div> <div class="pf-v5-c-card__header-main"> <h1 class="pf-v5-c-title pf-m-2xl" id="card-action-no-offset-check-label" >This is a card title</h1> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### With only image in head ```html <div class="pf-v5-c-card" id="card-image-head-example"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__header-main"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 706.3 132.5" fill="currentColor" width="300px" > <g> <path d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6 c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9 c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1 c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1 c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z" /> <path d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2 c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z" /> <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" /> <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" /> <path d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z" /> <path d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5 c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483 l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5 c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2 H478.9z" /> <path d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3 c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4 c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z" /> <path d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z" /> <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" /> <path d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z" /> </g> <g> <path d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7 l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7 l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101 L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2 l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5 L101.1,70z" /> </g> </svg> </div> </div> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### With no footer ```html <div class="pf-v5-c-card" id="card-no-footer-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">This card has no footer</div> </div> ``` ### With no title ```html <div class="pf-v5-c-card" id="card-no-title-example"> <div class="pf-v5-c-card__body">This card has no title</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### With only a content section ```html <div class="pf-v5-c-card" id="card-body-example"> <div class="pf-v5-c-card__body">Body</div> </div> ``` ### With multiple body sections ```html <div class="pf-v5-c-card" id="card-multiple-body-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### With only one body that fills ```html <div class="pf-v5-c-card" id="card-body-fill-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body pf-m-no-fill">Body pf-m-no-fill</div> <div class="pf-v5-c-card__body pf-m-no-fill">Body pf-m-no-fill</div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Compact ```html <div class="pf-v5-c-card pf-m-compact" id="card-compact-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Large ```html <div class="pf-v5-c-card pf-m-display-lg" id="card-display-lg-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Selectable ```html <div class="pf-v5-l-gallery pf-m-gutter"> <div class="pf-v5-c-card pf-m-selectable" id="card-selectable-example"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-check"> <input class="pf-v5-c-check__input" type="checkbox" id="card-selectable-example-check" name="card-selectable-example-check" aria-labelledby="card-selectable-example" /> <label class="pf-v5-c-check__label" for="card-selectable-example-check" id="card-selectable-example-check-label" name="card-selectable-example-check" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> <div class="pf-v5-c-card pf-m-selectable pf-m-disabled" id="card-selectable-example-disabled" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-check"> <input class="pf-v5-c-check__input" type="checkbox" disabled id="card-selectable-example-disabled-check" name="card-selectable-example-disabled-check" aria-labelledby="card-selectable-example-disabled" /> <label class="pf-v5-c-check__label pf-m-disabled" for="card-selectable-example-disabled-check" id="card-selectable-example-disabled-check-label" name="card-selectable-example-disabled-check" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-selectable-example-disabled-title" > <h2 class="pf-v5-c-card__title-text">Disabled card</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> <div class="pf-v5-c-card pf-m-selectable pf-m-selected pf-m-disabled" id="card-selectable-example-selected-disabled" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-check"> <input class="pf-v5-c-check__input" type="checkbox" checked disabled id="card-selectable-example-selected-disabled-check" name="card-selectable-example-selected-disabled-check" aria-labelledby="card-selectable-example-selected-disabled" /> <label class="pf-v5-c-check__label pf-m-disabled" for="card-selectable-example-selected-disabled-check" id="card-selectable-example-selected-disabled-check-label" name="card-selectable-example-selected-disabled-check" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-selectable-example-selected-disabled-title" > <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> </div> ``` ### Single selectable ```html <div class="pf-v5-l-gallery pf-m-gutter"> <div class="pf-v5-c-card pf-m-selectable" id="card-single-selectable-example"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-radio"> <input class="pf-v5-c-radio__input" type="radio" id="card-single-selectable-example-radio" name="card-single-selectable-example-radio" aria-labelledby="card-single-selectable-example" /> <label class="pf-v5-c-radio__label" for="card-single-selectable-example-radio" id="card-single-selectable-example-radio-label" name="card-single-selectable-example-radio" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-single-selectable-example-title" > <h2 class="pf-v5-c-card__title-text">Title</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> <div class="pf-v5-c-card pf-m-selectable pf-m-disabled" id="card-single-selectable-example-disabled" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-radio"> <input class="pf-v5-c-radio__input" type="radio" id="card-single-selectable-example-disabled-radio" name="card-single-selectable-example-disabled-radio" aria-labelledby="card-single-selectable-example-disabled" disabled /> <label class="pf-v5-c-radio__label pf-m-disabled" for="card-single-selectable-example-disabled-radio" id="card-single-selectable-example-disabled-radio-label" name="card-single-selectable-example-disabled-radio" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-single-selectable-example-disabled-title" > <h2 class="pf-v5-c-card__title-text">Disabled card</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> <div class="pf-v5-c-card pf-m-selectable pf-m-selected pf-m-disabled" id="card-single-selectable-example-selected-disabled" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-radio"> <input class="pf-v5-c-radio__input" type="radio" id="card-single-selectable-example-selected-disabled-radio" name="card-single-selectable-example-selected-disabled-radio" aria-labelledby="card-single-selectable-example-selected-disabled" disabled checked /> <label class="pf-v5-c-radio__label pf-m-disabled" for="card-single-selectable-example-selected-disabled-radio" id="card-single-selectable-example-selected-disabled-radio-label" name="card-single-selectable-example-selected-disabled-radio" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-single-selectable-example-selected-disabled-title" > <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> </div> ``` ### Clickable ```html <div class="pf-v5-l-gallery pf-m-gutter"> <div class="pf-v5-c-card pf-m-clickable" id="card-clickable-example"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-radio pf-m-standalone"> <input class="pf-v5-c-radio__input pf-v5-screen-reader" type="radio" id="card-clickable-example-sr-only-radio" name="card-clickable-example-sr-only-radio" aria-labelledby="card-clickable-example" /> <label class="pf-v5-c-radio__label" for="card-clickable-example-sr-only-radio" id="card-clickable-example-sr-only-radio-label" name="card-clickable-example-sr-only-radio" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-clickable-example-title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> <div class="pf-v5-c-card pf-m-clickable pf-m-disabled" id="card-clickable-example-disabled" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-radio pf-m-standalone"> <input class="pf-v5-c-radio__input pf-v5-screen-reader" type="radio" id="card-clickable-example-disabled-sr-only-radio" name="card-clickable-example-disabled-sr-only-radio" aria-labelledby="card-clickable-example-disabled" disabled /> <label class="pf-v5-c-radio__label pf-m-disabled" for="card-clickable-example-disabled-sr-only-radio" id="card-clickable-example-disabled-sr-only-radio-label" name="card-clickable-example-disabled-sr-only-radio" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-clickable-example-disabled-title" > <h2 class="pf-v5-c-card__title-text">Disabled card</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> <div class="pf-v5-c-card pf-m-clickable pf-m-selected pf-m-disabled" id="card-clickable-example-selected-disabled" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-radio pf-m-standalone"> <input class="pf-v5-c-radio__input pf-v5-screen-reader" type="radio" id="card-clickable-example-selected-disabled-sr-only-radio" name="card-clickable-example-selected-disabled-sr-only-radio" aria-labelledby="card-clickable-example-selected-disabled" disabled /> <label class="pf-v5-c-radio__label pf-m-disabled" for="card-clickable-example-selected-disabled-sr-only-radio" id="card-clickable-example-selected-disabled-sr-only-radio-label" name="card-clickable-example-selected-disabled-sr-only-radio" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-clickable-example-selected-disabled-title" > <h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> </div> ``` ### Clickable and selectable ```html <div class="pf-v5-l-gallery pf-m-gutter"> <div class="pf-v5-c-card pf-m-clickable pf-m-selectable" id="card-clickable-selectable-example" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-check"> <input class="pf-v5-c-check__input" type="checkbox" id="card-clickable-selectable-example-check" name="card-clickable-selectable-example-check" aria-labelledby="card-clickable-selectable-example" /> <label class="pf-v5-c-check__label" for="card-clickable-selectable-example-check" id="card-clickable-selectable-example-check-label" name="card-clickable-selectable-example-check" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-clickable-selectable-example-title" > <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button" >Title</button> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> <div class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-current" id="card-clickable-selectable-current-example" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-check"> <input class="pf-v5-c-check__input" type="checkbox" id="card-clickable-selectable-current-example-check" name="card-clickable-selectable-current-example-check" aria-labelledby="card-clickable-selectable-current-example" /> <label class="pf-v5-c-check__label" for="card-clickable-selectable-current-example-check" id="card-clickable-selectable-current-example-check-label" name="card-clickable-selectable-current-example-check" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-clickable-selectable-current-example-title" > <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button" >Current card (clicked)</button> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> <div class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-disabled" id="card-clickable-selectable-example-disabled" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-check"> <input class="pf-v5-c-check__input" type="checkbox" disabled id="card-clickable-selectable-example-disabled-check" name="card-clickable-selectable-example-disabled-check" aria-labelledby="card-clickable-selectable-example-disabled" /> <label class="pf-v5-c-check__label pf-m-disabled" for="card-clickable-selectable-example-disabled-check" id="card-clickable-selectable-example-disabled-check-label" name="card-clickable-selectable-example-disabled-check" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-clickable-selectable-example-disabled-title" > <button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled" type="button" disabled >Disabled card</button> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> <div class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled" id="card-clickable-selectable-example-selected-disabled" > <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions pf-m-no-offset"> <div class="pf-v5-c-card__selectable-actions"> <div class="pf-v5-c-check"> <input class="pf-v5-c-check__input" type="checkbox" checked disabled id="card-clickable-selectable-example-selected-disabled-check" name="card-clickable-selectable-example-selected-disabled-check" aria-labelledby="card-clickable-selectable-example-selected-disabled" /> <label class="pf-v5-c-check__label pf-m-disabled" for="card-clickable-selectable-example-selected-disabled-check" id="card-clickable-selectable-example-selected-disabled-check-label" name="card-clickable-selectable-example-selected-disabled-check" ></label> </div> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title" id="card-clickable-selectable-example-selected-disabled-title" > <button class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled" type="button" disabled >Selected but disabled card</button> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> </div> ``` ### Hoverable raised ```html isDeprecated <div class="pf-v5-c-card pf-m-hoverable-raised" id="card-hoverable-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Selectable raised ```html isDeprecated <div class="pf-v5-c-card pf-m-selectable-raised" tabindex="0" id="card-selectable-raised-example" > <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Selected raised ```html isDeprecated <div class="pf-v5-c-card pf-m-selectable-raised pf-m-selected-raised" tabindex="0" id="card-selected-raised-example" > <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Selectable raised with a hidden input for improved screen reader accessibility ```html isDeprecated <input class="pf-v5-c-card__sr-input pf-v5-screen-reader" type="checkbox" tabindex="-1" aria-label="Checkbox to improve screen reader accessibility of a selectable card" /> <div class="pf-v5-c-card pf-m-selectable-raised" tabindex="0" id="card-selectable-raised-with-input-example" > <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Non selectable raised ```html isDeprecated <div class="pf-v5-c-card pf-m-non-selectable-raised" id="card-non-selectable-raised-example" > <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Flat ```html <div class="pf-v5-c-card pf-m-flat" id="card-flat-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Rounded ```html <div class="pf-v5-c-card pf-m-rounded" id="card-rounded-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Plain ```html <div class="pf-v5-c-card pf-m-plain" id="card-plain-example"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text">Title</h2> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Expandable ```html <div class="pf-v5-c-card" id="card-expandable-example"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__header-toggle"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Details" id="card-expandable-example-toggle" aria-labelledby="card-expandable-example-title card-expandable-example-toggle" > <span class="pf-v5-c-card__header-toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </div> <div class="pf-v5-c-card__actions"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="card-expandable-example-dropdown-kebab-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="card-expandable-example-dropdown-kebab-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" aria-label="Standalone check" id="card-expandable-example-check" name="card-expandable-example-check" aria-labelledby="card-expandable-example" /> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text" id="card-expandable-example-title" >Title</h2> </div> </div> </div> </div> ``` ### Expandable with image ```html <div class="pf-v5-c-card" id="card-expandable-image-example"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__header-toggle"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Details" id="card-expandable-image-example-toggle" aria-labelledby="card-expandable-image-example-title card-expandable-image-example-toggle" > <span class="pf-v5-c-card__header-toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </div> <div class="pf-v5-c-card__header-main"> <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" width="27px" /> </div> <div class="pf-v5-c-card__actions"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="card-expandable-image-example-dropdown-kebab-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="card-expandable-image-example-dropdown-kebab-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" aria-label="Standalone check" id="card-expandable-image-example-check" name="card-expandable-image-example-check" aria-labelledby="card-expandable-image-example" /> </div> </div> </div> </div> ``` ### Expanded ```html <div class="pf-v5-c-card pf-m-expanded" id="card-expanded-example"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__header-toggle"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Details" id="card-expanded-example-toggle" aria-labelledby="card-expanded-example-title card-expanded-example-toggle" > <span class="pf-v5-c-card__header-toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> </div> <div class="pf-v5-c-card__actions"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="card-expanded-example-dropdown-kebab-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="card-expanded-example-dropdown-kebab-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" aria-label="Standalone check" id="card-expanded-example-check" name="card-expanded-example-check" aria-labelledby="card-expanded-example" /> </div> </div> <div class="pf-v5-c-card__header-main"> <h2 class="pf-v5-c-card__title-text" id="card-expanded-example-title" >Title</h2> </div> </div> <div class="pf-v5-c-card__expandable-content"> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> </div> ``` ### Full height card ```html <div class="pf-v5-c-card pf-m-full-height" id="card-full-height-example"> <div class="pf-v5-c-card__header"> <div class="pf-v5-c-card__actions"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="card-full-height-example-dropdown-kebab-button" aria-expanded="false" type="button" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu pf-m-align-right" aria-labelledby="card-full-height-example-dropdown-kebab-button" hidden role="menu" > <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" >Action</button> </li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item pf-m-disabled" role="menuitem" href="#" aria-disabled="true" tabindex="-1" >Disabled link</a> </li> <li role="none"> <button class="pf-v5-c-dropdown__menu-item" role="menuitem" type="button" disabled >Disabled action</button> </li> <li class="pf-v5-c-divider" role="separator"></li> <li role="none"> <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#" >Separated link</a> </li> </ul> </div> <div class="pf-v5-c-check pf-m-standalone"> <input class="pf-v5-c-check__input" type="checkbox" aria-label="Standalone check" id="card-full-height-example-check" name="card-full-height-example-check" aria-labelledby="card-full-height-example" /> </div> </div> <div class="pf-v5-c-card__header-main"> <div class="pf-v5-c-card__title"> <h2 class="pf-v5-c-card__title-text" id="card-full-height-example-title"" >Title</h2> </div> </div> </div> <div class="pf-v5-c-card__body">Body</div> <div class="pf-v5-c-card__footer">Footer</div> </div> ``` ### Expandable toggle on right ```html <div class="pf-v5-c-card" id="card-toggle-on-right-example"> <div class="pf-v5-c-card__header pf-m-toggle-right"> <div class="pf-v5-c-card__actions"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-dropdown__toggle pf-m-plain" id="card-toggle-on-right-example-dropdown-kebab-button"