Component Summary

This page demonstrates the components available for the Corporate Services site. 

For Beacon decks: https://corporateservices.schwab.acsitefactory.com/node/component-summary/decks

Marquees

This section contains marquees available on the Retail Beacon theme.

button text

Eyebrow

Marquee > 50-Image

Marquee description field. This is bold. This is italic. This is an inline link. 

Details field. This is bold. This is italic. This is an inline link. 

Button 1

Eyebrow

Marquee > 50 Media Right

Marquee description field. This is bold. This is italic. This is an inline link. 

Button

Eyebrow

Marquee > Image Full

Marquee description field. This is bold. This is italic. This is an inline link. 

Marquee details field.

Button

Marquee > Full Text

Marquee description field. This is bold. This is italic. This is an inline link. 

Button

Eyebrow

Marquee > Full Text Blue Background

Marquee description field. This is bold. This is italic. This is an inline link. 

Details text.

Marquee > Fill Light Right

Marquee description field. This is bold. This is italic. This is an inline link. 

Button text

Marquee > Text Centered - Dark

Marquee description field. This is bold. This is italic. This is an inline link. 

Button text

Marquee > Text Gradient

Marquee description field. This is bold. This is italic. This is an inline link. 

Button text

Eyebrow

Marquee > 50 Media Right

Marquee description field. This is bold. This is italic. This is an inline link. 

Button text

Accordions

This section contains the Accordions available on the Beacon Retail theme.

Accordion (title can be hidden)

Test Card without an Image

Body field. This is bold. This is italic. This is an inline link.

Test Card with an Image

Body field. This is bold. This is italic. This is an inline link.

Accordion (no variant)

Body field. This is bold. This is italic. This is an inline link.

Accordion Item 1 - Title

Accordion detail field. This is bold. This is italic. This is an inline link. 

Accordion body field. This is bold. This is italic. This is an inline link. 

Accordion summary field. This is bold. This is italic. This is an inline link. 

Default Dark

Accordion-Table body field. This is bold. This is italic. This is an inline link. 

Accordion Item - Title

Accordion detail field. This is bold. This is italic. This is an inline link. 

Accordion body field. This is bold. This is italic. This is an inline link. 

Accordion summary field. This is bold. This is italic. This is an inline link. 

Accordion-Table > ETFs

Accordion body field.

Accordion Item - Title

Accordion detail field. This is bold. This is italic. This is an inline link. 

Accordion body field. This is bold. This is italic. This is an inline link. 

Accordion summary field. This is bold. This is italic. This is an inline link. 

Decks

This section contains all the decks available on the Beacon Retail theme.

Beacon Card Callout Example

• 1234

  Example for callout

• 1234

  Example for callout

• 1234

  Example for callout

• 1234

  Example for callout

Beacon Deck - Deck-Flex > Card-Icon-Clear

Deck body field. This is bold. This is italic. This is an inline link. This deck supports between 2 and 6 cards.

• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Button text

Beacon Deck - Deck-Flex > Card-Icon-Clear

This is showing 6 cards in this deck.

• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Beacon Deck - Deck-25 > Card-Callout

Deck body field. This is bold. This is italic. This is an inline link. 

• Eyebrow field

  Test Card Simple w/ Icon

  
• Eyebrow field

  Test Card Simple w/ Icon

  
• Eyebrow field

  Test Card Simple w/ Icon

  
• Eyebrow field

  Test Card Simple w/ Icon

  

Button text

Button text

Disclosure body field. 

Beacon Deck - Deck-25-Divide > Card-Clear

Deck body field. This is bold. This is italic. This is an inline link. 

• Eyebrow field

  Test Card Simple w/ Icon

  
• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• Eyebrow Field

  Test Card with an Image

  

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• Eyebrow Field

  Test Card with an Image

  

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Button text

Beacon Deck - Deck-33 > Card-Default

Deck body field. This is bold. This is italic. This is an inline link. 

• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

Button link

Button link

Beacon Deck - 33-Card-SteppedGuide

Deck body field. This is bold. This is italic. This is an inline link. 

• Step

  Test Card Simple w/ Icon

• Step

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

  Link 1 Link 2 Link 3

  Button 1 Button 2 Button 3
• Step

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Link 1 Link 2 Link 3

  Button 1 Button 2 Button 3

Button text

Beacon Deck - Deck-33 > Card-Callout-Icon-Clear

Deck body field. This is bold. This is italic. This is an inline link. 

• 
  Eyebrow field

  Test Card Simple w/ Icon
• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Button text

Beacon Deck - Deck-33-Divide > Card-Callout-Icon-Clear

Deck body field. This is bold. This is italic. This is an inline link. 

• 
  Eyebrow field

  Test Card Simple w/ Icon
• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• 
  Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Button text

Beacon Deck - Deck-33-Divide > Card-Clear

Deck body field. This is bold. This is italic. This is an inline link. 

• Eyebrow field

  Test Card Simple w/ Icon

  
• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• Eyebrow Field

  Test Card with an Image

  

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Button text

Beacon Deck - Deck-33 > Card-Ornament

Deck body field. This is bold. This is italic. This is an inline link. 

• Test Card Simple w/ Icon

• Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

• Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

Button text

Beacon Deck - Deck-33-Fill > Card-Router

Deck body field. This is bold. This is italic. This is an inline link. 

• Test Card Simple w/ Icon

• Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

  Detail field.

• Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

  Detail field. 

Button text

Beacon Deck - Deck-50 > Card-Clear

Deck body field. This is bold. This is italic. This is an inline link. 

• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Button text

Beacon Deck - Deck-50-Divide > Card-Icon-Clear

Deck body field. This is bold. This is italic. This is an inline link. 

• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Button text

Beacon Deck - 50-Card-Landscape

Deck body field. This is bold. This is italic. This is an inline link. 

• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3
• Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Button text

Beacon Deck - Deck-50 > Card-Outline-Grey

Deck body field. This is bold. This is italic. This is an inline link. 

• Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

  Detail field.

• Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

  Detail field. 

Button text

Beacon Deck - Deck-50 > Card-Product

Deck body field. This is bold. This is italic. This is an inline link. 

• Test Card without an Image

  Eyebrow Field

  Body field. This is bold. This is italic. This is an inline link.

  Button 1 Button 2 Button 3
  Link 1 Link 2 Link 3

  Detail field.

• Test Card with an Image

  Eyebrow Field

  Body field. This is bold. This is italic. This is an inline link.

  Button 1 Button 2 Button 3
  Link 1 Link 2 Link 3

  Detail field. 

Button text

Beacon Deck - Stepped-Guide-Pros/Cons

Deck body field. This is bold. This is italic. This is an inline link. 

• Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

• Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

  Button 1 Button 2 Button 3

  Link 1 Link 2 Link 3

Button text

Beacon Deck - Deck-33 > Card Outline

Deck body field. This is bold. This is italic. This is an inline link. 

• Eyebrow field

  Test Card Simple w/ Icon

  
• Eyebrow Field

  Test Card without an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field.

• Eyebrow Field

  Test Card with an Image

  Body field. This is bold. This is italic. This is an inline link.

  Detail field. 

Button text

Tile Decks

This section contains all the tile decks available on the Beacon Retail theme.

Panels

This section contains all the panels available on the Beacon Retail theme.

Panel - Panel-66-Long

H3 style in the editor

Panel body field. This is bold. This is italic. This is an inline link. 

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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Button 1 Button 2 Button 3

Panel Eyebrow

Panel - Panel-50-Media-Left | Beacon

Panel body field. This is bold. This is italic. This is an inline link. 

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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Details field. This is bold. This is italic. This is an inline link. 

Panel Eyebrow

Panel - Panel-50-Media-Right | Beacon

Panel body field. This is bold. This is italic. This is an inline link. 

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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Details field. This is bold. This is italic. This is an inline link. 

Panel - Recognition

Panel-Text

Panel body field. This is bold. This is italic. This is an inline link. 

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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Details field. This is bold. This is italic. This is an inline link. 

Button 1 Button 2 Button 3

Panel - XWide-Fill-Left | Retail

Panel body field. This is bold. This is italic. This is an inline link. 

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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Button 1 Button 2 Button 3

Panel - Xwide-Overlap-Right | Retail

Panel body field. This is bold. This is italic. This is an inline link. 

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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Button 1 Button 2 Button 3

Panel - Xwide-Overlap-Left | Retail

Panel body field. This is bold. This is italic. This is an inline link. 

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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Button 1 Button 2 Button 3

Panel Eyebrow

Panel - 42-58-Image | Retail

Panel body field. This is bold. This is italic. This is an inline link. 

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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Details field. This is bold. This is italic. This is an inline link. 

Button 1 Button 2 Button 3

CTA Panels

This section contains all the CTA panels available on the Beacon Retail theme.

Test Contact Card

Button

512-555-5555

Basic Ornament | Beacon

Test Contact Card

Button

512-555-5555

CTA-Panel-Contact | Retail

• 

  Test Contact Card

  512-555-5555

  Body field.

  Button
• 

  Test Contact Card

  512-555-5555

  Body field.

  Button
• 

  Test Contact Card

  512-555-5555

  Body field.

  Button

Centered | Beacon

• Test Contact Card

  Body field.

  Button
  512-555-5555

  Detail field.

Centered | Beacon - 2 items

• Test Contact Card

  Body field.

  Button
  512-555-5555

  Detail field.

• Test Contact Card

  Body field.

  Button
  512-555-5555

  Detail field.

Centered | Beacon - 3 items

• Test Contact Card

  Body field.

  Button
  512-555-5555

  Detail field.

• Test Contact Card

  Body field.

  Button
  512-555-5555

  Detail field.

• Test Contact Card

  Body field.

  Button
  512-555-5555

  Detail field.

50 Image | Retail

• Button
  Eyebrow field
  512-555-5555

Eyebrow field

Test Contact Card

Body field.

• Button
  512-555-5555

50 Default Light Dark Blue | Beacon

• Button
  Eyebrow field
  512-555-5555
• Button
  Eyebrow field
  512-555-5555

50 Image CTA Default | Beacon

Button

Eyebrow field

512-555-5555

50 Default | Beacon

• Button
  Eyebrow field
  512-555-5555
• Button
  Eyebrow field
  512-555-5555

50 Centered Light Light Grey | Beacon

• Button
  Eyebrow field
  512-555-5555
• Button
  Eyebrow field
  512-555-5555

33 Default Light Dark Grey Light | Beacon

• Button
  Eyebrow field
  512-555-5555
• Button
  Eyebrow field
  512-555-5555
• Button
  Eyebrow field
  512-555-5555

Default Light Gray | Beacon

Button

Eyebrow field

512-555-5555

Default Dark Blue | Beacon

Button

Eyebrow field

512-555-5555

Default Dark Gray | Beacon

Button

Eyebrow field

512-555-5555

Centered Light Gray | Beacon

Button

Eyebrow field

512-555-5555

Centered Dark Blue | Beacon

Button

Eyebrow field

512-555-5555

Centered Dark Blue | Beacon

Button

Eyebrow field

512-555-5555

Centered Dark Gray | Beacon

Button

Eyebrow field

512-555-5555

50 CTA Default Image | Beacon

• Button
  Eyebrow field
  512-555-5555

50 CTA Centered Image | Beacon

• Button
  Eyebrow field
  512-555-5555

50 Image CTA Centered | Beacon

• Button
  Eyebrow field
  512-555-5555

Testing with 1 card.

• Test Contact Card

  512-555-5555

  Body field.

  Button