2 components Components
Design components are reusable styling that can be applied using just the CSS class names specified in the component. Also known as design 'modules'.
Source:
styles.scss
, line 37
2.1 components.block Sidebar Block
Sidebar block styling.
Example
Markup: components\block.twig
<aside>
<div class="block">
<h2>Example title</h2>
Simple block: Liquorice fruitcake lollipop. Sesame snaps muffin gummies
cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps
halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw
tootsie roll jujubes.
</div>
</aside>
Source:
components/_aside_blocks.scss
, line 1
2.3 components.header Header Main Menu
Header menus styling for main nav
Example
Markup: components\header.twig
<div class="region-header">
<nav class="block-system-menublock">
<ul class="menu">
<li class="menu-item"><a href="/">Example</a></li>
<li class="menu-item"><a href="/">Example</a></li>
<li class="menu-item"><a href="/">Example</a></li>
<li class="menu-item"><a href="/">Example</a></li>
</ul>
</nav>
</div>
Source:
components/_header.scss
, line 1
2.4 components.tabs Primary Tabs
Simple tabs styling.
Markup: components\tabs.twig
<div class="tabs">
<ul>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
</div>
Source:
components/_tabs.scss
, line 1