HUB UI Example

Related Articles

Hello and welcome to GO Hub’s UI sample sheet. You will find examples of shortcodes (things with [ and ]) that you can use to render different UI elements in your articles.

Pokémon link

Note: if you use the expanded form (the one ending with [/pokemon-link]), then all opening tags need to be closed with it as well.

Normal

Mewtwo

With shiny flag

Mewtwo

With typing

Mewtwo NormalGhost

With typing and label

Mewtwo My Fav Pokémon NormalGhost

Types

You can render a colored Type badge by writing [TYPE NAME] in the article content.

Normal Fire Flying

Weather

You can render weather badge on demand (there are multiple ways to render the same thing):

Sunny Sunny
Sunny Rainy
Rainy Cloudy
Partly Cloudy Partly Cloudy
Windy Windy
Snow Snow
Fog Fog

Tables

hub-table

You can make responsive, horizontally scrollable tables by wrapping them in hub-table shortcode:

Pokémon list

hub-pokemon-list will arrange your Pokémon in a 3-per-row list of Pokémon

Colored sections

hub-colored-section is used to create a section with background color. You can define two different propreties: background color (using HTML codes for colors) and font color (same HTML codes). You can use any valid HTML color, including pretty names (yellow, white, green, etc…)

Different UI elements will try to render themselves as best as they can inside colored sections.

Content grid

If the hub-pokemon-list doesn’t serve your need, you can use hub-content-grid. This shortcode will render its hub-content-grid-item in a column grid, and you can define if you want 2, 3 or 4 columns.

It is often combined with hub-colored-section to create an interesting effect.

Two columns

Nov 29 – Dec 13

  • Great League
  • Great League Remix

Dec 13 – Dec 27

  • Ultra League
  • Ultra League Remix
  • Holiday Cup (begins Dec 16)

Dec 27 – Jan 10

  • Master League*
  • Master League Classic*
  • Holiday Cup (ends Dec 31)*
* 3× Stardust from win rewards (this does not include end of set rewards)

Three columns

Nov 29 – Dec 13

  • Great League
  • Great League Remix

Dec 13 – Dec 27

  • Ultra League
  • Ultra League Remix
  • Holiday Cup (begins Dec 16)

Dec 27 – Jan 10

  • Master League*
  • Master League Classic*
  • Holiday Cup (ends Dec 31)*
* 3× Stardust from win rewards (this does not include end of set rewards)

Poke-item

poke-item can be used to render an item icon. It supports custom amount, multiplier and modifier text. Here are the supported items and usage examples:

Examples

Camera icon 1x Camera Camera icon 1x special Camera Camera icon 30x Pokémon Snap Camera Camera icon 30 pieces of Prof. Willow's Camera

Items

Camera Camera icon 1x Camera
Meltan Box Meltan Box icon 1x Meltan Box
Coin Coin icon 1x Coin
Incense Incense icon 1x Incense
Daily Incense Daily Incense icon 1x Daily Incense
Poffin Poffin icon 1x Poffin
Lucky Egg Lucky Egg icon 1x Lucky Egg
EXP EXP icon 1x EXP
XP XP icon 1x XP
Experience Experience icon 1x Experience
Stardust Stardust icon 1x Stardust
Star Piece Star Piece icon 1x Star Piece
Mega Energy Mega Energy icon 1x Mega Energy
Charge TM Charge TM icon 1x Charge TM
Elite Charge TM Elite Charge TM icon 1x Elite Charge TM
Fast TM Fast TM icon 1x Fast TM
Elite Fast TM Elite Fast TM icon 1x Elite Fast TM
Daily Free Pass Daily Free Pass icon 1x Daily Free Pass
Remote Raid Pass Remote Raid Pass icon 1x Remote Raid Pass
Premium Raid Pass Premium Raid Pass icon 1x Premium Raid Pass
Raid Pass Raid Pass icon 1x Raid Pass
EX Raid Pass EX Raid Pass icon 1x EX Raid Pass
Super Rocket Radar Super Rocket Radar icon 1x Super Rocket Radar
Rocket Radar Rocket Radar icon 1x Rocket Radar
Lure Lure icon 1x Lure
Glacial Lure Glacial Lure icon 1x Glacial Lure
Mossy Lure Mossy Lure icon 1x Mossy Lure
Magnetic Lure Magnetic Lure icon 1x Magnetic Lure
Rainy Lure Rainy Lure icon 1x Rainy Lure
Razz Berry Razz Berry icon 1x Razz Berry
Golden Razz Berry Golden Razz Berry icon 1x Golden Razz Berry
Nanab Berry Nanab Berry icon 1x Nanab Berry
Pinap Berry Pinap Berry icon 1x Pinap Berry
Silver Pinap Berry Silver Pinap Berry icon 1x Silver Pinap Berry
Poké Ball Poké Ball icon 1x Poké Ball
PokéBall PokéBall icon 1x PokéBall
Poke Ball Poke Ball icon 1x Poke Ball
PokeBall PokeBall icon 1x PokeBall
Premier Ball Premier Ball icon 1x Premier Ball
Great Ball Great Ball icon 1x Great Ball
Ultra Ball Ultra Ball icon 1x Ultra Ball
Master Ball Master Ball icon 1x Master Ball
Potion Potion icon 1x Potion
Super Potion Super Potion icon 1x Super Potion
Hyper Potion Hyper Potion icon 1x Hyper Potion
Max Potion Max Potion icon 1x Max Potion
Revive Revive icon 1x Revive
Max Revive Max Revive icon 1x Max Revive
Dragon Scale Dragon Scale icon 1x Dragon Scale
Metal Coat Metal Coat icon 1x Metal Coat
Sun Stone Sun Stone icon 1x Sun Stone
Unova Stone Unova Stone icon 1x Unova Stone
Sinnoh Stone Sinnoh Stone icon 1x Sinnoh Stone
King’s Rock King's Rock icon 1x King's Rock
Upgrade Upgrade icon 1x Upgrade
Candy Candy icon 1x Candy
Rare Candy Rare Candy icon 1x Rare Candy
Rare XL Candy Rare XL Candy icon 1x Rare XL Candy
Mega Candy Mega Candy icon 1x Mega Candy
Incubator Incubator icon 1x Incubator
Free Incubator Free Incubator icon 1x Free Incubator
Super Incubator Super Incubator icon 1x Super Incubator
Egg 2 km Egg 2 km icon 1x Egg 2 km
Egg 5 km Egg 5 km icon 1x Egg 5 km
Egg 7 km Egg 7 km icon 1x Egg 7 km
Egg 10 km Egg 10 km icon 1x Egg 10 km
Egg 12 km Egg 12 km icon 1x Egg 12 km

Flat-icon

flat-icon can be used to render a flat icon for a particular bonus. These bonuses / items are supported:

Attack Attack icon
Battle Battle icon
Battle Friend Battle Friend icon
Buddy Buddy icon
Candy Candy icon
Candy XL Candy XL icon
Egg Egg icon
Event Event icon
Evolve Evolve icon
General General icon
Gift Gift icon
Incense Incense icon
Incubator Incubator icon
Location Location icon
Lucky Egg Lucky Egg icon
Lure Lure icon
Mystery Box Mystery Box icon
Photobomb Photobomb icon
Pokemon Encounter Pokemon Encounter icon
Pokestop Pokestop icon
Raid Raid icon
Raid Pass Raid Pass icon
Research Research icon
Shop Shop icon
Stardust Stardust icon
StarPiece Star Piece icon
Team Rocket Team Rocket icon
Trade Trade icon
TradeBall TradeBall icon
Transfer Transfer icon
Walking Walking icon
XP XP icon

Bonus Card

Usually, using flat-icon is not the best way to express a bonus, so here’s where bonus-card goes into play, as it allows users to add some text.

Attack
Attack icon Your text goes here
Battle
Battle icon Your text goes here
Battle Friend
Battle Friend icon Your text goes here
Buddy
Buddy icon Your text goes here
Candy
Candy icon Your text goes here
Candy XL
Candy XL icon Your text goes here
Egg
Egg icon Your text goes here
Event
Event icon Your text goes here
Evolve
Evolve icon Your text goes here
General
General icon Your text goes here
Gift
Gift icon Your text goes here
Incense
Incense icon Your text goes here
Incubator
Incubator icon Your text goes here
Location
Location icon Your text goes here
Lucky Egg
Lucky Egg icon Your text goes here
Lure
Lure icon Your text goes here
Mystery Box
Mystery Box icon Your text goes here
Photobomb
Photobomb icon Your text goes here
Pokemon Encounter
Pokemon Encounter icon Your text goes here
Pokestop
Pokestop icon Your text goes here
Raid
Raid icon Your text goes here
Raid Pass
Raid Pass icon Your text goes here
Research
Research icon Your text goes here
Shop
Shop icon Your text goes here
Stardust
Stardust icon Your text goes here
StarPiece
Star Piece icon Your text goes here
Team Rocket
Team Rocket icon Your text goes here
Trade
Trade icon Your text goes here
TradeBall
TradeBall icon Your text goes here
Transfer
Transfer icon Your text goes here
Walking
Walking icon Your text goes here
XP
XP icon Your text goes here

Hub list

Stacking bonuses one on top of the other is a common UI need, so hub-list is the go-to way for that.

For Pokémon

For bonuses

  • Walking icon Your text goes here
  • Transfer icon Your text goes here
  • XP icon Your text goes here

Related reading

Popular today

Latest articles