Panel

Create layout boxes with different styles.

FatKit uses panels to outline certain sections of your content, which can be styled differently. Typically, panels are arranged in grid columns from the Grid component.

Usage

The Panel component consists of the panel itself, the panel title and a panel badge. To prevent redundant white space, top and bottom margins are removed from the panel's content.

Example

NOTE By default, a panel is blank and has no styling. That is why it is important to add a modifier class, which gives the panel some styling. In our examples we used the .f-panel-box class.

Markup

<div class="f-panel">
	<div class="f-panel-badge f-badge">...</div>
	<h3 class="f-panel-title">...</h3>
	...
</div>

Panels in a grid

This is a short example of how to use panels with the Grid component. Both panels are using the .f-width-medium-1-2 class.

Example

Markup

<div class="f-grid">
	<div class="f-width-medium-1-2">
		<div class="f-panel">...</div>
	</div>
	<div class="f-width-medium-1-2">
		<div class="f-panel">...</div>
	</div>
</div>

Modifiers

Modifier classes are necessary to add a specific style to panels. FatKit includes a number of panel modifiers and you also have the possibility to create your own.

Panel box

Add the .f-panel-box class to create a visually styled box. This is the default panel modifier.

Example

Markup

<div class="f-panel f-panel-box">...</div>

NOTE To create a hover effect on the panel, just add the .f-panel-box-hover class. This comes in handy when working with anchors.

Panel box primary

Add the .f-panel-box-primary class to modify the box panel and emphasize it with a different color.

Example

Markup

<div class="f-panel f-panel-box f-panel-box-primary">...</div>

NOTE To create a hover effect on the panel, just add the .f-panel-box-primary-hover class. This comes in handy when working with anchors.

Panel box secondary

Add the .f-panel-box-secondary class to modify the box panel and give it a white background.

Example

Markup

<div class="f-panel f-panel-box f-panel-box-secondary">...</div>

NOTE To create a hover effect on the panel, just add the .f-panel-box-secondary-hover class. This comes in handy when working with anchors.

Panel hover

Add the .f-panel-hover class to add a hover effect to the panel. This comes in handy when using the panel as an anchor.

Example

Markup

<a class="f-panel f-panel-hover" href="">...</a>

Panel shadow

Add the .f-panel-box-shadow class to add a box-shadow effect to the panel.

Example

Markup

<a class="f-panel f-panel-shadow" href="">...</a>

Panel header

Add the .f-panel-header class to separate the panel title and content with a horizontal line.

Example

Markup

<div class="f-panel f-panel-header">...</div>

Panel space

Add the .f-panel-space class to increase the spacing around the panel content.

Example

Markup

<div class="f-panel f-panel-space">...</div>

Panel divider

Add the .f-panel-divider class to separate vertically stacked panels with lines.

Example

Markup

<div class="f-grid">
	<div class="f-width-medium-1-2">
		<div class="f-panel f-panel-divider">...</div>
		<div class="f-panel f-panel-divider">...</div>
		<div class="f-panel f-panel-divider">...</div>
	</div>
</div>

NOTE Use the .f-grid-divider class from the Grid component to separate grid columns.

Panel box with teaser

To display an image inside a panel box that is attached to the border of the panel without any spacing, just add the .f-panel-teaser class to a <div> element inside the panel.

Example

Teaser 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Click Me

Teaser 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Click Me

Teaser 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Click Me

Markup

<div class="f-panel f-panel-box">
	<div class="f-panel-teaser">
		<img src="" alt="">
	</div>
</div>

Panel with icons

Easily apply an icon from our Icon component to your panel by adding one of the .material-icons classes to an <i> or <span> element inside the panel title.

Example

Markup

<div class="f-panel">
	<h3 class="f-panel-title"><i class="material-icons">person</i> Panel</h3>
</div>