NounCSS

NounCSS allows you to compose a custom Noun using just HTML/CSS.

Add the required CSS to your site.


<link rel="stylesheet" href="https://noun-css.netlify.app/noun.min.css">

Use the <noun></noun> tag and compose your Noun.

Examples

Default Noun


<noun></noun>

Using Trait Names


<noun
  background="cool"
  body="grayscale-9"
  accessory="bling-anchor"
  head="basketball"
  glasses="yellow-orange-multi"
></noun>
      

<noun
  background="warm"
  body="blue-sky"
  accessory="txt-yay"
  head="zebra"
  glasses="frog-green"
></noun>
      

<noun
  background="cool"
  body="rust"
  accessory="axe"
  head="moose"
  glasses="guava"
></noun>

Using Trait IDs (Starting at 0)


<noun
  background="0"
  body="3"
  accessory="12"
  head="154"
  glasses="12"
></noun>
      

<noun
  background="1"
  body="8"
  accessory="47"
  head="212"
  glasses="19"
></noun>
      

<noun
  background="0"
  body="16"
  accessory="87"
  head="221"
  glasses="3"
></noun>

Custom BG Colors (Using Tailwind CSS Classes)


<noun
  class="bg-red-500"
  body="yellow"
  accessory="gradient-checkerdisco"
  head="unicorn"
  glasses="red"
></noun>
      

<noun
  class="bg-green-500"
  body="rust"
  accessory="txt-lol"
  head="taxi"
  glasses="watermelon"
></noun>
      

<noun
  class="bg-blue-500"
  body="magenta"
  accessory="stripes-red-cold"
  head="void"
  glasses="grey-light"
></noun>