--- title: "Widget Header | GoodBarber's Design System" description: "The Widget Header of GoodBarber apps is the optional header of a home widget, with a title, a View all link, and its own border and background." canonical_url: "https://www.goodbarber.com/uxdesign/widget-header/" lang: no --- # Widget Header | GoodBarber's Design System [Design System](https://no.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://no.goodbarber.com/uxdesign/](https://no.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.b5a5ae872a5d.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.5c1a2eb6da12.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [Overview](https://no.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [Actions Menu](/uxdesign/actions-menu/) * [Author](/uxdesign/author/) * [Content](/uxdesign/content/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) * [Text](/uxdesign/text/) * [ToolBar](/uxdesign/toolbar/) * [Widget Header](/uxdesign/widget-header/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Widget Header UI Elements The Widget Header is the optional title of a home widget, with a link to the full section. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/widget-header.b1baf5807ce0.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/widget-header.b1baf5807ce0.mp4) ## Introduction The Widget Header is the optional header of a widget on the home page of the app, above its cells. It gives the list a context, with a title and a link that leads to the full section. ## Anatomy ### The title and the link The header is made of the title of the widget and, optionally, a link on the opposite side. The link reads "View all" and takes the user to the section the widget displays. In the back office, the [font](/uxdesign/typography/), the size on each device and the color of the title and of the link are set for each widget. ![The title and the View all link](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Anatomy-Structure.411a132cd234.png) *The title and the View all link* ### Dynamic height The header has no fixed height. It grows with the size of its title and the number of lines it takes. ![A title on one line, then on two](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Anatomy-Height.bbc69485b1ec.png) *A title on one line, then on two* ## Properties ### Shape The [Shape](/uxdesign/atom-shape/) atom of the app applies to the header, with Sharp, Rounded or Round corners. ![Sharp, Rounded and Round](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Properties-Shape.82ddd11b9a81.png) *Sharp, Rounded and Round* The header takes it only when the widget has side margins and no background or border of its own. When the widget has a background or a border, it carries the shape itself, and the header, at its top, follows its upper corners. Without side margins, the header keeps square corners. ![On its own, and at the top of a widget with a background](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Properties-ShapeWidget.bcac8e0555df.png) *On its own, and at the top of a widget with a background* ### Border In the back office, the header can take a border color. The [Border](/uxdesign/atom-border/) then runs on all four sides when the widget has side margins, and only on the top and bottom sides when it has none. ![With and without side margins](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Properties-Border.6a46c91237c2.png) *With and without side margins* ### Shadow The header can carry a level 2 [Shadow](/uxdesign/atom-shadow/) when the shadow of the widget is enabled. It appears only when the header has a background or a border and the widget itself has neither. ![The level 2 shadow](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Properties-Shadow.69696ff8b37c.png) *The level 2 shadow* ### Background The header takes its own [Background](/uxdesign/background/), a color with its opacity, set in the back office. Without one, it stays transparent. ![A background color, then transparent](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Properties-Background.86493cfbca6b.png) *A background color, then transparent* ## Layout ### Spacing When the header or the widget has a background or a border, the header keeps a padding on every side, [1G](/uxdesign/spacing/) on the left and on the right, and a vertical padding above and below the title. When both are transparent and the widget has margins, only the padding below the title remains, and the title lines up with the edge of the cells. Without side margins, the title keeps 1G from the edge of the screen. ![With a background, then transparent](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Layout-Spacing.1d7677608f48.png) *With a background, then transparent* ### Alignment The title can be aligned left, center or right. Aligned left, the title has the link on its right. Aligned right, the row is reversed and the link moves to the left. Centered, the title sits in the middle of the header and the link stays on the right, unless the title runs on several lines. The link then moves below it, centered too. On the left or on the right, a title on several lines keeps the link vertically centered. ![Left, center and right, with a short and a long title](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Layout-Alignment.1a1b46722f33.png) *Left, center and right, with a short and a long title* ### Margins and full screen By default, a widget takes the margins set for the whole app. In the back office, they can also be customized for each widget, on each side and for each device. Without side margins, the header spans the full width of the screen. ![With margins, then without](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Layout-Margins.a6092848fb56.png) *With margins, then without* On laptop and desktop screens, the content sits in a central column, and a widget can also be set to full screen. The background of its header then extends beyond this column, while the title and the link stay aligned with it. ![Full screen off, then on](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-WidgetHeader-Layout-FullScreen.d7d709bbd882.png) *Full screen off, then on*