link
Use this block for creating different types of links.
Overview
Modifiers of the block
| Modifier |
Acceptable values |
Use cases |
Description |
| pseudo |
true |
BEMJSON |
Pseudo link. |
| disabled |
true |
BEMJSON, JS |
The disabled state. |
| focused |
true |
BEMJSON, JS |
The block is in focus. |
| theme |
islands |
BEMJSON |
A custom design. |
| size |
's', 'm', 'l', 'xl' |
BEMJSON |
The size of the link. Use sizes for links only when the theme modifier is set to islands. |
| view |
'minor', 'external', 'ghost', 'text', 'strong' |
BEMJSON |
Visual highlighting. |
Custom fields of the block
| Field |
Type |
Description |
| url |
String |
Link address. |
| title |
String |
Tooltip content. |
| target |
String |
Link behavior. |
| tabIndex |
Number |
The order when navigating through controls on a page by pressing the Tab key. |
Block description
Use the link block control the size, state, and appearance of the links.
Modifiers of the block
pseudo modifier
Acceptable value: true.
Use case: BEMJSON.
Use to create the link that does not lead to a new webpage.
{
block : 'link',
mods : { theme : 'islands', size : 'm', pseudo : true },
content : 'Show the answer'
}
disabled modifier
Acceptable value: true.
Use case: BEMJSON, JS.
The modifier makes the block inactive. The disabled block is visible but not available for user actions.
Open in a new window<a class="link link_theme_islands link_size_m link_disabled link__control i-bem" data-bem='{"link":{"url":"https://bem.info/"}}' role="link" aria-disabled="true">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
focused modifier
Acceptable value: true.
Use case: BEMJSON, JS.
The modifier puts the focus on the block.
{
block : 'link',
mods : { theme : 'islands', size : 'm' , focused : true },
url : 'https://bem.info/',
content : 'bem.info'
}
theme modifier
Acceptable value: 'islands'.
Use case: BEMJSON.
The modifier gives the block a custom design.
The islands theme requires the size modifier.
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
size modifier
Acceptable values for the islands theme: 's', 'm', 'l', 'xl'.
Use case: BEMJSON.
Use the size modifier only for blocks with the islands theme.
Sets the size value for all types of links.
s
Open in a new window<a class="link link_theme_islands link_size_s link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 's'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 's'
}
}
]
m
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
l
Open in a new window<a class="link link_theme_islands link_size_l link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'l'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'l'
}
}
]
xl
Open in a new window<a class="link link_theme_islands link_size_xl link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'xl'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
view modifier
Acceptable values: 'minor', 'external', 'ghost', 'text', 'strong'.
Use case: BEMJSON.
Secondary link (view modifier with minor value)
The modifier visually highlights secondary links on a page.
Open in a new window<a class="link link_theme_islands link_size_m link_view_minor link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'minor'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'minor'
}
}
]
External link (view modifier with external value)
The modifier visually highlights external links on a page.
Open in a new window<a class="link link_theme_islands link_size_m link_view_external link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'external'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'external'
}
}
]
Ghost link (view modifier with ghost value)
The modifier changes the way the link looks. Use it if you don't want the link to stand out on the page:
Open in a new window<a class="link link_theme_islands link_size_m link_view_ghost link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'ghost'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'ghost'
}
}
]
Link to match text (view modifier with text value)
Use this modifier to create a link that matches the text color.
Open in a new window<a class="link link_theme_islands link_size_m link_view_text link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'text'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'text'
}
}
]
Bold link (view modifier with strong value)
The modifier visually highlights important links on a page.
Open in a new window<a class="link link_theme_islands link_size_m link_view_strong link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'strong'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'strong'
}
}
]
Custom fields of the block
url field
Type: String.
Specifies the link address that will be opened by clicking the link.
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
title title
Type: String.
Specifies the tooltip content. The tooltip appearance depends on the browser and your operating system settings. You cannot change it applying HTML or different styles.
Open in a new window<span class="link link_theme_islands link_size_m link_pseudo link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0" title="Click the link to see the answer">Show the answer</span>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
pseudo: true
},
content: 'Show the answer',
title: 'Click the link to see the answer'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
pseudo: true
}
}
]
target field
Type: String.
Specifies the link behavior.
The field supports all HTML attribute values of the target: _blank, _self (default), _parent, _top.
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/" target="_blank">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info',
target: '_blank'
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
tabIndex field
Type: Number.
Specifies the tab order when pressing Tab to navigate between controls on a page.
Open in a new window<a class="link link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/" tabindex="1">bem.info</a>
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info',
tabIndex: 1
}
[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]