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 —
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
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.
A default widget gives you a really simple starting point to build from. Add class
widget-default to your
The default widget goes great with underlined headings; just add class
heading-underline to your
And for a simple title with a little modern styling, add class
heading-sm to your
If your widget is going on top of the content color (
#fff), then you can add the class
over-bg-content to your
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-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.
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.
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.
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
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.