--- title: "Premium Sticker | GoodBarber's Design System" description: "The Premium Sticker of GoodBarber apps marks the content reserved for subscribers, before the title in lists and above the title in the detail." canonical_url: "https://www.goodbarber.com/uxdesign/premium-sticker/" lang: fi --- # Premium Sticker | GoodBarber's Design System [Design System](https://fi.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://fi.goodbarber.com/uxdesign/](https://fi.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://fi.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/) * [Address](/uxdesign/address/) * [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/) * [Premium Sticker](/uxdesign/premium-sticker/) * [Story Pager](/uxdesign/story-pager/) * [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/) # Premium Sticker UI Elements The Premium Sticker marks the content reserved for subscribers, before the title in a list and above it in the detail. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/premium-sticker.fcc7a56b064e.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/premium-sticker.fcc7a56b064e.mp4) ## Introduction The Premium Sticker marks the content that is restricted, reserved for the subscribers of the app. It appears in the lists and widgets of content, and in the detail of each restricted item, so that readers know at a glance which content is exclusive to subscribers. It comes with Memberships, the extension that lets an app sell subscriptions. Each piece of content is restricted, or left free, from the back office, and the sticker follows. It is displayed to the users who are not subscribed, and also to the subscribers who are logged in, to show them the premium content their subscription gives access to. ## Anatomy ### Two forms The Premium Sticker takes two forms. In a list, it is a small sticker displayed before the title of the item, with an icon or a logo on its background. In the detail of the item, it becomes a text sticker, a short label on the same background, displayed above the title. ![In a list, and in the detail](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-PremiumSticker-Anatomy-Forms.185d065bd1b4.png) *In a list, and in the detail* ## Properties ### Icon or logo In the lists, the sticker holds either an [icon](/uxdesign/icons/) of the GoodBarber library, with a [color](/uxdesign/atom-color/) or a [gradient](/uxdesign/atom-gradient/) of its own, or a logo uploaded from the back office. With a logo, the color setting disappears, since the logo brings its own colors. ![An icon, its color, or a logo](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-PremiumSticker-Properties-Icon.938c2483ca43.png) *An icon, its color, or a logo* ### Text In the detail of an item, the sticker shows a text of up to 40 characters, with its own [font](/uxdesign/atom-font/), size and [color](/uxdesign/atom-color/). The text can never be empty. When it is deleted, the default text comes back. ![Your text, your font, your color](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-PremiumSticker-Properties-Text.88b38e13521a.png) *Your text, your font, your color* ### Background The background of the sticker is a [Color](/uxdesign/atom-color/) or a [Gradient](/uxdesign/atom-gradient/), and it can also be transparent. It is the same for both forms. ### Shape The sticker has its own shape, sharp, rounded or round, set in the back office. It does not follow the [Shape](/uxdesign/atom-shape/) of the app, so an app with rounded corners can show sharp stickers. ![Sharp, rounded and round](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-PremiumSticker-Properties-Shape.e2cd517fed04.png) *Sharp, rounded and round* ## Layout ### In a list In a list, the sticker is always displayed before the title of the item, on its first line, so that the title reads right after it. ![Before the title, on its first line](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-PremiumSticker-Layout-List.a9742a20e8a2.png) *Before the title, on its first line* ### In the detail In the detail, the sticker is displayed above the title, on its own line, and follows the alignment of the title, centered when the title is centered. In some Sound detail templates, it is displayed below the title instead. ![Above the title, with its alignment](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-PremiumSticker-Layout-Detail.b1fdcd330d0b.png) *Above the title, with its alignment* ### Placement The sticker appears wherever a restricted item is shown, in the widgets of the home, in the lists of the sections, search and bookmarks included, and in the detail of the item. Since it always goes with the title, only the views without a title do not show it. ![In a card, in a compact cell and in a list cell](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-PremiumSticker-Layout-Placement.f67381fe5589.png) *In a card, in a compact cell and in a list cell*