--- title: The digital Styleguide of Your Game Race - Components --- {% include_relative partials/head.html %}
{% include_relative partials/leftNav.html %}
{% include_relative partials/topBar.html %}

Components

Components are bigger moveable elements of the site. Usually, they are build upon different elements. They are created to fulfill a special requirement like tables that contain data. Modifier extend them to use them in different environment. On top of that there are rules to make them responsive.

Tables

Table elements

.table__row (required):

Row sub-element that contains row elements. It's the vertical separation of the table and therefore the foundation of the basic table structure.

.ygr-table__category-image (optional):

The first vertical column of the table can be an category column. It contains an image to categories its row.

.ygr-table__content-lead (required):

The content lead column will take all space that is available.

.ygr-table__content (required):

The content column will take a certain amount of space that is shared with other columns.

.ygr-table__actions (optional):

The action column is the last column and contains elements to trigger an action.

Regular table

Your Game Race uses tables to display various kinds of information.

Full width table

Core Race #21
Weekly Race
#5
Rank
213
Score
Mar 27, 2018
End
Core Race #21
Weekly Race
#5
Rank
213
Score
Mar 27, 2018
End
Core Race #21
Weekly Race
#5
Rank
213
Score
Mar 27, 2018
End

Table with 70% width

Core Race #21
Weekly Race
#5
Rank
213
Score
Mar 27, 2018
End
Core Race #21
Weekly Race
#5
Rank
213
Score
Mar 27, 2018
End
Core Race #21
Weekly Race
#5
Rank
213
Score
Mar 27, 2018
End

Table with background

Race
Status
Start
End
Participants
Core Race #21
Private Race
Available
Mar 26, 2018
3:00pm
Mar 28, 2018
3:00pm
25 Players
On total of 128
Beyond Godlike
Premium Race
Joined
Mar 26, 2018
3:00pm
Mar 28, 2018
3:00pm
45 Players
On total of 128
Winter is coming
Weekly Race
Full
Mar 26, 2018
3:00pm
Mar 28, 2018
3:00pm
128 Players
On total of 128

Area section

Area section elements

.ygr-area-section__column (required):

Is the foundation of the basic structure. The component itself goes full-width. A height should be set at this element to span the area. Each col can contain multiple rows. If there are multiple columns then there is a spacing between. Column widths distribute even using flex-grow: 1. It can be overridden using the style attribute to adapt this distribution.

.ygr-area-section__row (required):

Are used in columns. If a column has multiple rows then there will be spacing between the rows similar to the column spacing. Like in columns the basic weight of the row that is used to calculate its height is defined by flex-grow: 1. It can be overridden inline to adapt the weight of elements.

Area section example

Introducing the creators of Your Game Race
3 hours ago
Introducing the creators of Your Game Race
3 hours ago
Introducing the creators of Your Game Race
3 hours ago

Area section example gapless

Current user

Current user elements

.ygr-current-user__text (required):

Welcomes the user and tells the user that he is logged in.

.ygr-current-user__image (required):

Image for the user that usually contains an avatar

.ygr-current-user__action (optional):

Contains actions for the user like going for premium, go to his profile or something similar.

Current user example

Welcome
Username

Metric segment

Metric segment elements

.ygr-metric-segment (required):

Basic element frame that is the foundation of the component. Additionally the component can be a .ygr-card to make it more independent.

.ygr-metric-segment__number (required):

Contains an important value to highlight.

.ygr-metric-segment__description (required):

Description of the highlighted number. The element itself only contains sub-elements.

.ygr-metric-segment__description-headline (required):

Name of the metric that is displayed.

.ygr-metric-segment__description-sub-headline (required):

Description of the element that is displayed. Either the metric is described or more details about related metrics can be shown.

.ygr-metric-segment__image (optional):

Instead of a number an image can be used.

Metric segment example

05
Races played
87 Matches with 52.34% win-rate

Metric segment with image

Discord community
Share the fun and discuss about races