Use of Ribbons and Tags in Web Design – Inspiring Examples

• 5 minutes READ

It was not long before creative layouts become popular not only for portfolios or online design agencies but also for any other regular website. Creative approach and high attention to details dictate modern criteria of creating website outward, from year to year updating the list of current trends. Something disappears without a trace, something becomes habitual so it’s really difficult to notice, and there is a special category of design techniques which essentially remains the same, but every year it surprises us with its different faces.

One of the prominent representatives of this category is the use of ribbons and tags that initially come in web design from a world of merchandize. Despite of being essentially related to web designs of clothes online shops it has found its place in other types of websites. A lot of designers utilize ribbon as a background for main menu or set it as an ornament for titles and captions of different widgets and blocks of data.

Tags, in its turn, are responsible for attraction and concentration of users’ attention on small details such as call-to-action buttons, social media icons, sales, deals and others. Undoubtedly, there are different ways to integrate these graphic elements that usually depend on the effect you want to achieve.

Below you will find a collection that depicts various implementations of ribbons and tags.

Holify looks clean and nice. Black and white ribbon typography with bows and outline graphics perfectly complement each other.


No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates

XHTMLChoppers – Although 3 ribbons in a row placed almost together look a bit messy, the difference in color and shape is definitely capable of grabbing users’ attention.


Kinderfotografie has an appealing delicate style that is implemented by stitched image tags hanging on a rope, childish turquoise background and light accurate menu ribbon.


Baby Shirts presents every menu item in a separate tag.

Baby Shirts

Des Terres Inconnues combines ribbons and tags in order to make strong with slightly grunge touch header.

Low-Code Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

O’lala is an ecommerce clothes website with a harmonic combination of different textures such as soft cardboard and painted fabric that perfectly echoes in various design elements like tags or buttons.

Craft Beer Festival has a bunch of ribbons-like elements. You can find them in a logotype, caption ornament, table canvas, date widget background and even in typography.

Craft Beer Festival

Jopp Design uses a realistic tag illustration as a call-to-action button that immediately attracts users with its profitable proposition.

Jopp Design

Hosting Pear sets the eye movement of viewers on the main page, leading them to a tagline message.

Desert Chill has a less formal design with fresh main menu that due to its saturated background perfectly blended into the blue sky in the header.

Desert Chill

Moonrise Kingdom makes use of beige polished heavy textured ribbon as a menu background that helps to define menu items.

Moonrise Kingdom

Mustasj creates a serious business-like look utilizing subtle grey color palette in conjunction with neatly designed ribbon and tag logotype.


Bit Circus has only one bright really simple but at the same time impactful illustration that manages to lead our eyes from top to bottom.

Bit Circus

Oliver Lisher has a standard combination of ribbon and tag in a header which are made in the same style and color scheme.

Oliver Lisher

Sanissimo is a truly sophisticated design which is assigned by complicated logotype with accurate shadows and neat emboss effect.


Lambooja stands out with its accurately crafted logo that is combination of 2 tags and 1 ribbon.


Kastiel Jasenica – silk maroon ribbons work wonderfully with dark color scheme and menu band with flower pattern.

Kastiel Jasenica

Statek Psychologia lively uses maritime style that is accomplished by bilateral white tag and ropes as a main menu background and blue tag in logotype.

Statek Psychologia

The Production Kitchen – I could not but add to our collection an illustrated hand-drawn ribbon since a lot of designers use them as an impressive ornament that can easily emphasize taglines or short messages.

The Production Kitchen

Anna Monroe manages to pull of light clean appearance which is achieved by a spacious noised white-smoke background and a huge well-defined ribbon that perfectly cooperate with an illustrated owner’s name.

Anna Monroe

Negocio de Mulher is a heavy textured website design. Use of green header and huge red ribbon with tagline upon grey background with monograms makes a whole appearance extremely attractive.

Negocio de Mulher

Friendly Gents has charming black and white color combination which is perfectly complemented by photo and black graphical ribbon.

Friendly Gents

The Boutique Bakery instills a sense of enjoyment with blue striped ribbon and charming circle tag with tasty typography.

The Boutique Bakery

Milk and Blood conveys truly dramatic emotions with vibrant image and a huge semi-transparent black tag that plays role of logo.

Milk and Blood

Savoir Fair Media has a strong artistic feel with a collage-like hand-drawn logo and exceptional red delicate ribbon.

Savoir Fair Media

Despite of being more decorative elements rather than functional, ribbons and tags are capable of providing its owners with an excellent tool that allow easily grab attention. Moreover, you can install them in different types of design adding a bit of artistry and loveliness.

What do you think of usage such graphical elements? Do you find them appropriate in business-oriented websites? What example do you like most?

Nataly Birch

Nataly is an exceptional web designer and developer with a master's degree in computer science. She is highly skilled in helping clients establish a strong online presence and achieve their digital marketing goals across various sectors, including email design, email marketing, and web development. Nataly remains at the forefront of the industry by staying updated with the latest trends through continuous learning.

Posts by Nataly Birch