Theme colors

The theme is built with a set of carefully selected colors, each serving a specific purpose in your design. These colors can be applied as background colors, text colors, and border colors using corresponding utility classes.

Available Theme Colors

How to Use Theme Colors

You can apply these colors to your elements using the provided utility classes:

Background Color: Use the bg--{color} class to set the background color of an element.

<div class="bg--primary text--white">This div has a primary background color</div>
<div class="bg--primary text--white">This div has a primary background color</div>
<div class="bg--primary text--white">This div has a primary background color</div>

Opacity background color .bg-opacity

<div class="bg--primary text--white mb-3 p-1 bg-opacity-5">This div has a primary background & opacity 5%</div>
<div class="bg--primary text--white mb-3 p-1 bg-opacity-25">This div has a primary background & opacity 25%</div>
<div class="bg--primary text--white mb-3 p-1 bg-opacity-50">This div has a primary background & opacity 50%</div>
<div class="bg--primary text--white mb-3 p-1 bg-opacity-75">This div has a primary background & opacity 75%</div>

Text Color: Use the text--{color} class to set the text color.

<p class="text--primary">This text is colored with the primary color</p>

This text is colored with the primary color

Opacity color .text-opacity

<div class="text--primary mb-3 p-1 text-opacity-5">This div has a primary text & opacity 5%</div>
<div class="text--primary mb-3 p-1 text-opacity-25">This div has a primary text & opacity 25%</div>
<div class="text--primary mb-3 p-1 text-opacity-50">This div has a primary text & opacity 50%</div>
<div class="text--primary mb-3 p-1 text-opacity-75">This div has a primary text & opacity 75%</div>

Border Color: Use the border--{color} class to set the border color.

<div class="border--danger" style="border-width: 1px; border-style: solid;">This div has a danger-colored border</div>

Borders

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

<span class="border border--primary"></span>
<span class="border border--secondary"></span>
<span class="border border--danger"></span>
<span class="border border--dark"></span>
<span class="border border--warning"></span>
<span class="border border--light"></span>
<span class="border border--success"></span>
<span class="border border--info"></span>

<span class="border border--primary rounded"></span>
<span class="border border--primary rounded--lg"></span>
<span class="border border--primary rounded--xl"></span>

<span class="border border--primary border-opacity-5">Opacity 5%</span>
<span class="border border--primary border-opacity-25">Opacity 25%</span>
<span class="border border--primary border-opacity-50">Opacity 50%</span>
<span class="border border--primary border-opacity-75">Opacity 75%</span>

Button

Button Sizes

Three sizes of buttons are available:
Small Button (.ia-btn--sm)
Medium Button (.ia-btn--md)
Large Button (.ia-btn--lg)

Example Usage:

<button class="ia-btn ia-btn--lg ia-btn--dark">Large Button</button>
<button class="ia-btn ia-btn--md ia-btn--dark">Medium Button</button>
<button class="ia-btn ia-btn--sm ia-btn--dark">Small Button</button>

Button Color Variants

The .ia-btn--[color] class is a customizable button style in SCSS. Various color schemes are available for buttons:
Primary Button (.ia-btn--primary)
Info Button (.ia-btn--info)
Secondary Button (.ia-btn--secondary)
Dark Button (.ia-btn--dark)
Warning Button (.ia-btn--warning)
White Button (.ia-btn--white)
Light Button (.ia-btn--light)
Success Button (.ia-btn--success)
Danger Button (.ia-btn--danger)

Example Usage:

<a href="#" class="ia-btn ia-btn--primary">Primary Button</a>
<a href="#" class="ia-btn ia-btn--info">Info Button</a>
<a href="#" class="ia-btn ia-btn--secondary">Secondary Button</a>
<a href="#" class="ia-btn ia-btn--dark">Dark Button</a>
<a href="#" class="ia-btn ia-btn--warning">Warning Button</a>
<a href="#" class="ia-btn ia-btn--white">White Button</a>
<a href="#" class="ia-btn ia-btn--light">Light Button</a>
<a href="#" class="ia-btn ia-btn--success">Success Button</a>
<a href="#" class="ia-btn ia-btn--danger">Danger Button</a>

Button Outline Variants

The .ia-btn--outline-[color] class is a customizable button style in SCSS that provides an outline effect for the button. This class is designed to be flexible, allowing you to easily create different button styles based on a set of predefined colors.
Primary Button (.ia-btn--outline-primary)
Info Button (.ia-btn--outline-info)
Secondary Button (.ia-btn--outline-secondary)
Dark Button (.ia-btn--outline-dark)
Warning Button (.ia-btn--outline-warning)
White Button (.ia-btn--outline-white) Light Button (.ia-btn--outline-light) Success Button (.ia-btn--outline-success) Danger Button (.ia-btn--outline-danger)

Example Usage:

<a href="#" class="ia-btn ia-btn--outline-primary">Primary Button</a>
<a href="#" class="ia-btn ia-btn--outline-info">Info Button</a>
<a href="#" class="ia-btn ia-btn--outline-secondary">Secondary Button</a>
<a href="#" class="ia-btn ia-btn--outline-dark">Dark Button</a>
<a href="#" class="ia-btn ia-btn--outline-warning">Warning Button</a>
<a href="#" class="ia-btn ia-btn--outline-white">White Button</a>
<a href="#" class="ia-btn ia-btn--outline-light">Light Button</a>
<a href="#" class="ia-btn ia-btn--outline-success">Success Button</a>
<a href="#" class="ia-btn ia-btn--outline-danger">Danger Button</a>

Links

Default Link

Info Button

The .ia-link class increases the font size of links to 1.8rem.

Button

Links Color Variants

The .ia-link--[color] class is a customizable link style in SCSS. Various color schemes are available for links:
Primary Link (.ia-link--primary)
Info Link (.ia-link--info)
Secondary Link (.ia-link--secondary)
Dark Link (.ia-link--dark)
Warning Link (.ia-link--warning)
White Link (.ia-link--white)
Light Link (.ia-link--light)
Success Link (.ia-link--success)
Danger Link (.ia-link--danger)

Example Usage:

<p><a href="#" class="ia-link--primary">Primary Link</a></p>
<p><a href="#" class="ia-link ia-link--info">Info Link</a></p>
<p class="bg--white"><a href="#" class="ia-link ia-link--secondary">Secondary Link</a></p>
<p class="bg--white"><a href="#" class="ia-link ia-link--dark">Dark Link</a></p>
<p><a href="#" class="ia-link ia-link--warning">Warning Link</a></p>
<p><a href="#" class="ia-link ia-link--white">White Link</a></p>
<p><a href="#" class="ia-link ia-link--light">Light Link</a></p>
<p><a href="#" class="ia-link ia-link--success">Success Link</a></p>
<p><a href="#" class="ia-link ia-link--danger">Danger Link</a></p>

Primary Link

Info Link

Secondary Link

Dark Link

Warning Link

White Link

Light Link

Success Link

Danger Link

Grid System

The grid system in the framework is designed to help you create responsive layouts with ease. It uses a 12-column grid structure, similar to popular frameworks like Bootstrap, and is customizable to fit your design needs. Below is a comprehensive guide on how to use the grid system, including classes and mixins.

Container (.ia-container)

The container is the base wrapper for your grid system. It ensures that your content is centered and has appropriate padding on the sides.

<div class="ia-container">
	<!-- Your content here -->
</div>

• Max-Width: The container's maximum width is defined by the $container-max-width variable.
• Padding: The container has horizontal padding, which adjusts based on screen size using CSS variables.

Row (.ia-row)

A row is used to create a horizontal group of columns. The .ia-row class uses flexbox to manage the layout of the columns within.

<div class="ia-container">
	<div class="ia-row">
		<!-- Columns go here -->
	</div>
</div>

Columns (.ia-col)

Columns are the building blocks of the grid. They are defined by classes that specify their width and screen size breakpoint.

<div class="ia-container">
	<div class="ia-row">
		<div class="ia-col ia-col-xs-12 ia-col-sm-6 ia-col-md-4 ia-col-lg-3">
			<!-- Your content here -->
		</div>
	</div>
</div>

Breakpoint Sizes

Each breakpoint corresponds to a specific screen size range:

xs: Extra small screens (mobile devices) - usually < 576px
sm: Small screens (tablets) - 576px and above
md: Medium screens (desktops) - 768px and above
lg: Large screens (larger desktops) - 992px and above

• Syntax: .ia-col-[breakpoint]-[number]
  • [breakpoint]: The screen size at which the column width applies (xs, sm, md, lg).
  • [number]: The number of columns the element should span (1-12).

<div class="ia-container">
	<div class="ia-row">
		<div class="ia-col ia-col-xs-12 ia-col-md-6">
			Column 1
		</div>
		<div class="ia-col ia-col-xs-12 ia-col-md-6">
			Column 2
		</div>
	</div>
</div>

This example will create two columns, each taking up 50% of the row on medium-sized screens (md) and above, and 100% on smaller screens.

Single Column (Full Width)

To make an element span the full width of its container (12 columns):

<div class="ia-col ia-col-xs-12"></div>

This class will make the element take up the full width on extra small screens and above.

Two Equal Columns

To create a two-column layout, each taking up 50% of the container:

<div class="ia-col ia-col-xs-6"></div>
<div class="ia-col ia-col-xs-6"></div>

This layout will be applied across all screen sizes. For specific screen sizes, use different breakpoints:

<div class="ia-col ia-col-xs-12 ia-col-sm-6"></div>
<div class="ia-col ia-col-xs-12 ia-col-sm-6"></div>

In this example, the columns stack vertically on extra small screens (xs), and sit side by side on small screens (sm) and larger.

Three Columns

To create a three-column layout, each taking up 33.33% of the container:

<div class="ia-col ia-col-xs-4"></div>
<div class="ia-col ia-col-xs-4"></div>
<div class="ia-col ia-col-xs-4"></div>

This layout will apply to extra small screens and above.

Mixed Columns

To create a layout with mixed column sizes:

<div class="ia-col ia-col-xs-6 ia-col-md-4 "></div>
<div class="ia-col ia-col-xs-6 ia-col-md-8"></div>

On extra small screens (xs), the first column will take up 50% of the container, and the second column will also take up 50%.

On medium screens (md) and larger, the first column will take up 33.33% of the container, and the second will take up 66.67%.

Offsetting Columns

You can offset columns by using .ia-col-{breakpoint}-offset-{number} classes. This adds empty space before the column.

Example usage:

<div class="ia-col ia-col-xs-6 ia-col-offset-xs-3"></div>

This class will center the element by giving it a 25% offset from the left on extra small screens and above.

Combining Column Classes

You can combine multiple column classes for different screen sizes:

Extra Small Screens (xs): Full width (12 columns)
Small Screens (sm): 66.67% width (8 columns)
Medium Screens (md): 50% width (6 columns)
Large Screens (lg): 33.33% width (4 columns)

Nesting Columns

You can nest columns inside of other columns to create more complex layouts:

<div class="ia-col ia-col-xs-12 ia-col-md-8">
	<div class="ia-row">
		<div class="ia-col ia-col-xs-6"></div>
		<div class="ia-col ia-col-xs-6"></div>
	</div>
</div>
<div class="ia-col ia-col-xs-12 ia-col-md-4"></div>

Gutter Width Classes

These classes allow you to control the spacing between columns (gutter width) at different screen sizes (xs, sm, md, lg). The gutter width is set using CSS custom properties (--grid-gutter-width), which can be modified via classes.

Class Names and Usage

• Extra Small (xs):

  • .ia-gutter-xs-10: Sets gutter width to 10px on extra small screens.
  • .ia-gutter-xs-20: Sets gutter width to 20px on extra small screens.
  • ...up to .ia-gutter-xs-50.

• Small (sm):

  • .ia-gutter-sm-10: Sets gutter width to 10px on small screens and up.
  • .ia-gutter-sm-20: Sets gutter width to 20px on small screens and up.
  • ...up to .ia-gutter-sm-50.

• Medium (md):

  • .ia-gutter-md-10: Sets gutter width to 10px on medium screens and up.
  • .ia-gutter-md-20: Sets gutter width to 20px on medium screens and up.
  • ...up to .ia-gutter-md-50.

• Large (lg):

  • .ia-gutter-lg-10: Sets gutter width to 10px on large screens and up.
  • .ia-gutter-lg-20: Sets gutter width to 20px on large screens and up.
  • ...up to .ia-gutter-lg-50.

How to Apply

Add the desired gutter class to your container or row to apply a specific gutter width.

Example Usage:

<div class="ia-row ia-gutter-xs-20 ia-gutter-md-40">
	<!-- Your columns here -->
</div>

Responsive Gutter Control

Combine different classes to control gutter widths at various breakpoints.

<div class="ia-row ia-gutter-xs-10 ia-gutter-sm-20 ia-gutter-md-30 ia-gutter-lg-50">
	<!-- Your columns here -->
</div>

This structure gives you flexible control over the spacing between your grid columns across different screen sizes, ensuring a responsive and adaptable design.

Typography

All HTML headings are available.

<h1>h1. heading</h1>
<h2>h2. heading</h2>
<h3>h3. heading</h3>
<h4>h4. heading</h4>
<h5>h5. heading</h5>
<h6>h6. heading</h6>

You can also use .h1 through .h6 classes to apply heading font styles when the corresponding HTML elements cannot be used.

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

<p class="h1">h1. heading</p>
<p class="h2">h2. heading</p>
<p class="h3">h3. heading</p>
<p class="h4">h4. heading</p>
<p class="h5">h5. heading</p>
<p class="h6">h6. heading</p>

.fz-1. text

.fz-2. text

.fz-3. text

.fz-4. text

.fz-5. text

.fz-6. text

p1. text

p2. text

p3. text

p4. text

<p class="fz-1">.fz-1. text</p>
<p class="fz-2">.fz-2. text</p>
<p class="fz-3">.fz-3. text</p>
<p class="fz-4">.fz-4. text</p>
<p class="fz-5">.fz-5. text</p>
<p class="fz-6">.fz-6. text</p>
<p class="p1">p1. text</p>
<p class="p2">p2. text</p>
<p class="p3">p3. text</p>
<p class="p4">p4. text</p>

• List item
• List item
• List item
• List item
• List item

1. List item
2. List item
3. List item
4. List item
5. List item

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Font weight

The following utility classes are available to quickly apply different font weights to text elements:

• .text-extra-bold: Applies extra bold font weight (font-weight: 1000).
• .text-bold: Applies bold font weight (font-weight: 800).
• .text-semi-bold: Applies semi-bold font weight (font-weight: 600).
• .text-medium: Applies medium font weight (font-weight: 500).
• .text-regular: Applies regular font weight (font-weight: 400), which is the default for most text.
• .text-light: Applies light font weight (font-weight: 300).
• .text-thin: Applies thin font weight (font-weight: 100).

This text is extra bold.

This text is bold.

This text is semi-bold.

This text is medium weight.

This text is regular weight.

This text is light weight.

This text is thin weight.

<p class="text-extra-bold">This text is extra bold.</p>
<p class="text-bold">This text is bold.</p>
<p class="text-semi-bold">This text is semi-bold.</p>
<p class="text-medium">This text is medium weight.</p>
<p class="text-regular">This text is regular weight.</p>
<p class="text-light">This text is light weight.</p>
<p class="text-thin">This text is thin weight.</p>

Tabs

The Tabs component allows users to switch between different content panels on a single page. This is particularly useful for organizing related information under different headings without navigating away from the page.

<div class="bg--primary rounded--xl p-5 mb-3">
	<div class="tabs tabs--light">
		<ul class="tab-list">
			<li class="tab-item active" data-target="#tab1">Tab 1</li>
			<li class="tab-item" data-target="#tab2">Tab 2</li>
			<li class="tab-item" data-target="#tab3">Tab 3</li>
			<li class="moving-tab"></li>
		</ul>
		<div class="tab-content">
			<div id="tab1" class="tab-pane active pt-5">
				<h2 class="text--white">Tab 1</h2>
				<p class="text--white">From dental offices, to surgery centers to mental health facilities, we know growing a practice is stressful without the added challenge of sourcing and hiring staff. With MEDVA, we'll eliminate the human resources headache and enable you to maximize your time with patients.</p>
				<a href="#" class="ia-btn ia-btn--lg ia-btn--outline-white">Discover How</a>
			</div>
			<div id="tab2" class="tab-pane pt-5">
				<h2 class="text--white">Tab 2</h2>
				<p class="text--white">From dental offices, to surgery centers to mental health facilities, we know growing a practice is stressful without the added challenge of sourcing and hiring staff. With MEDVA, we'll eliminate the human resources headache and enable you to maximize your time with patients.</p>
				<a href="#" class="ia-btn ia-btn--lg ia-btn--outline-white">Discover How</a>
			</div>
			<div id="tab3" class="tab-pane pt-5">
				<h2 class="text--white">Tab 3</h2>
				<p class="text--white">From dental offices, to surgery centers to mental health facilities, we know growing a practice is stressful without the added challenge of sourcing and hiring staff. With MEDVA, we'll eliminate the human resources headache and enable you to maximize your time with patients.</p>
				<a href="#" class="ia-btn ia-btn--lg ia-btn--outline-white">Discover How</a></div>
		</div>
	</div>
</div>

CSS Classes and Structure

• .tabs: The main container for the entire tabs component.
• .tab-list: The container for the tab headings.
• .tab-item: Each tab that users click to switch content panels.
• .tab-content: The container for the content associated with each tab.
• .tab-pane: Each individual content pane that is displayed when the corresponding tab is active.
• .active: A class used to mark both active tabs and active content panes.

Light Theme:

<div class="tabs tabs--light">
  <!-- Light theme applied to the tabs -->
</div>

Dark Theme:

<div class="tabs tabs--dark">
  <!-- Dark theme applied to the tabs -->
</div>

Accordion

The Accordion component allows you to display collapsible content sections. Each section consists of a header and associated content that can be expanded or collapsed when the user clicks the header. The accordion comes in two themes: dark (default) and light.

<div class="accordion">
	<div class="accordion-item">
		<div class="accordion-header">
			<div class="accordion-title">Section 1</div>
			<div class="accordion-icon"></div>
		</div>
		<div class="accordion-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur distinctio doloremque expedita, fugit, inventore minima optio similique soluta tempora tempore temporibus veniam voluptatum. Ad fugiat molestiae neque placeat quidem sequi unde, veritatis. Atque beatae deleniti distinctio facilis maiores maxime non quis sint? Blanditiis commodi consequuntur itaque laborum nulla officiis.</p>
		</div>
	</div>
	<div class="accordion-item">
		<div class="accordion-header">
			<div class="accordion-title">Section 2</div>
			<div class="accordion-icon"></div>
		</div>
		<div class="accordion-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dicta et fuga hic laudantium nam necessitatibus nemo qui repudiandae suscipit! Cumque, cupiditate debitis dolor dolores eos et facere id incidunt labore necessitatibus omnis repudiandae soluta tenetur veniam voluptatum! Accusamus aperiam minus nemo nihil non perferendis perspiciatis praesentium quae quas repellendus!</p>
	
		</div>
	</div>
</div>

CSS Classes and Structure

• .accordion: The main container for the accordion.
• .accordion-item: Each individual item in the accordion, which consists of a header and content.
• .accordion-header: The clickable header that triggers the expansion/collapse of the associated content.
• .accordion-title: The title inside the accordion header.
• .accordion-icon: The plus/cross icon that indicates whether the content is expanded or collapsed.
• .accordion-content: The collapsible content area that expands or collapses when the accordion item is clicked.
• .active: A class that is added to the .accordion-item when it is open and the content is visible.

Dark Theme (Default)

The dark theme is applied by default, where the text, borders, and icon have dark colors.

<div class="accordion">
  <!-- Dark theme accordion -->
</div>

Light Theme

To apply the light theme, use the class accordion--light on the accordion container. This will change the text color to white, lighten the borders, and update the icon's color.

<div class="accordion accordion--light">
  <!-- Light theme accordion -->
</div>