Background
  1. Standard components documentation
  2. Guild Wars 2 components
  3. UI Components

Standard components documentation

This page contains all components that can be used in a markdown guide / build.

Various markdown components

CodeOutput
_Italic_ or _Italic_Italic
**Bold** or **Bold**Bold
~~Strikethrough~~Strikethrough
[External Link](http://a.com) External Link
[Internal Link](/builds) Internal Link
`Inline code` with backticksInline code with backticks

Headings


# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Simply indent the list items with two spaces to create a nested list. For each successive level of indentation, add two more spaces.

Unordered lists

- Item one
- Item two
  - Nested item one
  - Nested item two
    - Nested nested item one
    - Nested nested item two
- Item three with a new line using four spaces
- Item four

Note that using * instead of the - character works as well.

  • Item one
  • Item two
    • Nested item one
    • Nested item two
      • Nested nested item one
      • Nested nested item two
  • Item three with a new line using four spaces
  • Item four

Ordered list

1. Item one
2. Item two
   1. Nested ordered items need to be indexed with **three** spaces
   2. Nested item two
      1. Nested nested item one
3. Item three with a new line
   using four spaces
4. Item four
  1. Item one
  2. Item two
    1. Nested ordered items need to be indexed with three spaces
    2. Nested item two
      1. Nested nested item one with a very long title yadda Might yadda
  3. Item three with a new line using four spaces
  4. Item four

Tables

| Column header 1 | Column header 2            |       Column header 3 |
| --------------- | -------------------------- | --------------------: |
| Cell 1          | Cell 2 with a<br/>new line | Right aligned cololun |
| Cell 3          | Cell 4                     |                   col |

If you want to create a head-less table, simply leave the column header cells blank. You don’t need to add spaces to make the table look pretty.

Column header 1Column header 2Column header 3
Cell 1Cell 2 with a
new line
Right aligned col
Cell 3Cell 4col
Center
Center with :-----:

Images

![Example image caption](@assets/images/hero_sunqua2.jpg)

Image paths need to be absolute to the actual markdown file within our GitHub repository . Sadly, this does not work in the editor.

Example image caption

Although the above syntax is the preferred variant, you can use the standard Markdown image syntax to preview images in editor context or to embed external images. Keep in mind that images you link to now might not be available in the future.

![Wallpaper](https://d3b4yo2b5lbfy.cloudfront.net/wp-content/uploads/wallpapers/992e8891d301-1920x1200.jpg)

Wallpaper

Videos

<Video title="Example video title" youtube="xcJtL7QggTI" timestamp={12} />

Animations / GIFs

<GifPlayer caption="insert a caption" url="https://pub-80c25841bf1e4cbda246ab1b42798500.r2.dev/airphase.webm" />
insert a caption

Blockquote

> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Inline HTML

<dl>
  <dt>Definition list</dt>
  <dd>Is something people use sometimes.</dd>

  <dt>Markdown in HTML</dt>
  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>

You can use any HTML tags you want. You can also pass styles to them using the style attribute.

Definition list
Is something people use sometimes.
Markdown in HTML
Does not work very well. Use HTML tags.

Paragraphs

Plain text is automatically wrapped in a paragraph element.
Use four spaces to force a new line.

Inserting a blank line between passages results in two distinct paragraphs.

Plain text is automatically wrapped in a paragraph element. Use four spaces to force a new line.

Inserting a blank line between passages results in two distinct paragraphs.

Guild Wars 2 components

Most of our Gw2 components are created with the help of the official game API . In general it should not be necessary to research IDs, as we resolve them automatically with the help of other identifiers like name or affix.

Our current mapping can be queried using the ID Helper tool (currently not implemented). As we keep its size as small as possible, some special items might not be present - in those cases you can still specify a fixed ID. You can find a specific ID by searching for the desired Item/Skill/whatever in the wiki and then clicking on “API”.

Items

Items can be created by specifying either a name or a type and affix combination. If there are multiple results for the query, the one with the lowest id will be taken.

Special characters like ', spaces and capital letters are normalized for the mapping.

ParameterTypeDescriptionExampleOutput
namestringItem name<Item name="Tin of Fruitcake"/> Tin of Fruitcake
affix, typestringItem affix + type<Item affix="Berserker" type="Longbow"/> Zojja's Greatbow
sizeone of tiny, small, medium, medium2, large, large2, bigIcon size<Item name="Delicious Rice Ball" size="large"/> Delicious Rice Ball
disableTextbooleanDisables the text<Item affix="Viper" type="Back Item" disableText/>
idnumberItem id<Item id="49940"/> Executioner Axe Toy

Skills and traits

Skills and traits are resolved using a name and a profession (optional). The profession theme color is automatically applied to the link, even if you don’t specify one.

Again - special characters, case sensitivity and spaces don’t matter. <Skill name="TotHe LiMiT!"/> will be resolved as "To the Limit!" .

ParameterTypeDescriptionExampleOutput
namestringSkill/trait name<Trait name="Pyromancers Training"/> Pyromancer's Training
professionstringSkill/trait profession<Skill name="Stab" profession="Mesmer"/> Stab
sizeone of tiny, small, medium, large, bigIcon size<Trait name="King of Fires" size="large"/> King of Fires
disableTextbooleanDisables the text<Skill name="Epidemic" disableText/>
idnumberSkill/trait id<Skill id="13113"/> Black Powder

Achievements

<Achievement name="The Shatterer">
  Beat the Shatterer in Blazeridge Steppes. You can find him in the north of
  the map. He spawns every 2 hours. Use <Boon name="Might" /> and{" "}
  <Skill name="Stability" /> to survive his attacks.
</Achievement>

Other Gw2 components

Some other game-related components can be created with a simple name identifier. Check the reference column for the proper spelling.

Note that you can use the size and disableText parameters with those as well.

UsageOutputReference
<Attribute name="Power"/>Power List of attributes
<Augmentation name="Fractal Savant"/>Mist Attunement 1 List of fractal augmentations
<Boon name="Might"/>Might List of boons
<Condition name="Burning"/>Burning List of conditions
<Control name="Stun"/>Stun List of control effects
<Effect name="Stealth"/>Stealth List of other effects
<Instability name="No Pain, No Gain"/>Mistlock Instability: No Pain, No Gain List of mistlock instabilities
<Specialization name="Weaver"/>Weaver List of specializations

UI Components

These components can be used to create a consistent look and feel across the website.

Dividers


---

<Divider text="Divider text"/>
Divider text

Grids

Our grid system is based on a 12-column grid layout. You can use <Grid> for the container and <GridItem> for the item components. There are five grid breakpoints:

You can define multiple widths per column, causing the layout to change at the defined breakpoint. If not specified otherwise, a <GridItem> will have the attributes xs="12" and sm="6" by default, causing the item to be 100% wide at mobile resolutions and 50% wide above.

<Grid>
  <GridItem>
    Left content
  </GridItem>

  <GridItem>
    Right content
  </GridItem>

  <GridItem>
    This item will be placed in a new row
  </GridItem>
</Grid>

Left content

Right content

This item will be placed in a new row

<Grid>
  <GridItem sm="4">
    `sm="4"`
  </GridItem>

  <GridItem sm="6">
    `sm="6"`
  </GridItem>

  <GridItem sm="2">
    `sm="2"`
  </GridItem>

  <GridItem sm="11">
    `sm="11"`
  </GridItem>
</Grid>

sm="4"

sm="6"
sm="2"

sm="11"

Cards

<Card title="Example card title">
Example card content
</Card>

Tabs

<Tabs>
<Tab title="Tab 1">
Tab content 1
</Tab>

<Tab title="Tab 2">
Tab content 2
</Tab>

<Tab specialization="Ranger">
Tab content 3
</Tab>
</Tabs>

You can also use the specialization property instead of title to create themed tabs.

Tab 1
Tab 2

Tab content 1

Messages

<Warning>
This is an important message.
</Warning>
<Information>
This is an important message.
</Information>

Build guide components

Writing build summaries has never been easier thanks to our automatic ID resolving. Note that you suffix Id behind parameters if you want to use a fixed ID, like glovesRuneId="76491".

<Weapons weapon1MainType="Axe" weapon1MainAffix="Assassin" weapon1MainSigil1="Force" weapon1OffType="Dagger" weapon1OffAffix="Seraph" weapon1OffSigil="Impact" weapon2MainType="Scepter" weapon2MainAffix="Berserker" weapon2MainSigil1="Severance" weapon2OffType="Mace" weapon2OffAffix="Viper" weapon2OffSigil="Paralyzation"/>

Use the option “unembossed” to remove the card.

<Traits traits1="Strength" traits1Selected="Peak Performance,Body Blow,Berserkers Power" traits2="Tactics" traits2Selected="Leg Specialist,Empower Allies,Phalanx Strength" traits3="Discipline" traits3Selected="Warriors Sprint,Doubled Standards,Axe Mastery"/>

Use the option “unembossed” to remove the card.

Strength
Tactics
Discipline
<Skills heal="Water Spirit" utility1="Frost Spirit" utility2="Vulture Stance" utility3="Signet of the Wild" elite="One Wolf Pack"/>

Use the option “unembossed” to remove the card.

Beginner / Advanced

You can wrap content in a <Beginner> or <Advanced> component to only show it for the currently selected mode. The mode selection is only available for builds at the moment.

Other components

CodeOutput
<Label>Example label</Label>Example label
<BuildLink build="Condi Firebrand" specialization="Firebrand"/> Condi Firebrand 🡢 Go to build