Logos

FloSports Brands and Co-Brands

Modifiers

Sizing

Logos inherit width and height from the parent container, so the parent container can set the SVG dimensions.

<div class="row row-cols-6 align-items-center">  <!-- reference size in parent -->
  <svg>
    <use xlink:href="#flofc-hawk" />
  </svg>
</div>

<div class="row row-cols-12 align-items-center"> 
  <svg class="h-50">  <!-- reference size in parent -->
    <use xlink:href="#flofc-hawk" />
  </svg>
</div>

<div class="row row-cols-2 align-items-center text-800"> <!-- reference size in parent -->
  <svg>
    <use xlink:href="#flofc-hawk" />
  </svg>
</div> 

FloSports

There are four color variations of the corporate logos.

dark

white

alternate white

alternate dark

Multiple Colors

Targeted class are available to color the hawk or text independent of each other. In the FloSports logo below class="flo-svg-logo-graphic" is targeted to color the hawk red independently of the logo title.

  • class="flo-svg-logo-title" will change the color of the text
  • class="flo-svg-logo-graphic" will change the color of the icon(hawk)

Brands

FloSports network of brands (verticals).

flobaseball-hawk

flobikes-hawk

flobowling-hawk

flocheer-hawk

flocombat-hawk

flodance-hawk

floelite-hawk

flofc-hawk

flofootball-hawk

flograppling-hawk

flogymnastics-hawk

flohockey-hawk

flohoops-hawk

flolive-hawk

flomarching-hawk

floracing-hawk

florodeo-hawk

flosoftball-hawk

floswimming-hawk

flotrack-hawk

flovoice-hawk

flovolleyball-hawk

flowrestling-hawk

Live player

A one color white logo is used on the Live player.

flo_hawk

Co-brands

Other brands part of FloSports network

Varsity

Varsity has one color and multiple color SVG options.

One color SVG

  • varsity_stacked.svg
  • varsity_white_logo.svg

Multiple Color SVG These have additional class to control color independently.

  • varsity_stacked_color.svg
    • change the V color with class="varsity_stacked_v"
    • change teh pill color with class="varsity_stacked_pill"
    • change the text color with class="varsity_stacked_pill_text"
  • varsity_logo
    • change the V color with class="varsity_logo_v"
    • change the text color with class="varsity_logo_text"
  • varsity_logo_pill
    • change the V color with class="varsity_logo_pill_v
    • change the text with class="varsity_logo_pill_text"
    • change the pill with class="varsity_logo_pill"

varsity_stacked

varsity_white_logo

varsity_stacked_color

varsity_logo

varsity_logo_pill

Live player

A one color white logo is used on the Live player.

varsity_white_logo

MileSplit

milesplit

Dirt on Dirt

Co-brand not part of design system. DirtOnDirt.com