\---
title: Components
\---
.breezeblocks-components
  %a.js-menu-trigger-breezeblocks.breezeblocks-menu-anchor.fixedsticky
    %img{alt: "Menu icon", src: "/images/menu.png"}/
  .js-menu-screen-breezeblocks.breezeblocks-menu-screen
  = partial "breezeblocks-hero"
  = partial "breezeblocks-menu"
  #example
    %section#accordion.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Accordion
        .refill-centering= partial "accordion"
      .refill-snippet= code_for("accordion")
    %section#animate.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Animate
        .refill-centering
          = partial "animate"
          = partial "animate_info"
      .refill-snippet= code_for("animate")
    %section#badges.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Badges
        .refill-centering= partial "badges"
      .refill-snippet= code_for("badges")
    %section#breadcrumbs.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Breadcrumbs
        .refill-centering= partial "breadcrumbs"
      .refill-snippet= code_for("breadcrumbs")
    %section#button-group.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Button Group
        .refill-centering= partial "button_group"
      .refill-snippet= code_for("button_group")
    %section#dropdown.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Dropdown
        .refill-centering
          = partial "dropdown"
      .refill-snippet= code_for("dropdown")
    %section#expander.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Expander
        .refill-centering
          = partial "expander"
      .refill-snippet= code_for("expander")
    %section#fade-in.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Fade In
        .refill-centering
          .refill-smaller= partial "fade_in"
      .refill-snippet= code_for("fade_in")
    %section#flashes.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Flashes
        .refill-centering= partial "flashes"
      .refill-snippet= code_for("flashes")
    %section#hover-tile-animation.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Hover Tile Animation
        .refill-centering= partial "hover_tile_animation"
      .refill-snippet= code_for("hover_tile_animation")
    %section#image-gradient.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Image with gradient overlays
        .refill-centering= partial "image_gradient_dynamic"
      .refill-snippet= code_for("image_gradient_dynamic")
    %section#modal.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Modal
        .refill-centering= partial "modal"
      .refill-snippet= code_for("modal")
    %section#pagination.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Pagination
        = partial "pagination"
      .refill-snippet= code_for("pagination")
    %section#parallax.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Parallax
        = partial "parallax"
      .refill-snippet= code_for("parallax")
    %section#progress-bar.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Progress Bars
        .refill-centering
          .refill-smaller= partial "progress_bar"
      .refill-snippet= code_for("progress_bar")
      .breezeblocks-wrapper
        .refill-centering
          .refill-smaller= partial "progress_bar_indication"
      .refill-snippet= code_for("progress_bar_indication")
    %section#ribbon.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Ribbon
        .refill-centering
          = partial "ribbon"
      .refill-snippet= code_for("ribbon")
    %section#video.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Responsive Video Embed
        = partial "video"
      .refill-snippet= code_for("video")
    %section#search-bar.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Search bar
        .refill-centering
          .refill-smaller= partial "search_bar"
      .refill-snippet= code_for("search_bar")
    %section#sliding-menu.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Sliding Menu
        .refill-centering= partial "sliding_menu"
      .refill-snippet= code_for("sliding_menu")
    %section#switch.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Switch
        .refill-centering= partial "switch"
      .refill-snippet= code_for("switch")
    %section#stats.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Stats
        .refill-centering= partial "stats"
      .refill-snippet= code_for("stats")
    %section#textures.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Textures
        = partial "texture-legend"
        = partial "textures"
      .refill-snippet= code_for("textures")
    %section#tooltip.refill
      .breezeblocks-wrapper
        .line-behind-text
          %h6 Tooltip
        .refill-centering= partial "tooltip"
      .refill-snippet= code_for("tooltip")
= partial "breezeblocks-page-scripts"