HUB UI Example

Posted in

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 1× Camera Camera icon 1× special Camera Camera icon 30× Pokémon Snap Camera Camera icon 30 pieces of Prof. Willow's Camera

Items

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

Author & tags

Tags
Zeroghan
Zeroghanhttps://pokemongohub.net/
Zeroghan started the Hub in July 2016 and hasn't had much sleep since. A lover of all things Pokémon, web development, and writing.

Further reading

Popular today

Latest articles

Support us

Buy GO Hub merch

Get your very own GO Hub t-shirt, mug, or tote.