BFNA Design System

Frame Nav 

<a href="#" class="frame-nav">Frame Nav Default</a>
<a href="#" class="frame-nav frame-nav--democracy">Democracy</a>
<a href="#" class="frame-nav frame-nav--politics-society">Politics Society</a>
<a href="#" class="frame-nav frame-nav--future-leadership">Future Leadership</a>
<a href="#" class="frame-nav frame-nav--digital-world">Digital World</a>
 
<a href="#" class="frame-nav">Frame Nav Default</a>
<a href="#" class="frame-nav frame-nav--democracy">Democracy</a>
<a href="#" class="frame-nav frame-nav--politics-society">Politics Society</a>
<a href="#" class="frame-nav frame-nav--future-leadership">Future Leadership</a>
<a href="#" class="frame-nav frame-nav--digital-world">Digital World</a>
 
/* No context defined for this component. */
  • Content: 
    .frame-nav {
  --theme-hsl: var(--navy-hsl);
  // Structure
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
  cursor: pointer;
  pointer-events: all;
  // Visuals
  text-decoration: none;
  font-weight: 600;
  color: hsla(var(--navy-hsl), 1);
  font-size: 1rem;
  padding: 23px 40px 24px;
  line-height: 1.62;
  
  &:hover { 
    background-color: hsla(var(--theme-hsl), .1); 
    color: hsla(var(--theme-hsl), 1);
  }

  &:active {
    background-color: hsla(var(--theme-hsl), 1); 
    color: hsla(var(--white-hsl), 1); 
  }
}

.frame-nav {
  &--democracy        { --theme-hsl: var(--green-hsl); }
  &--politics-society { --theme-hsl: var(--yellow-hsl); }
  &--future-leadership   { --theme-hsl: var(--red-hsl); }
  &--digital-world  { --theme-hsl: var(--purple-hsl); }
}
  • URL: /components/raw/frame-nav/frame-nav.scss
  • Filesystem Path: src/components/03-components/frame-nav/frame-nav.scss
  • Size: 798 Bytes

There are no notes for this item.