--- title: The digital Styleguide of Your Game Race - Components ---
{% include_relative partials/head.html %}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.
.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.
Your Game Race uses tables to display various kinds of information.
.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.
.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.
.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.