Heroes

Best Practice

• The large text should be succinct.
• The smaller text can be longer, but try to keep it brief. Lengthy text will defeat the purpose of a Hero.
• Don’t use more than the number of buttons provided.
• Do not use a random or decorative image.
• Be sure to change the heading level as appropriate.

Usage

Single Pane Hero

See the Pen Hero Single Pane by LA Gov Design Team (@lagovdesignteam) on CodePen.

Double Pane Hero

See the Pen Hero Dual Pane by LA Gov Design Team (@lagovdesignteam) on CodePen.

Boxed-in Photo Hero

See the Pen Hero Boxed In Photo by LA Gov Design Team (@lagovdesignteam) on CodePen.

Text Over Colored Photo Hero

See the Pen Color Toned Photo by LA Gov Design Team (@lagovdesignteam) on CodePen.

Floating Text Box Hero

See the Pen Textbox Over Color-Toned Photo by LA Gov Design Team (@lagovdesignteam) on CodePen.