Component Display

Github
Display
Display--[fsX] is applied to an h1 element.
                 


<h1 class="Display--fs100">Display--fs100</h1>

<h1 class="Display--fs200">Display--fs200</h1>

<h1 class="Display--fs300">Display--fs300</h1>

<h1 class="Display--fs400">Display--fs400</h1>

<h1 class="Display--fs500">Display--fs500</h1>

<h1 class="Display--fs600">Display--fs600</h1>

<h1 class="Display--fs700">Display--fs700</h1>

<h1 class="Display--fs800">Display--fs800</h1>

<h1 class="Display--fs900">Display--fs900</h1>


       
     
Then the Display--[fsX] CSS is applied to the h1 element.

Display--fs100

Display--fs200

Display--fs300

Display--fs400

Display--fs500

Display--fs600

Display--fs700

Display--fs800

Display--fs900

Display
Display--[fsX][fwY] is applied to an h1 element.
                 



<h1 class="Display--fs100fw100">Display--fs100fw100</h1>

<h1 class="Display--fs200fw100">Display--fs200fw100</h1>

<h1 class="Display--fs300fw100">Display--fs300fw100</h1>

<h1 class="Display--fs400fw100">Display--fs400fw100</h1>

<h1 class="Display--fs500fw100">Display--fs500fw100</h1>

<h1 class="Display--fs600fw100">Display--fs600fw100</h1>

<h1 class="Display--fs700fw100">Display--fs700fw100</h1>

<h1 class="Display--fs800fw100">Display--fs800fw100</h1>

<h1 class="Display--fs900fw100">Display--fs900fw100</h1>



<h1 class="Display--fs100fw200">Display--fs100fw200</h1>

<h1 class="Display--fs200fw200">Display--fs200fw200</h1>

<h1 class="Display--fs300fw200">Display--fs300fw200</h1>

<h1 class="Display--fs400fw200">Display--fs400fw200</h1>

<h1 class="Display--fs500fw200">Display--fs500fw200</h1>

<h1 class="Display--fs600fw200">Display--fs600fw200</h1>

<h1 class="Display--fs700fw200">Display--fs700fw200</h1>

<h1 class="Display--fs800fw200">Display--fs800fw200</h1>

<h1 class="Display--fs900fw200">Display--fs900fw200</h1>



<h1 class="Display--fs100fw300">Display--fs100fw300</h1>

<h1 class="Display--fs200fw300">Display--fs200fw300</h1>

<h1 class="Display--fs300fw300">Display--fs300fw300</h1>

<h1 class="Display--fs400fw300">Display--fs400fw300</h1>

<h1 class="Display--fs500fw300">Display--fs500fw300</h1>

<h1 class="Display--fs600fw300">Display--fs600fw300</h1>

<h1 class="Display--fs700fw300">Display--fs700fw300</h1>

<h1 class="Display--fs800fw300">Display--fs800fw300</h1>

<h1 class="Display--fs900fw300">Display--fs900fw300</h1>



<h1 class="Display--fs100fw400">Display--fs100fw400</h1>

<h1 class="Display--fs200fw400">Display--fs200fw400</h1>

<h1 class="Display--fs300fw400">Display--fs300fw400</h1>

<h1 class="Display--fs400fw400">Display--fs400fw400</h1>

<h1 class="Display--fs500fw400">Display--fs500fw400</h1>

<h1 class="Display--fs600fw400">Display--fs600fw400</h1>

<h1 class="Display--fs700fw400">Display--fs700fw400</h1>

<h1 class="Display--fs800fw400">Display--fs800fw400</h1>

<h1 class="Display--fs900fw400">Display--fs900fw400</h1>



<h1 class="Display--fs100fw500">Display--fs100fw500</h1>

<h1 class="Display--fs200fw500">Display--fs200fw500</h1>

<h1 class="Display--fs300fw500">Display--fs300fw500</h1>

<h1 class="Display--fs400fw500">Display--fs400fw500</h1>

<h1 class="Display--fs500fw500">Display--fs500fw500</h1>

<h1 class="Display--fs600fw500">Display--fs600fw500</h1>

<h1 class="Display--fs700fw500">Display--fs700fw500</h1>

<h1 class="Display--fs800fw500">Display--fs800fw500</h1>

<h1 class="Display--fs900fw500">Display--fs900fw500</h1>



<h1 class="Display--fs100fw600">Display--fs100fw600</h1>

<h1 class="Display--fs200fw600">Display--fs200fw600</h1>

<h1 class="Display--fs300fw600">Display--fs300fw600</h1>

<h1 class="Display--fs400fw600">Display--fs400fw600</h1>

<h1 class="Display--fs500fw600">Display--fs500fw600</h1>

<h1 class="Display--fs600fw600">Display--fs600fw600</h1>

<h1 class="Display--fs700fw600">Display--fs700fw600</h1>

<h1 class="Display--fs800fw600">Display--fs800fw600</h1>

<h1 class="Display--fs900fw600">Display--fs900fw600</h1>



<h1 class="Display--fs100fw700">Display--fs100fw700</h1>

<h1 class="Display--fs200fw700">Display--fs200fw700</h1>

<h1 class="Display--fs300fw700">Display--fs300fw700</h1>

<h1 class="Display--fs400fw700">Display--fs400fw700</h1>

<h1 class="Display--fs500fw700">Display--fs500fw700</h1>

<h1 class="Display--fs600fw700">Display--fs600fw700</h1>

<h1 class="Display--fs700fw700">Display--fs700fw700</h1>

<h1 class="Display--fs800fw700">Display--fs800fw700</h1>

<h1 class="Display--fs900fw700">Display--fs900fw700</h1>



<h1 class="Display--fs100fw800">Display--fs100fw800</h1>

<h1 class="Display--fs200fw800">Display--fs200fw800</h1>

<h1 class="Display--fs300fw800">Display--fs300fw800</h1>

<h1 class="Display--fs400fw800">Display--fs400fw800</h1>

<h1 class="Display--fs500fw800">Display--fs500fw800</h1>

<h1 class="Display--fs600fw800">Display--fs600fw800</h1>

<h1 class="Display--fs700fw800">Display--fs700fw800</h1>

<h1 class="Display--fs800fw800">Display--fs800fw800</h1>

<h1 class="Display--fs900fw800">Display--fs900fw800</h1>



<h1 class="Display--fs100fw900">Display--fs100fw900</h1>

<h1 class="Display--fs200fw900">Display--fs200fw900</h1>

<h1 class="Display--fs300fw900">Display--fs300fw900</h1>

<h1 class="Display--fs400fw900">Display--fs400fw900</h1>

<h1 class="Display--fs500fw900">Display--fs500fw900</h1>

<h1 class="Display--fs600fw900">Display--fs600fw900</h1>

<h1 class="Display--fs700fw900">Display--fs700fw900</h1>

<h1 class="Display--fs800fw900">Display--fs800fw900</h1>

<h1 class="Display--fs900fw900">Display--fs900fw900</h1>



       
     
Then the Display--[fsX][fwY] CSS is applied to the h1 element.

Display--fs100fw100

Display--fs200fw100

Display--fs300fw100

Display--fs400fw100

Display--fs500fw100

Display--fs600fw100

Display--fs700fw100

Display--fs800fw100

Display--fs900fw100

Display--fs100fw200

Display--fs200fw200

Display--fs300fw200

Display--fs400fw200

Display--fs500fw200

Display--fs600fw200

Display--fs700fw200

Display--fs800fw200

Display--fs900fw200

Display--fs100fw300

Display--fs200fw300

Display--fs300fw300

Display--fs400fw300

Display--fs500fw300

Display--fs600fw300

Display--fs700fw300

Display--fs800fw300

Display--fs900fw300

Display--fs100fw400

Display--fs200fw400

Display--fs300fw400

Display--fs400fw400

Display--fs500fw400

Display--fs600fw400

Display--fs700fw400

Display--fs800fw400

Display--fs900fw400

Display--fs100fw500

Display--fs200fw500

Display--fs300fw500

Display--fs400fw500

Display--fs500fw500

Display--fs600fw500

Display--fs700fw500

Display--fs800fw500

Display--fs900fw500

Display--fs100fw600

Display--fs200fw600

Display--fs300fw600

Display--fs400fw600

Display--fs500fw600

Display--fs600fw600

Display--fs700fw600

Display--fs800fw600

Display--fs900fw600

Display--fs100fw700

Display--fs200fw700

Display--fs300fw700

Display--fs400fw700

Display--fs500fw700

Display--fs600fw700

Display--fs700fw700

Display--fs800fw700

Display--fs900fw700

Display--fs100fw800

Display--fs200fw800

Display--fs300fw800

Display--fs400fw800

Display--fs500fw800

Display--fs600fw800

Display--fs700fw800

Display--fs800fw800

Display--fs900fw800

Display--fs100fw900

Display--fs200fw900

Display--fs300fw900

Display--fs400fw900

Display--fs500fw900

Display--fs600fw900

Display--fs700fw900

Display--fs800fw900

Display--fs900fw900

Display--fs500fw500-md
Display--fs500fw500-md is applied to an h1 element.
                 

<h1 class="md-Display--fs500fw500">Display--fs500fw500-md</h1>

       
     
Then the Display--fs500fw500-md component is rendered for medium size viewports.

Display--fs500fw500-md