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
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.2 components.example_button Example Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

This is an example styleguide entry. To see the code that generates this entry, go to the sass/components/example folder in your theme and view the example_button.scss, example_button.twig, and example_button.json files to see what they do.

Examples
Default styling
:hover
Text turns red on hover.
.rounded
Wow! So round!
Markup: components\example\example_button.twig
<button class="button {{modifier_class}}">{{button_text}}</button>
Source: components/example/example_button.scss, line 1
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
Example
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