Skip to main content

Panel Element

The Panel element displays content and an image in one element. It has Title, Meta, Content, Image, Icon and Link fields.
About Us

We Love What We Do

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
Read more

Style

The panel has various style options. It can look like a card, tile or a blank panel. If a card style is selected, the image can also be aligned without padding.

Card Default

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Card Primary

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Card Secondary

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Card Hover

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Style None

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet.

Link

There are various options to link the Panel element. Either link the title, image and button separately or link the whole panel. Additionally, set hover styles for the title and image. These styles are kept even if the whole panel is linked.

Title and Meta Alignment

The panel title can be aligned to the left of the content. The title column width can be the same size as the title, a fixed width or percentage. Additionally, define the grid gaps and set the breakpoint from which the title stacks. Choose whether the meta text is aligned above or below title or content.

Roadtrips, the Kerouac Way of Escaping Crowded Planes

Travel Destinations
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Art Gallery

Amy Heather Gwen Exhibition: The Magazine

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.

Content Force Left Alignment

The Panel element also has an option to force left alignment for the content. This way the whole panel can be centered, and only the content is left aligned.
Review and a look into our future
Written by Kathy Collins
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto...
Read more

Image Alignment

The panel image can be aligned in regards to the content. If aligned to the left or right, the image column width can be the same size as the image, a fixed width or percentage. Additionally, define the grid gaps and set the breakpoint from which the image stacks.
Phones & Tablets

Newest Smartphones

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eius ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut.
Read more
Audio & Music

Best Speakers for Everyday

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eius ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut.
Read more
Corporate Education

Ten Steps to Create a Marketing Plan for Your Business

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua ut enim.
Read more

More Settings

Options for the different content fields are very similar across all elements. They are described in the corresponding Headline, Image, Text, Icon and Button element documentation. Mind that multiple panels can also be displayed in the Grid or Panel Slider elements.
Modern Ballet

Melissa Yang’s unique dance style empowers Tschaikowsky

Quo eros nominati temporibus ex, eu populo ocurreret mel! Ut pro hinc aperiam, eu pri ornatus persecuti. Ea eos ludus legere alterum, meis viris eripuit duo ex, cu nam clita omittantur dissentiunt! Te usu oblique patrioque, no vim harum latine, id vel erat solet suscipiantur! Utroque fastidii conceptam mei ea? Has ne erant sententiae, offendit laboramus an has. Est vidisse placerat dissentiunt ut! His cu cibo primis, vix quas argumentum ei, qui in esse laoreet!