Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Suspendisse non nisl sit amet velit hendrerit rutrum. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Full Width Background
To make a full width backgound section. Create a section without the max-content-width class and nest the content inside that section with the max-content-width class. This is an example of that layout.
These colors will work both on dark and light themed sections. These change depending on the background class used in the parent.
Default ground-default
contrast-500
contrast-400
tint
tintBright
ruleGray
contrast-300
contrast-200
contrast-100
Display
Title
Title 2
Body 2
Body
Caption
Dark ground-dark
contrast-500
contrast-400
tint
tintBright
ruleGray
contrast-300
contrast-200
contrast-100
Display
Title
Title 2
Body 2
Body
Caption
Masked Images
Because the ground color of the design is not fully white, images masked against a white background should have a semi-opaque overlay added above the image to maintain the masked effect.
A decade ago, we had an idea. Why can’t people use standard IT networks to transmit high quality media? So we set out to do that, and much more. And we created Dante.
Body
.body or p
Dante systems can easily scale from a simple pairing of a console to a computer, to large capacity networks running thousands of audio channels. Because Dante uses logical routes instead of physical point-to-point connections, the network can be expanded and reconfigured at any time with just a few mouse clicks.
Caption
.caption
The SL DI 4 XLR four input Dante preamp is the ideal interface for wireless microphone receivers, and adding mic/line inputs to a Dante system.
Footnote
.footnote
Audinate needs the contact information you provide to us to contact you about our products and services. You may unsubscribe from these communications at anytime. For information on how to unsubscribe, as well as our privacy practices and commitment to protecting your privacy, check out our Privacy Policy.
Carousel
Forms
Use class input on input fields and textarea on text area fields. This will alow the utility classes to override these styles when needed.
Buttons
Action Indicator
.btn-icon .btn-red
.btn-icon .btn-white
.btn-icon .btn-white
<button className="btn-icon btn-red" type="button" name="button">
<Icon name="ArrowRight" className="w-4" />
</button>
// If you're using it on an <a> tag, add the inline-block class
<a className="btn-icon btn-red inline-block" href="#">
<Icon name="ArrowRight" className="w-4" />
</a>
.up-down-btn .bg-white .menu-open
// Toggle Arrow with "menu-open" class
<button className="up-down-btn bg-coolHint menu-closed">
<Icon name="ArrowDown" fill="#231F20" className="w-4" />
</button>
Icons are components kept in components/icon. They can all be imported using import Icon from "../icon"; and then used by calling the component and passing the name prop Icon name="ArrowDown" className="w-4" / . Or if you just need one or two icons, you can just import the icon itself with ArrowDown from "../icon/ArrowDown"; and then display the icon with ArrowDown name="ArrowDown" className="w-4" / .
AppleInc
ArrowDown
ArrowLeft
ArrowRight
ArrowUp
Checkmark
Close
Dna
Facebook
Help
Instagram
LogoMono
Search
Shutter
Twitter
Linkedin
Windows
YouTube
Example: Import components/icon. Use Icon name="AppleInc" className="w-8" /
Props:
style = ,
title = "",
fill = "",
className = "",
viewBox = "0 0 309 87"
General Typography
This paragraph is nested inside an article. It contains manydifferent, sometimes useful, HTML5 tags. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation tag: abbr. Similarly, you can use acronym tag like this: ftw. You can define deleted text which often gets replaced with inserted text.
You can also use keyboard text, which sometimes is styled similarly to the <code> or samp tags. Even more specifically, there is a tag just for variables. Not to be mistaken with blockquotes below, the quote tag lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) tags.
Blockquote: I quickly explained that many big jobs involve few hazards
This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.Steve Jobs – Apple Worldwide Developers’ Conference, 1997
Tables
Basic Table
Tables can have captions now.
Table Header
Number
Third Column
Table Footer
Number
Third Column
Someone Lastname
900
Nullam quis risus eget urna mollis ornare vel eu leo.