Layout


Grid

12 Column Adaptive Grid System. We are using a Bootstrap grid plugin for Tailwind. It's worth while to check out the demo they made.

container -> row -> col

1 of 1

container -> row -> md:col-6

1 of 2
2 of 2

container -> row -> md:col-4

1 of 3
2 of 3
3 of 3

container -> row -> md:col-6 lg:col-3

1 of 4
2 of 4
3 of 4
4 of 4

container -> row no-gutters -> md:col-6 lg:col-3

1 of 4
2 of 4
3 of 4
4 of 4

Column widths

1 col
2 column
3 column
4 column
5 column
6 column
7 column
8 column
9 column
10 column
11 column
12 column

1244px Maximum Content Width


max-content-width

824px Maximum Readability Width


max-readability-width

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.


<section className="bg-white">
  <section className="max-content-width">
    <h2>Full Width Background</h2>
  </section>
</section>
            

Figure-Ground


Light/Dark Sections

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.

With overlay

Without Overlay


<div className="ground-color-bg-image">
  <img src="/static/images/mockups/product-detail-example-1.jpg" />
</div>
              

Color Swatches

These will not change depending on the parent background class.

tint
#BF3730
tintBright
#E51937
white
white
ground
#F5F5F5
coolHint
#7A818C
figure
#665F61
coolBlack
#2C2F33
coolExtraBlack
#181A1C
black
#231F20
extraBlack
#000
focusColor
#3fb6f2
linkDefault
#007db5
ruleGray
rgba(95,95,95,.25)
coolShade
rgba(0,34,64,.06)
shade
rgba(0,0,0,.02)

Text Styles


Display

.title-display

Interoperability is not a dream.


Title

.title or h1

A Revolution in AV


Title 2

.title-two or h2

Find Dante in 100s of pro tools


Title 3

.title-three

Where to Buy


Header 3

h3

h3 Jaunty zinnias vie with flaunting phlox


Body 2

.body-two

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

Product undefined on a white background

Product undefined on a white background

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.



// NOTE: Select Fields must be wrapped
<div className="select">
  <select id="example-select1">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>This is Option 3</option>
    <option>Four</option>
    <option>Select Option Five, it is longer than the others.</option>
  </select>
</div>
              

// Action Group Example
<div className="action-group">
  <input type="search" className="form-control input" placeholder="Search..." aria-label="Recipient's username" aria-describedby="basic-addon2" />
  <div className="action-group-append">
    <button className="btn border-contrast-500" type="button">
      Send
    </button>
  </div>
</div>
              

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>

Action Button

className="btn btn-text-icon btn-red"

className="btn btn-text-icon btn-white"

className="btn btn-text-icon btn-black"


<button className="btn btn-text-icon">
  <span>Full Catalog</span>
  <Icon name="ArrowRight" className="w-4" />
</button>

<a className="btn btn-text-icon" href="#">
  <span>Full Catalog</span>
  <Icon name="ArrowRight" className="w-4" />
</a>
  

Link Button

ASC Store

btn-icon-link


  <a href="#" className="btn-icon-link">
    ASC Store
    <Icon name="ArrowRight" className="w-4" />
  </a>
  

Action Link


  <a className="action-link">
    Full Project Gallery
  <Icon name="ArrowRight" className="w-4" />
  </a>
  

Link List


  <ul className="link-list">
    <li><a href="#">
      ASC Store
    <Icon name="ArrowRight" className="w-4" />
    </a>
    </li>
    <li><a href="#">
      Dante in Action
    <Icon name="ArrowRight" className="w-4" />
    </a>
    </li>
  </ul>
  
Dante Networking Alliance 2

btn-icon-link btn-icon-link-white rounded-full

Dante Networking Alliance 2

btn-icon-link btn-icon-link-white rounded-full


<a className="btn-icon-link btn-icon-link-white rounded-full">
Dante Networking Alliance
  <Icon name="Shutter" className="w-4"/>
</a>
  

Standard Buttons (no classes)


Social Links


FacebookInstagramTwitterLinkedinYouTubeAppleWindows

<a href="#" className="btn-icon btn-social text-black">
  <span className="visually-hidden">Apple</span>
  <Icon name="AppleInc" className="svg-icon" ariaHidden="true" />
</a>
  

Icon Library

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.

This is footer for this section

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 HeaderNumberThird Column
Table FooterNumberThird Column
Someone Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One2800Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Lists

Definition List Title
Definition list division.
Kitchen Sink
Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
aside
Defines content aside from the page content
blockquote
Defines a section that is quoted from another source
  • Unordered List item one
    • Nested list item
      • Level 3, item one
      • Level 3, item two
      • Level 3, item three
      • Level 3, item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

Address

1 Infinite Loop
Cupertino, CA 95014
United States