Widget
A widget is a small, secondary content container. Common uses for these would be in the sidebar or footer of a website. Widgets come in four styles —
A basic widget is setup simply by creating an element with class widget and one of the style classes — widget-default, panel-classic, panel-color or panel-modern.
Optionally you can add a title by adding class widget-title to any heading element within. While you can use different headings, your .widget-title element will have a specific font size for each widget style. So if you'd like specifically the font-size for a heading style you're using, you'd need to remove the widget-title class.
And from there, we can start utilizing various Front Street pieces to dress things up. Throughout this article we'll show you some nice examples of pairing various utility and typography elements with the different widget styles.
Default Widgets
A default widget gives you a really simple starting point to build from. Add class widget-default to your .widget element.
The default widget goes great with underlined headings; just add class heading-underline to your .widget-title element.
And for a simple title with a little modern styling, add class heading-sm to your .widget-title element.
If your widget is going on top of the content color (#fff), then you can add the class over-bg-content to your .widget element.
Or, to really color your widgets by adding any of the color classes. If your widget has more than just basic text, you may find it useful to also add class text-light or text-dark, as well.
The default widget style will also pair well with border helper classes. Any background color class you use (as described just above) will determine the border color, while your border helper class will determine the size of the border.
Classic Panel
The classic panel style was originally inspired by the panels of older versions of Twitter Bootstrap. Add class panel-classic to your .widget element. And when using this style, the .widget-title element becomes a more integral part of the design.
For the ultimate classic panel look, pair with border helper classes.
And just like default widgets, you can add any color classes you want. However, the difference here is that the content area of the widget will retain the standard content color, while the .widget-title and border (if applied) will receive the color.
Color Panel
A color panel is similar to a classic panel, except that it's filled in with color. And because of this, a color panel is the only widget style that must have a color class added to it.
And you can also pair color panels with border helper classes.
And of course, you can add any color classes you want.
Modern Panel
The modern panel provides a simpler look than the classic or color panel by using a single background color but with a subtle separation between the title and content. Add class panel-modern to your .widget element.
And because our modern panel's title divider is meant to blend with the background behind, the over-bg-content class can come in especially handy, if you're wanting to place the widget over a white background.
With the modern panel's smaller, sleeker title size, the addition of the heading-sm class to the .widget-title element goes extremely well here.
Like with all other widget styles, you can add any color classes to really make them pop. — And note that while you can add border helper classes to this widget, as well, we don't think they match aesthetically very well here.