> For the complete documentation index, see [llms.txt](https://birskiys.gitbook.io/html-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://birskiys.gitbook.io/html-css/components-elements.md).

# Components / Elements

## Elements

Все элементы можно применять глобально либо в привязывать его к определенному контексту, например глобально:

* .title
* .image
* .content
* .description
* .subtitle

или к контексту. Это может быть компонент или раскладка, например:

* .section-title
* .card-title
* .hero-image
* .card-image
* .article-content

Важно учитывать при создании элемента то, что это может быть любой строчный или блочный элемент. Не забывать учитывать заданные браузером стилизации элементов.

### Семантические элементы

Элементы могут упралять элементами только селектором по тегу

#### Title

```
<!-- Глобально -->
<h1 class="title"></h1> 

<!-- Контекст --> 
<h2 class="*-title"></h2>
```

#### Subtitle

```
<!-- Глобально -->
<h3 class="subtitle"></h3> 

<!-- Контекст --> 
<h3 class="*-subtitle"></h3>
```

#### Content

```
<!-- Глобально -->
<div class="content"></div> 

<!-- Контекст --> 
<div class="*-content"></div>
```

#### Description

```
<!-- Глобально -->
<div class="description"></div> 

<!-- Контекст --> 
<div class="*-description"></div>
```

#### Image

```
<!-- Глобально -->
<div class="image"></div> 

<!-- Контекст --> 
<div class="*-image"></div>
```

#### Link

```
<!-- Глобально -->
    <div class="link"></div> 
    
    <!-- Контекст --> 
    <div class="*-link"></div>
```

#### Icon

```
<!-- Глобально -->
<span class="icon"></span> 

<!-- Контекст --> 
<span class="*-icon"></span>
```

#### Tag

```
<!-- Глобально -->
<span class="tag"></span> 
<a href="#" class="tag"></a> 

<!-- Контекст --> 
<span class="*-tag"></span>
<a href="#" class="*-tag"></a>
```

#### Category

```
<!-- Глобально -->
<span class="category"></span> 
<a href="#" class="category"></a> 

<!-- Контекст --> 
<span class="*-category"></span>
<a href="#" class="*-category"></a>
```

#### Meta

```
<!-- Глобально -->
<div class="meta"></div> 

<!-- Контекст --> 
<div class="*-meta"></div>
```

### Структурные элементы

Элементы, они же в контексте - могут упралять внутренними элементами селектором по классу. Например, для выстраивания в ряд внутренних элементов или в колонку или в любую другую раскладку.

#### Background

```
<!-- Контекст --> 
<div class="*-background"></div>
```

#### Foreground

```
<!-- Контекст --> 
<div class="*-foreground"></div>
```

#### Overlay

```
<!-- Контекст --> 
<div class="*-overlay"></div>
```

#### Item

```
<!-- Контекст --> 
<div class="*-item"></div>
```

#### Top|Right|Bottom|Left

```
<!-- Контекст --> 
<div class="*-top"></div>
<div class="*-right"></div>
<div class="*-bottom"></div>
<div class="*-left"></div>
```

#### Header|Body|Footer

```
<!-- Контекст -->  
<div class="*-header"></div>
<div class="*-body"></div>
<div class="*-footer"></div>
```

### Разные элементы

#### Loader

```
<!-- Глобально -->
<div class="loader"></div> 

<!-- Контекст --> 
<div class="*-loader"></div>
```

#### Close

```
<!-- Глобально -->
<span class="close"></span> 
<a href="#" class="close"></a> 

<!-- Контекст --> 
<span class="*-close"></span>
<a href="#" class="*-close"></a>
```
