Using Components

Rendering components

Components are rendered using the laminas-view PhpRenderer::render() method, which is available via the $this pseudo-variable.

The file name should contain the component's path starting from the components folder and ending in the component folder name.

Example:

<?= $this->render('components/molecules/containers/finna-panel', [
    'attributes' => ['class' => ['finna-panel-default', 'organisation-info-panel']],
    'heading' => $this->transEsc('organisation_info_navi_usage'),
    'headingLevel' => 4,
    'content' => $content,
    'headingId' => 'heading-usage',
    'collapseId' => 'collapse-usage'
  ]); ?>

Styling components

The only allowed style rules targeting components from the outside are rules that affect the external layout of a component, for example the component's margins or visibility.

All other styling must be done in component-specific less files.

Adding classes and other attributes

Most components expose an attributes property that can be used to add attributes to the outermost HTML element. There is no need to add the main component id or class, but many components provide variation classes that can be added to affect the component's appearance.

Note that although many current component implementations are based on Bootstrap, and may internally use Bootstrap or other global classes, only documented variation classes should be added.

Unless otherwise specified in the component's documentation, an id or classes not used by the component may be added to implement external functionality like external layout or updating content via JavaScript.

Modifying global Less files

Components may internally use global Less resources, including Less variables, Bootstrap classes and other global utility classes. Great care should be taken when modifying global Less files.