Panel

Source API

The Panel component is a versatile container used to group and organize content into distinct sections. It includes a header, content area, and footer, and can be customized with elements like buttons, links, or forms. Panels are ideal for separating information or actions within a layout, helping to provide clarity and structure. To apply this component, just add the .panel class to a container element.

Headline

Content

Bottom

Actions

Add the .mini or .small class to a panel to make it smaller or larger.

Lorem ipsum dolor sit amet, eu duo inermis vocibus similique, vix ei facer mediocrem.

Eam insolens elaboraret in, sumo habeo nec ne. Dicta animal integre est cu, sea tacimates percipitur. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil tempore adipisci saepe fugiat accusamus molestiae amet illo corrupti veritatis esse. Porro, officia quisquam officiis ut nulla aliquid velit eos dolor?

Button

launch

error

To remove border and shadow from the panel, just add the .pure helper class to .panel container element.

Lorem ipsum dolor

Eam insolens elaboraret in, sumo habeo nec ne. Dicta animal integre est cu, sea tacimates percipitur adversarium ei, justo volumus assentior cu nec. Ut facilisi consequat duo, te ius eleifend sadipscing scriptorem.

Lorem ipsum dolor

Props
Default Class Name	Combinators
`panel`	`.panel`
`header`	`.panel > .header`
`title`	`.panel > .header > .title`
`content`	`.panel > .content`
`headline`	`.panel > .content > .headline`
`media`	`.panel > .content > .media`
`bottom`	`.panel > .bottom`
`actions`	`.panel > .bottom > .actions`
Sizes	Combinators
`mini`	`.mini.panel`
`small`	`.small.panel`