## JBrowse HTML feature classes

Here are some of the feature classes built into JBrowse. These are what you specify for the --cssclass option to gff-to-json.pl, or for the "class" value or "subfeatureClasses" map in the config file. You can also easily add your own; look in the genome.css file for examples.

### Feature classes

Features with no subfeatures will be drawn as rectangles like those below, depending on their `cssClass` configuration.

`cssClass` | displayed
--- | ---
feature |
feature2 |
feature3 |
feature4 |
feature5 |
match_part |
exon |
est |
cds |
loops |
helix |
dblhelix |
ibeam |
transcript-exon |
transcript-UTR |
transcript-CDS |
triangle hgred |
triangle hgblue |
hourglass hgred |
hourglass hgblue |
generic_parent |
generic_part_a |

### Two-level Features

To show features with subfeatures, JBrowse draws the elements for the subfeatures on top of the element for the parent feature. The parent feature's class is set with `className` and the classes for the subfeatures are set with `subfeatureClasses`.

data | config | displayed
--- | --- | ---

parent feature with two subfeatures of type 'exon'

    "style": {
      "className": "transcript",
      "arrowheadClass": "transcript-arrowhead",
      "subfeatureClasses": {
          "exon": "transcript-exon"
        }
     }

parent feature with two subfeatures of type 'CDS'

    "style": {
      "className": "transcript",
      "arrowheadClass": "transcript-arrowhead",
      "subfeatureClasses": {
          "CDS": "transcript-CDS"
        }
     }

parent feature with two subfeatures of type 'match_part'

    "style": {
      "className": "generic_parent",
      "arrowheadClass": "arrowhead",
      "subfeatureClasses": {
          "match_part": "match_part"
        }
     }

parent feature with two subfeatures of type 'match_part'

    "style": {
      "className": "generic_parent",
      "arrowheadClass": "arrowhead",
      "subfeatureClasses": {
          "match_part": "generic_part_a"
        }
     }