Base

/../hex/src/hexagons/_hexagon.scss

This component is used with icons, logos, text to visualize or group some concepts. This component is used in the Behive component which allows to create a set hexagons.

Options
  • .hexagon: Blue hexagon using the normal size. There are more sizes available
  • .hexagon-reverse: White hexagon. Used with dark backgrounds. Both classes have to be added to the element .hexagon .hexagon-reverse
  • .hexagon-outline: White hexagon and dark border. Used with light backgrounds. Both classes have to be added to the element .hexagon .hexagon-outline
  • .hexagon margin-c: Hexagon centered. It will center the hexagon horizontally inside any element.

This is just text

This is just text


<div class="container container-tiny">
  <div class="padding-big">
    <div class="hexagon">
      <p class="margin-reset">This is just text</p>
    </div>
  </div>
  <div class="padding-big">
    <div class="hexagon hexagon-outline">
    </div>
  </div>
  <div class="bg-dark padding-big">
    <div class="hexagon hexagon-reverse">
      <img src="/assets/images/gears.svg"/>
    </div>
  </div>
  <div class="padding-big">
    <div class="hexagon margin-c">
      <p class="margin-reset">This is just text</p>
    </div>
  </div>
</div>

Inline

/../hex/src/hexagons/_hexagon.scss

The hexagon will align vertically with the header text. The size of the hexagon is fixed. Multiline is supported, the hexagon will align vertically in the middle when multiples lines.

This is a regular header with an hexagon next to it.

 
This is regular text with an hexagon next to it.
<div class="bg-dark padding-normal">
  <div class="hexagon-inline">
    <div class="hexagon hexagon-reverse">
      <img src="/assets/images/gears.svg"/>
    </div>
    <h4>This is a regular header with an hexagon next to it.</h4>
  </div>
</div>

<div class="padding-normal">
  <div class="hexagon-inline">
    <div class="hexagon">&nbsp;</div>
    This is regular text with an hexagon next to it.
  </div>
</div>

Sizes

/../hex/src/hexagons/_hexagon.scss

Change the size of the hexagon. You can combine it with other hexagon classes.

<div class="hexagon margin-v-big"></div>
<div class="hexagon hexagon-small margin-v-big"></div>
<div class="hexagon hexagon-tiny margin-v-big"></div>