Skip to main content

Search Card

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/search-card"></script>

NPM#

npm i @pearson-ux/search-card --save

Demo#

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

  • first option
  • second option
  • third option
    • Content Here

    <pearson-search-card checkboxlabel="label" titleone="Title" contentone="Content" titletwo="Title" contenttwo="Content">    <div slot="cardcontent">        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>    </div>    <search-card-options slot="dropdown">        <li id="optionOne">first option</li>        <li id="optionTwo" className="divider">second option</li>        <li id="optionThree">third option</li>    </search-card-options>    <div slot="results">      Content Here    </div></pearson-search-card>

    Structure#

    Follow these steps to successfully build out a search card component. Start by adding a <pearson-search-card> element. 

    <pearson-search-card></pearson-search-card>

    Important note: To customize the top row with optional text and checkboxes, see the API section.

    Next, you can add content to your card by adding a child element with an attribute slot and value cardcontent

    <pearson-search-card>    <div slot="cardcontent">        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>    </div></pearson-search-card>

    Optionally, you can add a dropdown menu to your card.

    Add a <search-card-options> element as a child of the <pearson-search-card>. Be sure to include the attribute of slot with a value of dropdown.

    Inside the <search-card-options> element add an <li> for each menu item you would like added to the dropdown.

    <pearson-search-card>    <div slot="cardcontent">        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>    </div>    <search-card-options slot="dropdown">        <li>first option</li>        <li>second option</li>        <li>third option</li>    </search-card-options></pearson-search-card>

    Finally, you'll want to add content for the expanding accordion menu. Simply add an element of your choosing with an attribute of slot and value of results. 

    <pearson-search-card>    <div slot="cardcontent">        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>    </div>    <search-card-options slot="dropdown">        <li>first option</li>        <li>second option</li>        <li>third option</li>    </search-card-options>    <div slot="results">      // content goes here    </div></pearson-search-card>

    API#

    Optional#

    All attributes in this API are optional.

    AttributeTypeDefaultDescription
    checkboxstringtrueAdds a checkbox to the card
    checkboxlabelstringAdd a checkbox labelAdds a checkbox label associated with the checkbox
    checkedboolunsetAdds a value of checked to the checkox
    titleonestringunsetAdds a title value to the card
    contentonestringunsetAdds content associated with titleone
    titletwostringunsetAdds an additional title value to the card
    contenttwostringunsetAdds content associated with titletwo

    Events#

    This component emits no events

    HTML Markup#

    Do you prefer to use HTML instead of a web component? No problem, use the markup below along with CSS.

    <div class="catalog card-container">    <div class="card">        <div class="info">            <div class="gr-form-element">                <div class="gr-checkbox">                    <input type="checkbox" id="idOne" value="This is a checkbox label">                    <label for="idOne">This is a optional checkbox</label>                    <span>                        <svg focusable="false" class="icon-24" aria-hidden="true">                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#multi-correct-24"></use>                        </svg>                    </span>                </div>            </div>            <div class="attribute-container">                <span class="gr-meta">Label</span>                <span>Content</span>            </div>            <div class="attribute-container">                <span class="gr-meta">Label</span>                <span>Content</span>            </div>            <div class="actions">                <div class="gr-dropdown-container">                    <button data-action="trigger" aria-haspopup="true" aria-expanded="true" class="gr-btn icon-btn-24">                        <svg focusable="false" class="icon-18" aria-hidden="true">                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#more-18"></use>                        </svg>                    </button>                    <div class="dropdown-menu" data-action="menu" style="display:none" multiselect="">                        <ul role="menu" class="menu ">                            <li role="none">                                <button role="menuitemradio" data-index="0">                                    <svg id="correct-18" viewBox="0 0 18 18" style="width:18px; height:18px;">                                        <path d="M7.63703177,13.7249483 C7.2712246,14.0916839 6.67813399,14.0916839 6.31232681,13.7249483 C6.31087256,13.7235264 5.29821541,12.7082993 3.27435538,10.679267 C2.90854821,10.3125314 2.90854821,9.71793566 3.27435538,9.35120012 C3.64016255,8.98446458 4.23325316,8.98446458 4.59906034,9.35120012 L6.9290522,11.6871052 L13.3583348,4.3207061 C13.6989986,3.93038793 14.2907756,3.89083601 14.6801057,4.2323644 C15.0694358,4.57389279 15.1088876,5.16717165 14.7682238,5.55748981 L7.68563681,13.6724173 C7.67022431,13.6903888 7.65402263,13.7079144 7.63703177,13.7249483 Z"></path>                                    </svg>                                    <span class="option-text">option one</span>                                </button>                            </li>                            <li role="none">                                <button role="menuitemradio" data-index="1">                                    <svg id="correct-18" viewBox="0 0 18 18" style="width:18px; height:18px;">                                        <path d="M7.63703177,13.7249483 C7.2712246,14.0916839 6.67813399,14.0916839 6.31232681,13.7249483 C6.31087256,13.7235264 5.29821541,12.7082993 3.27435538,10.679267 C2.90854821,10.3125314 2.90854821,9.71793566 3.27435538,9.35120012 C3.64016255,8.98446458 4.23325316,8.98446458 4.59906034,9.35120012 L6.9290522,11.6871052 L13.3583348,4.3207061 C13.6989986,3.93038793 14.2907756,3.89083601 14.6801057,4.2323644 C15.0694358,4.57389279 15.1088876,5.16717165 14.7682238,5.55748981 L7.68563681,13.6724173 C7.67022431,13.6903888 7.65402263,13.7079144 7.63703177,13.7249483 Z"></path>                                    </svg>                                    <span class="option-text">option two</span>                                </button>                            </li>                            <li role="none">                                <button role="menuitemradio" data-index="2">                                    <svg id="correct-18" viewBox="0 0 18 18" style="width:18px; height:18px;">                                        <path d="M7.63703177,13.7249483 C7.2712246,14.0916839 6.67813399,14.0916839 6.31232681,13.7249483 C6.31087256,13.7235264 5.29821541,12.7082993 3.27435538,10.679267 C2.90854821,10.3125314 2.90854821,9.71793566 3.27435538,9.35120012 C3.64016255,8.98446458 4.23325316,8.98446458 4.59906034,9.35120012 L6.9290522,11.6871052 L13.3583348,4.3207061 C13.6989986,3.93038793 14.2907756,3.89083601 14.6801057,4.2323644 C15.0694358,4.57389279 15.1088876,5.16717165 14.7682238,5.55748981 L7.68563681,13.6724173 C7.67022431,13.6903888 7.65402263,13.7079144 7.63703177,13.7249483 Z"></path>                                    </svg>                                    <span class="option-text">option three</span>                                </button>                            </li>                        </ul>                    </div>                </div>                <button id="expandResults" class="gr-btn icon-btn-24">                    <svg id="svgExpand" focusable="false" class="icon-24" aria-hidden="true">                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-24"></use>                    </svg>                    <svg id="svgCollapse" focusable="false" class="icon-24 hidden" aria-hidden="true">                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#collapse-24"></use>                    </svg>                </button>            </div>        </div>        <div class="content">            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>        </div>    </div>    <div id="resultCard" class="card results animate hidden">        result card    </div></div>