Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Bulky

Description

Purpose: The Bulky Link is highly obtrusive. It combines the recognisability of a graphical element with an explicit textual label on an unusually sized button-like area.
Composition: The Bulky Link is built as a a-tag containing an icon or glyph and a (small) text.

Context

Slate
Drilldown Menu

Rivals

Bulky Button: Although visually very much alike, Bulky Buttons rather trigger a Signal and execute JavaScript while the Bulky Link opens a URL. Use Buttons to act upon other elements and Links to change the page. Bulky Links are not stateful.

Rules

Wording

The symbol and the text of the Bulky Link MUST be corresponding.

Style

Bulky Links MUST occupy as much space as their container leaves them.

Responsiveness

On screens larger than small size, Bulky Links MUST contain a symbol plus text.
On small-sized screens, Bulky Links SHOULD contain only a symbol.

Example 1: Base

Link to ilias.de with Icon

Link to ilias.de with Glyph

//The Bulky Links in this example point to ilias.de
//Note the exact look of the Bulky Links is mostly defined by the
//surrounding container.
function base()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $target = new \ILIAS\Data\URI("https://ilias.de");
 
    $ico = $f->symbol()->icon()
             ->standard('someExample', 'Example')
             ->withAbbreviation('E')
             ->withSize('medium');
    $link = $f->link()->bulky($ico, 'Link to ilias.de with Icon', $target);
 
    $glyph = $f->symbol()->glyph()->briefcase();
    $link2 = $f->link()->bulky($glyph, 'Link to ilias.de with Glyph', $target);
 
    return $renderer->render([
        $link,
        $f->divider()->horizontal(),
        $link2,
    ]);
}

Relations

Parents

UIComponent
Link