V6 component test page
You’ll note that in the side-nav, there is no active classes being applied becuase this is a draft page without real URLs in the side-nav
Featured banner
Title
Highlight an action you want people to take or important information on the homepage.
Featured
Card content. Update your ARIA labels for your div class="featured-card-container" and anchor above.
Card content. Update your ARIA labels for your div class="featured-card-container" and anchor above.
Card content. Update your ARIA labels for your div class="featured-card-container" and anchor above.
Card w/ image
Give your card a short title
Use this space to briefly tell your reader what they will find at the card’s destination
Card grid with images
Card title
Briefly tell your reader what they will find at the card’s destination then link to that location.
Card title
Briefly tell your reader what they will find at the card’s destination then link to that location.
Card title
Briefly tell your reader what they will find at the card’s destination then link to that location.
Card w/ button
Card grid w/ buttons
Title
Cards use the heading text style for titles. Keep them short, concise, and consistent.
Card body
Use this space to briefly tell your reader what they will find at the card’s destination.
Card w/ icon
Card grid w/ icons
Vendor Resources
Sell your technology products or services to one of our core areas.
Service resources
Reference materials and tools supporting CDT services.
Account lead
Your Customer Engagement Services contact for all CDT technology services.
Accordions
Add a short, descriptive heading for your topic
Once open, the content within the accordion should describe the topic in more detail. It should not repeat the heading.
This part of the accordion is a great place to link to other resources. Remember, important information and calls to action should live outside of the accordion.
If your heading must be longer, the accordion will wrap to multiple lines within the container like this
Once open, the content within the accordion should describe the topic in more detail. It should not repeat the heading.
This part of the accordion is a great place to link to other resources. Remember, important information and calls to action should live outside of the accordion.
This heading tells users what's inside the accordion
Once open, the content within the accordion should describe the topic in more detail. It should not repeat the heading.
This part of the accordion is a great place to link to other resources. Remember, important information and calls to action should live outside of the accordion.
Tabs
Heading example
Use tabs sparingly. When using tabs, don't use too many.
Tab 2 heading
This is tab 2 body text.
Blockquote w/ quotation
Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.
Blockquote no quotation
Good quotes help to tell a story and enhance the credibility of a press release, news story, or speech. Words that are crafted well can leave a lasting impact on the world.