PSR Decks and Cards

Decks display repeating regions of content in a similar way. The individual content items within a deck are called Cards

    On this page, you'll find examples for the following deck variations available to publish on Schwab.com. 

    • Deck-Flex > Card-Icon-Clear
    • Deck-Divide > Card-Clear
    • Deck-50 > Card-Clear
    • Deck-33 > Call-Callout-Clear
    • Deck-33-Divide > Card-Callout-Clear
    • Deck > Stepped Guide-Pros/Cons
    • Deck-33 > Card-Ornament

    Deck-Flex > Card-Icon-Clear

    This deck variation is used to display icon cards. The component transforms based on the number of cards included, and can display between 2 and 6 cards. The deck also supports the display of a button.

    In the current iteration, the cards display an icon image, a title, and a description. The icon and description are optional, and the icon is a fixed size. Click HERE to download a sketch file of this component. 

    Here's an example with two cards.

    • person and file image

      Sample Card Eyebrow

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample
    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

    Deck disclosure body

    Deck-Flex > Card-Icon-Clear 4 cards

    Here's an example of the deck with 4 cards.

    • person and file image

      Sample Card Eyebrow

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample
    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • person and file image

      Sample Card Eyebrow

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample
    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

    Deck-Flex > Card-Icon-Clear 6 cards

    Here's a version with six cards.

    • person and file image

      Sample Card Eyebrow

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample
    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • person and file image

      Sample Card Eyebrow

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample
    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • person and file image

      Sample Card Eyebrow

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample
    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

    Deck-Divide > Card-Clear

    The Deck-Divide > Card-Clear places a fixed number of cards in a row, with a divider in between. There are several variations of this component that allow the author to control the number of cards shown in a row.

    Currently, this component doesn't support cards with images and is intended for text-only cards. The component can show a card title, card body, and card button.

    Deck-25-Divide > Card-Clear

    This variation handles four cards in a row. If more than four cards are included, then the cards will wrap to another row.

    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

    Disclosure Body

    Deck-33-Divide > Card-Clear

    Deck-33-Divide > Card-Clear

    This variation handles three cards in a row. If more than three cards are included, then the cards will wrap to another row.

    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

    Disclosure body

    Deck-50-Divide > Card-Icon-Clear

    Deck-50-Divide > Card-Icon-Clear

    This variation handles two cards in a row, and supports the inclusion of an icon. If more than two cards are included, then the cards will wrap to another row.

    • person and file image

      Sample Card Eyebrow

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample
    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • person and file image

      Sample Card Eyebrow

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample
    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

    Deck-50 > Card-Clear

    This variation allows for images that will take up the full-width of the card area. If more than two cards are included, then the cards will wrap to another row. 

    This variation displays the title, image, body, and button from the card content item. 

    • Sample Card 2 Eyebrow

      Sample Card 2 Title

      Compass

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 2 Eyebrow

      Sample Card 2 Title

      Compass

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

    Disclosure body.

    Deck-33 > Card-Callout-Clear

    This variation showcases "callout cards," which are intended to highlight a specific attribute or feature. These cards are center aligned, and can display an icon, title, and body as seen here. 

    If more than three cards are included, then the cards will wrap to another row. 

    Deck-33-Divide > Card-Callout-Clear

    This component is the same as the above component, except that a grey divider exists between the cards.  

    Unlike the above example, this variation only supports three cards in a row. If more are loaded, the icon won' t display for the second row, and the grey divider displays to the right of the third card on the first row.

    Deck > Stepped Guide-Pros/Cons

    The deck variation compares the pros / cons of two cards. The only fields available for editing are the titles and the body for each card. The icons are consistent across the application of this component pattern. 

    Deck-33 > Card-Ornament

    This variation showcases three cards with ornament attributes. Though you can opt to show fewer than three cards, the component doesn't transform. 

    This component display the title, body, and details field of the card content item.

    This component has space constraints, especially on mobile, because it confines content to a square. 

    • Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample

      Sample card detail text

    • Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

      Sample Card Detail text. 

    • Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

      Sample card 3 details text.

    33-Card-SteppedGuide

    Stepped Guide Body

    • Step

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample
    • Step

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Step

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Step

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample

    Deck-33-Fill > Card-Router

    Deck Body

    vista
    • Sample Card 1 Title

      Sample card detail text

    • Sample Card 2 Title

      Sample Card Detail text. 

    • Sample Card 3 (Text Only)

      Sample card 3 details text.

    Deck-50 > Card-Landscape

    Deck-50 > Card-Landscape body

    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Compass

      Sample Card 2 Eyebrow

      Sample Card 2 Title

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card 3 eyebrow

      Sample Card 3 (Text Only)

      Sample Card 3 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample
    • Sample Card Eyebrow

      Sample Card 1 Title

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample

    Deck-50 > Card-Outline-Grey

    Deck-50 > Card-Outline-Grey body.

    • Sample Card 1 Title

      Sample card detail text

    • Sample Card 2 Title

      Sample Card Detail text. 

    Deck-50 > Card-Product

    • Sample Card 1 Title

      Sample Card Eyebrow

      Sample Card 1 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet Sample

      Sample card detail text

    • Sample Card 2 Title

      Sample Card 2 Eyebrow

      Sample Card 2 body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed erat orci, placerat.

      • Bullet sample

      Sample Card Detail text. 

    Deck-33 > Card Outline

    Deck body text.

    Common questions

    Account opening and funding questions

    How do I maximize tax efficiency?

    Investment accounts can be divided into two main categories, taxable accounts (such as non-retirement accounts) and tax-advantaged accounts (such as an IRA, 401(k), 529 College Savings Plan or Health Savings Account (HSA). As a general rule, investments that tend to lose less of their return to taxes are good candidates for taxable accounts. Likewise, investments that lose more of their return to taxes may be better suited for tax-advantaged accounts. 
    For more on this, read The Importance of Tax-Efficient Investing.