Copy environment

Honeycomb

<div class="honeycomb js-in-viewport js-honeycomb">
    <div class="honeycomb__inner">
        <div class="honeycomb__items">
            <div class="honeycomb__item" data-category="html">
                <div class="honeycomb__hexagon">
                    <div class="honeycomb__hexagon-inner">
                        <svg class="icon  honeycomb__hexagon-icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#apps"></use>
</svg> web apps
                    </div>
                </div>
                <div class="honeycomb__content">
                    JSON, Angular JS, BEM, TWIG, NODEJS, PHP, Themes, Aurelia <a href='#'>...read more</a>
                </div>
            </div>
            <div class="honeycomb__item" data-category="wordpress">
                <div class="honeycomb__hexagon">
                    <div class="honeycomb__hexagon-inner">
                        <svg class="icon  honeycomb__hexagon-icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#web"></use>
</svg> websites
                    </div>
                </div>
                <div class="honeycomb__content">
                    JSON, Angular JS, BEM, TWIG, NODEJS, PHP, Themes, Aurelia <a href='#'>...read more</a>
                </div>
            </div>
            <div class="honeycomb__item" data-category="prototype">
                <div class="honeycomb__hexagon">
                    <div class="honeycomb__hexagon-inner">
                        <svg class="icon  honeycomb__hexagon-icon">
    <use xlink:href="../../inc/svg/global.b2834a8c5e2811bb3821991f69ec7764.svg#mvp"></use>
</svg> MVP
                    </div>
                </div>
                <div class="honeycomb__content">
                    JSON, Angular JS, BEM, TWIG, NODEJS, PHP, Themes, Aurelia <a href='#'>...read more</a>
                </div>
            </div>
        </div>
        <div class="honeycomb__terms">
            <div class="honeycomb__hexagon honeycomb__hexagon--1" data-category="html wordpress">
                <div class="honeycomb__hexagon-title">Twig</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--2" data-category="html wordpress">
                <div class="honeycomb__hexagon-title">Themes</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--3" data-category="prototype">
                <div class="honeycomb__hexagon-title">UX Design</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--4" data-category="">
                <div class="honeycomb__hexagon-title">NodeJS</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--5" data-category="">
                <div class="honeycomb__hexagon-title">Bootstrap</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--6" data-category="">
                <div class="honeycomb__hexagon-title">Analyze</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--7" data-category="html wordpress">
                <div class="honeycomb__hexagon-title">BEM</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--8" data-category="wordpress">
                <div class="honeycomb__hexagon-title">PHP</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--9" data-category="">
                <div class="honeycomb__hexagon-title">ES2016</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--10" data-category="">
                <div class="honeycomb__hexagon-title">Bower</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--11" data-category="">
                <div class="honeycomb__hexagon-title">SVG animations</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--12" data-category="html wordpress">
                <div class="honeycomb__hexagon-title">Themes</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--13" data-category="">
                <div class="honeycomb__hexagon-title">Analyze</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--14" data-category="html wordpress">
                <div class="honeycomb__hexagon-title">BEM</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--15" data-category="">
                <div class="honeycomb__hexagon-title">PHP</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--16" data-category="wordpress">
                <div class="honeycomb__hexagon-title">ES2016</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--17" data-category="">
                <div class="honeycomb__hexagon-title">SVG animations</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--18" data-category="">
                <div class="honeycomb__hexagon-title">Themes</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--19" data-category="html wordpress">
                <div class="honeycomb__hexagon-title">Twig</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--20" data-category="html wordpress">
                <div class="honeycomb__hexagon-title">Themes</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--21" data-category="prototype">
                <div class="honeycomb__hexagon-title">UX Design</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--22" data-category="">
                <div class="honeycomb__hexagon-title">NodeJS</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--23" data-category="">
                <div class="honeycomb__hexagon-title">Themes</div>
            </div>
            <div class="honeycomb__hexagon honeycomb__hexagon--24" data-category="">
                <div class="honeycomb__hexagon-title">Analyze</div>
            </div>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "class": "js-honeycomb",
  "data": {
    "categories": [
      {
        "name": "html",
        "icon": "apps",
        "title": "web apps",
        "content": "JSON, Angular JS, BEM, TWIG, NODEJS, PHP, Themes, Aurelia <a href='#'>...read more</a>"
      },
      {
        "name": "wordpress",
        "icon": "web",
        "title": "websites",
        "content": "JSON, Angular JS, BEM, TWIG, NODEJS, PHP, Themes, Aurelia <a href='#'>...read more</a>"
      },
      {
        "name": "prototype",
        "icon": "mvp",
        "title": "MVP",
        "content": "JSON, Angular JS, BEM, TWIG, NODEJS, PHP, Themes, Aurelia <a href='#'>...read more</a>"
      }
    ],
    "terms": [
      {
        "title": "Twig",
        "category": [
          "html",
          "wordpress"
        ]
      },
      {
        "title": "Themes",
        "category": [
          "html",
          "wordpress"
        ]
      },
      {
        "title": "UX Design",
        "category": [
          "prototype"
        ]
      },
      {
        "title": "NodeJS"
      },
      {
        "title": "Bootstrap"
      },
      {
        "title": "Analyze"
      },
      {
        "title": "BEM",
        "category": [
          "html",
          "wordpress"
        ]
      },
      {
        "title": "PHP",
        "category": [
          "wordpress"
        ]
      },
      {
        "title": "ES2016"
      },
      {
        "title": "Bower"
      },
      {
        "title": "SVG animations"
      },
      {
        "title": "Themes",
        "category": [
          "html",
          "wordpress"
        ]
      },
      {
        "title": "Analyze"
      },
      {
        "title": "BEM",
        "category": [
          "html",
          "wordpress"
        ]
      },
      {
        "title": "PHP"
      },
      {
        "title": "ES2016",
        "category": [
          "wordpress"
        ]
      },
      {
        "title": "SVG animations"
      },
      {
        "title": "Themes"
      },
      {
        "title": "Twig",
        "category": [
          "html",
          "wordpress"
        ]
      },
      {
        "title": "Themes",
        "category": [
          "html",
          "wordpress"
        ]
      },
      {
        "title": "UX Design",
        "category": [
          "prototype"
        ]
      },
      {
        "title": "NodeJS"
      },
      {
        "title": "Themes"
      },
      {
        "title": "Analyze"
      }
    ]
  }
}
  • Handle: @honeycomb--default
  • Tags:
  • Preview:
  • Filesystem Path: src/patterns/components/honeycomb/honeycomb.twig
  • References (1): @icon
  • Referenced by (1): @keywords