Panels
Panels are useful for calling out content. They are also used to visually define pages or sections in a category.
Real-world examples
A not-so-comprehensive list of the panel component in use on crocs.com. Links will open in a new browser window.
Basic Panel
Here's a basic panel example with the header using an h3 heading tag. Heading tags define a hierarchal
structure for the page, from heading level 1 (h1) down to heading level 6 (h6). Also, users of screen readers can navigate the page by heading level.
Panel Heading
Panel Heading
Lorem ipsum dolor sit amet, vivendo voluptua no pri, at iuvaret qualisque eloquentiam eum, eu utinam utroque nam. Ex autem saperet pro. Volutpat urbanitas omittantur ea pro, quo an aliquip docendi periculis! Qui detracto contentiones ex, no mutat equidem atomorum sea.
Panel with columns and centered button
Here's a panel example with content in columns and a centered button at the bottom. The heading is also set up as a link.
Lorem ipsum dolor sit amet, vivendo voluptua no pri, at iuvaret qualisque eloquentiam eum, eu utinam utroque nam. Ex autem saperet pro. Volutpat urbanitas omittantur ea pro, quo an aliquip docendi periculis! Qui detracto contentiones ex, no mutat equidem atomorum sea.
Pri ne velit doming civibus, ignota dolores delectus at eos, utroque mediocrem ullamcorper pro in. Quo percipit accommodare ei? In per nusquam urbanitas elaboraret, aperiri adipisci sea ne? Magna postea te mei, vim no populo minimum dissentias.
Lorem ipsum dolor sit amet, vivendo voluptua no pri, at iuvaret qualisque eloquentiam eum, eu utinam utroque nam. Ex autem saperet pro. Volutpat urbanitas omittantur ea pro, quo an aliquip docendi periculis! Qui detracto contentiones ex, no mutat equidem atomorum sea.
Pri ne velit doming civibus, ignota dolores delectus at eos, utroque mediocrem ullamcorper pro in. Quo percipit accommodare ei? In per nusquam urbanitas elaboraret, aperiri adipisci sea ne? Magna postea te mei, vim no populo minimum dissentias.