links.json

{
  "by_id": {
    "home": {
      "name": "Home",
      "icon": "fa-solid fa-house",
      "path": "/"
    },
    "docs": {
      "name": "Docs",
      "long_name": "Documentation",
      "subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
      "color": "primary",
      "icon": "fa-solid fa-book",
      "path": "/documentation/"
    },
    "code": {
      "name": "Templates",
      "subtitle": "Bulma templates to get started",
      "color": "link",
      "icon": "fa-solid fa-code",
      "path": "/bulma-templates/"
    },
    "blog": {
      "name": "Bulma Blog",
      "subtitle": "Stay updated with new features",
      "color": "rss",
      "icon": "fa-solid fa-rss",
      "path": "/blog/"
    },
    "expo": {
      "name": "Expo",
      "subtitle": "Official Bulma showcase",
      "icon": "fa-solid fa-star",
      "color": "expo",
      "path": "/expo/"
    },
    "love": {
      "name": "Love",
      "subtitle": "Fans of Bulma around the world",
      "color": "love",
      "icon": "fa-solid fa-heart",
      "path": "/love/"
    },
    "github": {
      "name": "GitHub",
      "subtitle": "Open Source on GitHub",
      "icon_only": true,
      "color": "github",
      "icon": "fa-brands fa-github-alt fa-lg",
      "href": "https://github.com/jgthms/bulma"
    },
    "twitter": {
      "name": "Twitter",
      "subtitle": "Follow me on Twitter",
      "icon_only": true,
      "color": "twitter",
      "icon": "fa-brands fa-twitter fa-lg",
      "href": "https://twitter.com/jgthms"
    },
    "sponsor": {
      "name": "Sponsor",
      "subtitle": "Sponsor Bulma and Open Source via <a href=\"https://www.patreon.com/jgthms\" target=\"_blank\">Patreon</a> and <a href=\"https://github.com/sponsors/jgthms\" target=\"_blank\">GitHub</a>",
      "color": "patreon",
      "icon": "fa-brands fa-patreon",
      "path": "/become-a-bulma-sponsor/"
    },
    "brand": {
      "name": "Bulma Brand",
      "subtitle": "The official Bulma logos",
      "color": "primary",
      "icon": "fa-solid fa-medal",
      "path": "/brand/"
    },
    "backers": {
      "id": "backers",
      "name": "Backers",
      "title": "Backers",
      "color": "patreon",
      "icon": "fa-solid fa-hand-holding-heart",
      "path": "/backers/",
      "subtitle": "Everyone who is supporting Bulma via Patreon and GitHub",
      "description": "Everyone who is supporting Bulma"
    },
    "bootstrap": {
      "name": "Coming from Bootstrap",
      "subtitle": "See how Bulma is an alternative to Bootstrap",
      "icon": "fa-solid fa-exchange-alt",
      "color": "bootstrap",
      "path": "/alternative-to-bootstrap/"
    },
    "extensions": {
      "name": "Bulma Extensions",
      "title": "Extensions",
      "subtitle": "Side projects to enhance Bulma",
      "icon": "fa-solid fa-plug",
      "color": "extensions",
      "path": "/extensions/"
    },
    "made-with-bulma": {
      "name": "Made with Bulma",
      "title": "Badge",
      "subtitle": "The official community badge",
      "icon": "fa-solid fa-certificate",
      "color": "warning",
      "path": "/made-with-bulma/"
    },
    "patreon-backers": {
      "name": "Patreon and GitHub backers",
      "subtitle": "Everyone who is supporting Bulma",
      "icon": "fa-solid fa-patreon",
      "color": "patreon",
      "path": "/backers/"
    },
    "start": {
      "name": "Start",
      "subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
      "color": "start",
      "icon": "fa-solid fa-arrow-right",
      "path": "/documentation/start/"
    },
    "start-overview": {
      "name": "Overview",
      "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
      "color": "start",
      "icon": "fa-regular fa-eye",
      "path": "/documentation/start/overview/"
    },
    "start-installation": {
      "name": "Installation",
      "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
      "color": "start",
      "icon": "fa-solid fa-download",
      "path": "/documentation/start/installation/"
    },
    "start-alternative-versions": {
      "name": "Alternative Versions",
      "subtitle": "Use one of the <strong>pre-built</strong> alternative versions of Bulma",
      "color": "start",
      "icon": "fa-solid fa-download",
      "path": "/documentation/start/alternative-versions/"
    },
    "start-syntax": {
      "name": "Syntax",
      "subtitle": "<strong>How to use</strong> Bulma components and their alternative styles",
      "color": "start",
      "icon": "fa-solid fa-code",
      "path": "/documentation/start/syntax/"
    },
    "start-modular": {
      "name": "Modularity",
      "subtitle": "Just import what you <strong>need</strong>",
      "color": "start",
      "icon": "fa-solid fa-cubes",
      "path": "/documentation/start/modular/"
    },
    "start-responsiveness": {
      "name": "Responsiveness",
      "subtitle": "Bulma is a <strong>mobile-first</strong> framework",
      "color": "start",
      "icon": "fa-solid fa-arrows-alt-h",
      "path": "/documentation/start/responsiveness/"
    },
    "start-migrating": {
      "name": "Migrating to v1",
      "subtitle": "How to <strong>migrate</strong> to Bulma v1",
      "color": "start",
      "icon": "fa-solid fa-arrow-up",
      "path": "/documentation/start/migrating-to-v1/"
    },
    "features": {
      "name": "Features",
      "subtitle": "What makes Bulma <strong>special</strong>",
      "color": "danger",
      "icon": "fa-solid fa-wand-magic-sparkles",
      "path": "/documentation/features/"
    },
    "features-auto-color": {
      "name": "Automatic Color",
      "subtitle": "Change the color of your text automatically based on the background",
      "color": "danger",
      "icon": "fa-solid fa-droplet",
      "path": "/documentation/features/auto-color/"
    },
    "features-color-palettes": {
      "name": "Color Palettes",
      "subtitle": "Input <strong>1 color</strong>, Receive <strong>dozens</strong> of different <strong>shades</strong> for that color",
      "color": "danger",
      "icon": "fa-solid fa-swatchbook",
      "path": "/documentation/features/color-palettes/"
    },
    "features-css-variables": {
      "name": "CSS Variables",
      "subtitle": "Customizing with <strong>CSS only</strong>",
      "color": "danger",
      "icon": "fa-brands fa-css3",
      "path": "/documentation/features/css-variables/"
    },
    "features-dark-mode": {
      "name": "Dark Mode",
      "subtitle": "Bulma comes with an <strong>automatic Dark mode</strong>",
      "color": "danger",
      "icon": "fa-solid fa-moon",
      "path": "/documentation/features/dark-mode/"
    },
    "features-skeletons": {
      "name": "Skeletons",
      "subtitle": "Transform almost any Bulma component into a <strong>skeleton loader</strong>, or use one of the pre-built utility elements",
      "color": "danger",
      "icon": "fa-solid fa-spinner",
      "path": "/documentation/features/skeletons/"
    },
    "features-smart-columns": {
      "name": "Smart Columns",
      "subtitle": "The <strong>simplest</strong> column system",
      "color": "danger",
      "icon": "fa-solid fa-chart-simple fa-flip-vertical",
      "path": "/documentation/features/smart-columns/"
    },
    "features-smart-grid": {
      "name": "Smart Grid",
      "subtitle": "A <strong>responsive 2D</strong> CSS Grid",
      "color": "danger",
      "icon": "fa-solid fa-grip",
      "path": "/documentation/features/smart-grid/"
    },
    "features-themes": {
      "name": "Themes",
      "subtitle": "How Bulma styles its components with <strong>CSS variables</strong>",
      "color": "danger",
      "icon": "fa-solid fa-palette",
      "path": "/documentation/features/themes/"
    },
    "sass": {
      "name": "Sass Utilities",
      "subtitle": "<strong>Sass tools</strong> used by Bulma and available for you",
      "color": "primary",
      "icon": "fa-brands fa-sass",
      "path": "/documentation/sass/"
    },
    "sass-extends": {
      "name": "Extends",
      "subtitle": "Sass extends to keep your <strong>CSS code DRY</strong>",
      "color": "sass",
      "icon": "fa-solid fa-percentage",
      "path": "/documentation/sass/extends/"
    },
    "sass-form-control-mixins": {
      "name": "Form Control mixins",
      "subtitle": "<strong>Mixins</strong> for Bulma's buttons and form controls",
      "color": "sass",
      "icon": "fa-regular fa-hand-pointer",
      "path": "/documentation/sass/form-control-mixins/"
    },
    "sass-functions": {
      "name": "Functions",
      "subtitle": "<strong>Utility functions</strong> to calculate colors and other values",
      "color": "orange",
      "icon": "fa-solid fa-code",
      "path": "/documentation/sass/functions/"
    },
    "sass-mixins": {
      "name": "Mixins",
      "subtitle": "Utility mixins for custom elements and other CSS helpers",
      "color": "sass",
      "icon": "fa-solid fa-at",
      "path": "/documentation/sass/mixins/"
    },
    "sass-responsive-mixins": {
      "name": "Responsive mixins",
      "subtitle": "Mixins that allows you to define different styles for each screen size",
      "color": "sass",
      "icon": "fa-solid fa-arrows-alt-h",
      "path": "/documentation/sass/responsive-mixins/"
    },
    "customize": {
      "name": "Customize",
      "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
      "color": "sass",
      "icon": "fa-solid fa-paint-brush",
      "path": "/documentation/customize/"
    },
    "customize-concepts": {
      "name": "Concepts",
      "subtitle": "What makes Bulma <strong>customizable</strong>",
      "color": "info",
      "icon": "fa-solid fa-lightbulb",
      "path": "/documentation/customize/concepts/"
    },
    "customize-with-sass": {
      "name": "With Sass",
      "subtitle": "Customize Bulma with Sass variables",
      "color": "sass",
      "icon": "fa-brands fa-sass",
      "path": "/documentation/customize/with-sass/"
    },
    "customize-with-modular-sass": {
      "name": "With Modular Sass",
      "subtitle": "Import <strong>only</strong> what you need and <strong>customize</strong> it",
      "color": "sass",
      "icon": "fa-solid fa-cubes",
      "path": "/documentation/customize/with-modular-sass/"
    },
    "customize-with-css-variables": {
      "name": "With CSS Variables",
      "subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization",
      "color": "grey",
      "icon": "fa-brands fa-css3",
      "path": "/documentation/customize/with-css-variables/"
    },
    "customize-sass-list": {
      "name": "List of Sass variables",
      "subtitle": "All <strong>Sass</strong> variables defined by Bulma",
      "color": "grey",
      "icon": "fa-solid fa-list",
      "path": "/documentation/customize/list-of-sass-variables/"
    },
    "library": {
      "name": "CSS Library",
      "subtitle": "The core of the Bulma framework",
      "color": "link",
      "icon": "fa-solid fa-cubes",
      "path": "/documentation/library/"
    },
    "columns": {
      "name": "Columns",
      "subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
      "color": "link",
      "icon": "fa-solid fa-columns",
      "path": "/documentation/columns/"
    },
    "columns-basics": {
      "name": "Basics",
      "subtitle": "A simple way to build <strong>responsive columns</strong>",
      "color": "link",
      "icon": "fa-solid fa-columns",
      "path": "/documentation/columns/basics/"
    },
    "columns-sizes": {
      "name": "Sizes",
      "subtitle": "Define the <strong>size</strong> of each column <strong>individually</strong>",
      "color": "success",
      "icon": "fa-solid fa-up-right-and-down-left-from-center",
      "path": "/documentation/columns/sizes/"
    },
    "columns-responsiveness": {
      "name": "Responsiveness",
      "subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>",
      "color": "primary",
      "icon": "fa-solid fa-arrows-left-right",
      "path": "/documentation/columns/responsiveness/"
    },
    "columns-nesting": {
      "name": "Nesting",
      "subtitle": "A simple way to build <strong>responsive columns</strong>",
      "color": "danger",
      "icon": "fa-solid fa-sitemap",
      "path": "/documentation/columns/nesting/"
    },
    "columns-gap": {
      "name": "Gap",
      "subtitle": "Customize the <strong>gap</strong> between the columns",
      "color": "info",
      "icon": "fa-solid fa-arrows-left-right-to-line",
      "path": "/documentation/columns/gap/"
    },
    "columns-options": {
      "name": "Options",
      "subtitle": "Design different <strong>types</strong> of column layouts",
      "color": "grey",
      "icon": "fa-solid fa-cogs",
      "path": "/documentation/columns/options/"
    },
    "grid": {
      "name": "Grid",
      "subtitle": "A <strong>2 dimensional</strong> layout component",
      "icon": "fa-solid fa-th",
      "path": "/documentation/grid/"
    },
    "grid-smart": {
      "name": "Smart Grid",
      "subtitle": "A <strong>smart</strong> 2D grid with <strong>flexible</strong> columns",
      "icon": "fa-solid fa-lightbulb",
      "path": "/documentation/grid/smart-grid/"
    },
    "grid-fixed": {
      "name": "Fixed Grid",
      "subtitle": "A customizable 2D <strong>fixed</strong> grid",
      "icon": "fa-solid fa-grip",
      "path": "/documentation/grid/fixed-grid/"
    },
    "grid-cells": {
      "name": "Grid Cells",
      "subtitle": "Adjust the width and height of each <strong>individual cell</strong>",
      "icon": "fa-solid fa-square",
      "path": "/documentation/grid/grid-cells/"
    },
    "grid-playground": {
      "name": "Playground",
      "subtitle": "<strong>Try out</strong> the Bulma 2D Grid",
      "icon": "fa-solid fa-code",
      "path": "/documentation/grid/playground/"
    },
    "layout": {
      "name": "Layout",
      "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
      "color": "success",
      "icon": "fa-solid fa-border-none",
      "path": "/documentation/layout/"
    },
    "layout-container": {
      "name": "Container",
      "subtitle": "A simple <strong>container</strong> to center your content horizontally",
      "path": "/documentation/layout/container/",
      "icon": "fa-solid fa-arrows-alt-h"
    },
    "layout-level": {
      "name": "Level",
      "subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
      "path": "/documentation/layout/level/",
      "icon": "fa-solid fa-ruler-horizontal"
    },
    "layout-media": {
      "name": "Media Object",
      "subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
      "path": "/documentation/layout/media-object/",
      "icon": "fa-solid fa-th-list"
    },
    "layout-hero": {
      "name": "Hero",
      "subtitle": "An imposing <strong>hero banner</strong> to showcase something",
      "path": "/documentation/layout/hero/",
      "icon": "fa-solid fa-star"
    },
    "layout-section": {
      "name": "Section",
      "subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading",
      "path": "/documentation/layout/section/",
      "icon": "fa-solid fa-square"
    },
    "layout-footer": {
      "name": "Footer",
      "subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.",
      "path": "/documentation/layout/footer/",
      "icon": "fa-solid fa-window-minimize"
    },
    "form": {
      "name": "Form",
      "subtitle": "The indispensable <strong>form controls</strong>, designed for maximum clarity",
      "color": "link",
      "icon": "fa-solid fa-align-left fa-flip-vertical",
      "path": "/documentation/form/"
    },
    "form-general": {
      "name": "General",
      "subtitle": "All generic <strong>form controls</strong>, designed for consistency",
      "color": "link",
      "icon": "fa-solid fa-keyboard",
      "path": "/documentation/form/general/"
    },
    "form-input": {
      "name": "Input",
      "subtitle": "The <strong>text input</strong> and its variations",
      "color": "link",
      "icon": "fa-solid fa-minus",
      "path": "/documentation/form/input/"
    },
    "form-textarea": {
      "name": "Textarea",
      "subtitle": "The multiline <strong>textarea</strong> and its variations",
      "color": "link",
      "icon": "fa-solid fa-square",
      "path": "/documentation/form/textarea/"
    },
    "form-select": {
      "name": "Select",
      "subtitle": "The browser built-in <strong>select dropdown</strong>, styled accordingly",
      "color": "link",
      "icon": "fa-solid fa-mouse-pointer",
      "path": "/documentation/form/select/"
    },
    "form-checkbox": {
      "name": "Checkbox",
      "subtitle": "The 2-state <strong>checkbox</strong> in its native format",
      "color": "link",
      "icon": "fa-solid fa-check-square",
      "path": "/documentation/form/checkbox/"
    },
    "form-radio": {
      "name": "Radio",
      "subtitle": "The mutually exclusive <strong>radio buttons</strong> in their native format",
      "color": "link",
      "icon": "fa-solid fa-dot-circle",
      "path": "/documentation/form/radio/"
    },
    "form-file": {
      "name": "File",
      "subtitle": "A custom <strong>file upload</strong> input, without JavaScript",
      "color": "link",
      "icon": "fa-solid fa-cloud-upload-alt",
      "path": "/documentation/form/file/"
    },
    "elements": {
      "name": "Elements",
      "subtitle": "Essential interface elements that only require a <strong>single CSS class</strong>",
      "color": "orange",
      "icon": "fa-solid fa-cube",
      "path": "/documentation/elements/"
    },
    "elements-block": {
      "name": "Block",
      "subtitle": "Bulma's most basic spacer <strong>block</strong>",
      "color": "grey",
      "icon": "fa-solid fa-arrows-alt-v",
      "path": "/documentation/elements/block/"
    },
    "elements-box": {
      "name": "Box",
      "subtitle": "A white <strong>box</strong> to contain other elements",
      "color": "grey",
      "icon": "fa-solid fa-square",
      "path": "/documentation/elements/box/"
    },
    "elements-button": {
      "name": "Button",
      "subtitle": "The classic <strong>button</strong>, in different colors, sizes, and states",
      "color": "success",
      "icon": "fa-solid fa-hand-pointer",
      "path": "/documentation/elements/button/"
    },
    "elements-content": {
      "name": "Content",
      "subtitle": "A single class to handle <strong>WYSIWYG</strong> generated content, where only <strong>HTML tags</strong> are available",
      "color": "primary",
      "icon": "fa-solid fa-align-left",
      "path": "/documentation/elements/content/"
    },
    "elements-delete": {
      "name": "Delete",
      "subtitle": "A versatile <strong>delete</strong> cross",
      "color": "danger",
      "icon": "fa-solid fa-times-circle",
      "path": "/documentation/elements/delete/"
    },
    "elements-icon": {
      "name": "Icon",
      "subtitle": "Compatible with all icon font libraries, including <strong>Font Awesome 5</strong>",
      "icon": "fa-solid fa-font-awesome",
      "path": "/documentation/elements/icon/"
    },
    "elements-image": {
      "name": "Image",
      "subtitle": "A container for <strong>responsive images</strong>",
      "color": "sass",
      "icon": "fa-solid fa-image",
      "path": "/documentation/elements/image/"
    },
    "elements-notification": {
      "name": "Notification",
      "subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something",
      "color": "orange",
      "icon": "fa-solid fa-exclamation-triangle",
      "path": "/documentation/elements/notification/"
    },
    "elements-progress": {
      "name": "Progress bars",
      "subtitle": "Native HTML <strong>progress</strong> bars",
      "color": "warning",
      "icon": "fa-solid fa-spinner",
      "path": "/documentation/elements/progress/"
    },
    "elements-table": {
      "name": "Table",
      "subtitle": "The inevitable HTML <strong>table</strong>, with special case cells",
      "color": "info",
      "icon": "fa-solid fa-table",
      "path": "/documentation/elements/table/"
    },
    "elements-tag": {
      "name": "Tag",
      "subtitle": "Small <strong>tag labels</strong> to insert anywhere",
      "color": "success",
      "icon": "fa-solid fa-tag",
      "path": "/documentation/elements/tag/"
    },
    "elements-title": {
      "name": "Title",
      "subtitle": "Simple <strong>headings</strong> to add depth to your page",
      "color": "black",
      "icon": "fa-solid fa-heading",
      "path": "/documentation/elements/title/"
    },
    "components": {
      "name": "Components",
      "subtitle": "Advanced multi-part components with lots of possibilities",
      "color": "danger",
      "icon": "fa-solid fa-cubes",
      "path": "/documentation/components/"
    },
    "components-breadcrumb": {
      "name": "Breadcrumb",
      "subtitle": "A simple <strong>breadcrumb</strong> component to improve your navigation experience",
      "color": "star",
      "icon": "fa-solid fa-ellipsis-h",
      "path": "/documentation/components/breadcrumb/"
    },
    "components-card": {
      "name": "Card",
      "subtitle": "An all-around flexible and composable component",
      "color": "success",
      "icon": "fa-solid fa-id-card",
      "path": "/documentation/components/card/"
    },
    "components-dropdown": {
      "name": "Dropdown",
      "subtitle": "An interactive <strong>dropdown menu</strong> for discoverable content",
      "color": "success",
      "icon": "fa-solid fa-angle-down",
      "path": "/documentation/components/dropdown/"
    },
    "components-menu": {
      "name": "Menu",
      "subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation",
      "icon": "fa-solid fa-bars",
      "path": "/documentation/components/menu/"
    },
    "components-message": {
      "name": "Message",
      "subtitle": "Colored <strong>message</strong> blocks, to emphasize part of your page",
      "color": "info",
      "icon": "fa-solid fa-window-maximize",
      "path": "/documentation/components/message/"
    },
    "components-modal": {
      "name": "Modal",
      "subtitle": "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want",
      "color": "danger",
      "icon": "fa-solid fa-clone",
      "path": "/documentation/components/modal/"
    },
    "components-navbar": {
      "name": "Navbar",
      "subtitle": "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns",
      "color": "primary",
      "icon": "fa-solid fa-minus",
      "path": "/documentation/components/navbar/"
    },
    "components-pagination": {
      "name": "Pagination",
      "subtitle": "A responsive, usable, and flexible <strong>pagination</strong>",
      "color": "orange",
      "icon": "fa-solid fa-caret-square-right",
      "path": "/documentation/components/pagination/"
    },
    "components-panel": {
      "name": "Panel",
      "subtitle": "A composable <strong>panel</strong>, for compact controls",
      "color": "grey-dark",
      "icon": "fa-solid fa-list-alt",
      "path": "/documentation/components/panel/"
    },
    "components-tabs": {
      "name": "Tabs",
      "subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
      "color": "sass",
      "icon": "fa-solid fa-folder",
      "path": "/documentation/components/tabs/"
    },
    "skeletons": {
      "name": "Skeletons",
      "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
      "color": "success",
      "icon": "fa-solid fa-border-none",
      "path": "/documentation/skeletons/"
    },
    "helpers": {
      "name": "Helpers",
      "subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style",
      "color": "success",
      "icon": "fa-brands fa-css3",
      "path": "/documentation/helpers/"
    },
    "helpers-color": {
      "name": "Color",
      "subtitle": "Change the <strong>color</strong> of the text and/or background",
      "color": "success",
      "icon": "fa-solid fa-tint",
      "path": "/documentation/helpers/color-helpers/"
    },
    "helpers-palette": {
      "name": "Color Palette",
      "subtitle": "Use a color's <strong>palette</strong> as text color and/or background",
      "color": "success",
      "icon": "fa-solid fa-swatchbook",
      "path": "/documentation/helpers/palette-helpers/"
    },
    "helpers-css-grid": {
      "name": "CSS Grid",
      "subtitle": "Change the <strong>color</strong> of the text and/or background",
      "color": "success",
      "icon": "fa-solid fa-grip",
      "path": "/documentation/helpers/css-grid-helpers/"
    },
    "helpers-flexbox": {
      "name": "Flexbox",
      "subtitle": "Helpers for all <strong>Flexbox</strong> properties",
      "color": "success",
      "icon": "fa-regular fa-square",
      "path": "/documentation/helpers/flexbox-helpers/"
    },
    "helpers-positioning": {
      "name": "Positioning",
      "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
      "color": "success-dark",
      "icon": "fa-solid fa-mouse-pointer",
      "path": "/documentation/helpers/spacing-helpers/"
    },
    "helpers-sizing": {
      "name": "Sizing",
      "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
      "color": "success-dark",
      "icon": "fa-solid fa-expand-arrows-alt",
      "path": "/documentation/helpers/spacing-helpers/"
    },
    "helpers-spacing": {
      "name": "Spacing",
      "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
      "color": "success-dark",
      "icon": "fa-solid fa-arrows-alt-h",
      "path": "/documentation/helpers/spacing-helpers/"
    },
    "helpers-typography": {
      "name": "Typography",
      "subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text",
      "color": "success",
      "icon": "fa-solid fa-font",
      "path": "/documentation/helpers/typography-helpers/"
    },
    "helpers-visibility": {
      "name": "Visibility",
      "subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
      "color": "success",
      "icon": "fa-regular fa-eye",
      "path": "/documentation/helpers/visibility-helpers/"
    },
    "helpers-other": {
      "name": "Other",
      "subtitle": "Other useful Bulma helpers",
      "color": "success",
      "icon": "fa-solid fa-ellipsis-h",
      "path": "/documentation/helpers/other-helpers/"
    }
  },
  "navbar": ["docs", "expo", "love", "sponsor"],
  "navbar_icons": ["github", "twitter"],
  "navbar_more": ["made-with-bulma", "backers", "brand", "extensions"],
  "category_ids": [
    "start",
    "features",
    "sass",
    "customize",
    "library",
    "helpers"
  ],
  "pagination_category_ids": [
    "start",
    "features",
    "sass",
    "customize",
    "elements",
    "components",
    "form",
    "columns",
    "grid",
    "layout",
    "helpers"
  ],
  "categories": {
    "start": [
      "start-overview",
      "start-installation",
      "start-alternative-versions",
      "start-syntax",
      "start-modular",
      "start-responsiveness",
      "start-migrating"
    ],
    "features": [
      "features-css-variables",
      "features-themes",
      "features-dark-mode",
      "features-color-palettes",
      "features-skeletons"
    ],
    "sass": [
      "sass-mixins",
      "sass-responsive-mixins",
      "sass-form-control-mixins",
      "sass-extends"
    ],
    "customize": [
      "customize-concepts",
      "customize-with-sass",
      "customize-with-modular-sass",
      "customize-with-css-variables",
      "customize-sass-list"
    ],
    "library": ["columns", "grid", "elements", "components", "form", "layout"],
    "columns": [
      "columns-basics",
      "columns-sizes",
      "columns-responsiveness",
      "columns-nesting",
      "columns-gap",
      "columns-options"
    ],
    "grid": ["grid-smart", "grid-fixed", "grid-cells", "grid-playground"],
    "elements": [
      "elements-block",
      "elements-box",
      "elements-button",
      "elements-content",
      "elements-delete",
      "elements-icon",
      "elements-image",
      "elements-notification",
      "elements-progress",
      "elements-table",
      "elements-tag",
      "elements-title"
    ],
    "components": [
      "components-breadcrumb",
      "components-card",
      "components-dropdown",
      "components-menu",
      "components-message",
      "components-modal",
      "components-navbar",
      "components-pagination",
      "components-panel",
      "components-tabs"
    ],
    "form": [
      "form-general",
      "form-input",
      "form-textarea",
      "form-select",
      "form-checkbox",
      "form-radio",
      "form-file"
    ],
    "layout": [
      "layout-container",
      "layout-hero",
      "layout-section",
      "layout-level",
      "layout-media",
      "layout-footer"
    ],
    "helpers": [
      "helpers-color",
      "helpers-palette",
      "helpers-spacing",
      "helpers-typography",
      "helpers-visibility",
      "helpers-flexbox",
      "helpers-other"
    ]
  }
}