Skip to content

link.en.md

Latest commit

 

History

History
310 lines (222 loc) · 6.59 KB

link.en.md

File metadata and controls

310 lines (222 loc) · 6.59 KB

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.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' , disabled : true },
    url : 'https://bem.info/',
    content : 'bem.info'
}

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.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

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

{
    block : 'link',
    mods : { theme : 'islands', size: 's' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

m

{
    block : 'link',
    mods : { theme : 'islands', size: 'm' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

l

{
    block : 'link',
    mods : { theme : 'islands', size: 'l' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

xl

{
    block : 'link',
    mods : { theme : 'islands', size: 'xl' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

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.

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'minor' },
    url : 'https://bem.info/',
    content : 'bem.info'
}
External link (view modifier with external value)

The modifier visually highlights external links on a page.

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'external' },
    url : 'https://bem.info/',
    content : 'bem.info'
}
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:

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'ghost' },
    url : 'https://bem.info/',
    content : 'bem.info'
}
Link to match text (view modifier with text value)

Use this modifier to create a link that matches the text color.

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'text' },
    url : 'https://bem.info/',
    content : 'bem.info'
}
Bold link (view modifier with strong value)

The modifier visually highlights important links on a page.

{
    block : 'link',
    mods : { theme : 'islands', size: 'm', view : 'strong' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

Custom fields of the block

url field

Type: String.

Specifies the link address that will be opened by clicking the link.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' },
    url : 'https://bem.info/',
    content : 'bem.info'
}

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.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm', pseudo : true },
    content : 'Show the answer',
    title : 'Click the link to see the answer'
}

target field

Type: String.

Specifies the link behavior.

The field supports all HTML attribute values of the target: _blank, _self (default), _parent, _top.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' },
    url : 'https://bem.info/',
    content : 'bem.info',
    target : '_blank'
}

tabIndex field

Type: Number.

Specifies the tab order when pressing Tab to navigate between controls on a page.

{
    block : 'link',
    mods : { theme : 'islands', size : 'm' },
    url : 'https://bem.info/',
    content : 'bem.info',
    tabIndex : 1
}