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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 's'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 's'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'l'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'xl'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'minor'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'minor'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'external'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'external'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'ghost'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'ghost'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'text'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'text'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'strong'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
view: 'strong'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
pseudo: true
},
content: 'Show the answer',
title: 'Click the link to see the answer'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm',
pseudo: true
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info',
target: '_blank'
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
},
url: 'https://bem.info/',
content: 'bem.info',
tabIndex: 1
}
BEMJSON[
{
block: 'link',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps