MentorKit Pattern Library

Icon

  • HTML
  • View
  • Context
  • Info
  • Notes
<svg class="">
    <use href="/front-end/sprite.svg#"></use>
</svg>
<svg class="{{modifier}}" {% if ariaHidden %}aria-hidden="true"{% endif %}>
    <use href="{{ 'sprite.svg' | asset }}#{{ name }}"></use>
</svg>
{
  "siteName": "MentorKit Pattern Library",
  "navItems": [
    {
      "menu_item": "About Us"
    },
    {
      "menu_item": "Testimonials"
    },
    {
      "menu_item": "Our Team"
    },
    {
      "menu_item": "Contact Us"
    }
  ]
}
  • Handle: @icon
  • Preview:
    • With layout
    • Component only
  • Filesystem Path: fractal\base\_icon.nunjucks
  • Referenced by (32): @icons, @date-input, @icon-link, @search-button, @share-button, @accordion-component, @accordion-component--two-columns, @card-carousel-component, @card-carousel-component--contrast-bg, @link-component, @media-content-panel-style-1-component, @media-content-panel-style-1-component--flipped, @media-content-panel-style-1-component--contrast-bg, @media-content-panel-style-1-component--contrast-bg-full-width, @media-content-panel-style-1-component--video, @media-content-panel-style-1-component--modal, @media-content-panel-style-1-component--with-sub-heading, @media-content-panel-style-1-component--two-buttons, @quote-component, @search-modal, @summary-card-list-component, @summary-card-list-component--counters, @summary-card-list-component--2-items, @summary-card-list-component--4-items, @summary-card-list-component--contrast-bg, @video-modal, @breadcrumbs, @global-footer, @mega-dropdown, @navigation, @single-dropdown, @500

No notes defined.

Pattern Library

    • Colour Palette
    • Icons
      • Button
        • Content Card
        • Image Card
        • Mega Card
      • Footer Logo
      • Headline
      • Icon Link
      • Image Frame
      • Logo
      • Share Button
      • Tag
      • Accordion Component
      • Card Carousel Component
      • Cta Card List Style 1 Component
      • Cta Card List Style 2 Component
      • Featured Article Card List Component
      • Form Component
      • Html Component
      • Image List Component
      • Link Component
      • Media Content Panel Style 1 Component
      • Media Content Panel Style 2 Component
      • Multi Panel Cta Component
      • One Panel Cta Component
      • Promo Content Card Component
      • Quote Component
      • Rich Text Component
      • Summary Card List Component
      • Article Sign Off Component
      • Article Listing
      • Event Listing
      • Product Listing
      • Search Listing
      • Breadcrumbs
      • Global Footer
      • Global Header
        • Hero Variant 1
        • Hero Variant 2
    • About Us
    • Article Detail
    • Article List
    • Contact Us
    • Event List
    • Index
    • Products
    • Search Results
      • 500

documentation

  • Working With CSS And HTML
  • Working With Javascript
  • Working With Vue
  • Working With Fractal

Information

Built on:
11/24/2025

Button Variants

  • Alpha
  • Bravo
  • Charlie
  • Alpha Ghost
  • Bravo Ghost
  • Charlie Ghost
  • Disabled
  • Loading

Content Card Variants

  • Default
  • Image First
  • Center Text
  • Horizontal
  • Tags

Image Card Variants

  • Default
  • Large

Headline Variants

  • Default
  • Left Aligned
  • Right Aligned

Image Frame Variants

  • 16-10 Aspect Ratio Crop
  • 16 9 Aspect Ratio Crop
  • 16 12 Aspect Ratio Crop
  • 1 1 Aspect Ratio Crop

Accordion Component Variants

  • Default
  • Two Columns

Card Carousel Component Variants

  • Default
  • Contrast Bg

Featured Article Card List Component Variants

  • Default
  • Contrast Bg

Form Component Variants

  • Default
  • Contrast Bg

Image List Component Variants

  • Default
  • 2
  • 3
  • 10 16 Aspect Ratio 3 Items Portrait
  • 10 16 Aspect Ratio 2 Items Portrait
  • 10 16 Aspect Ratio 1 Items Portrait

Media Content Panel Style 1 Component Variants

  • Default
  • Flipped
  • Contrast Bg
  • Contrast Bg Full Width
  • Video
  • Modal
  • With Sub Heading
  • Two Buttons

Media Content Panel Style 2 Component Variants

  • Default
  • Flipped
  • Video
  • Alpha Colour
  • Bravo Colour
  • Charlie Colour

One Panel Cta Component Variants

  • Default
  • Background Image
  • Alpha Colour
  • Bravo Colour
  • Charlie Colour

Rich Text Component Variants

  • Default
  • Contrast Bg
  • 2 Col
  • 3 Col

Summary Card List Component Variants

  • Default
  • Counters
  • 2 Items
  • 4 Items
  • Contrast Bg

Hero Variant 1 Variants

  • Default
  • Video
  • Alpha Colour
  • Bravo Colour
  • Charlie Colour
  • No Image

Hero Variant 2 Variants

  • Default
  • Video
  • Alpha Colour
  • Bravo Colour
  • Charlie Colour