basic type Treatments
These are just some sample type treatments that will follow this text is in a text-lg box, to use buttons in any background color to best effect it is best practice to use the default button which has declared context aware styling. All other button colors are always the same regardless of context.
this section details
this section has an pad-xl-vert applied. you will find the list of these classes in following column. this section’s row also has a flex class applied that will align the items to the bottom of the column. Flex classes come in 4 varities the syntax for their use is flex-(SCREENSIZE)-(flex Alignment)-(nowrap) to align the items in a given row. This row’s class that has been used is flex-sm-center the columns are allowed to wrap because a ‘-nowrap’ was not added to the class. An alternative usefull class would be flex-md-stretch one we use quite often here. The Screen size xs / sm / md / lg defines which screen size and ABOVE the flex row will have a given effect on.
padding classes
padding classes are now Size and Screen Resolution dependant the following format is used to declare the class pad-(ScreenSize-lg-xs-sm-md)-(padding integeger 0-7 {2 being a standard padding})-(axis) as you can tell this will produce classes like pad-xs-2-vert or pad-md-2 (which will cover all sides ) the padding classes use a mobile first approach. IE pad-xs-size-axis will effect all screen sizes but pad-lg-size-axis will only effect desktop and above.
heading3
sized as h1 call to action
horizontal rules are now a builder element and actually work the same way whether in a column or in a in a text box inserted via the horizontal rule button in the tinyMCE editor.
text-lg on the row
You can use text-lg & text-xl classes on columns / text boxes. text-lg & text-xl should not be used in a nested fashion even with themselves. These relative sizes can be adjusted by the developer to ensure a pattern that best matches your outcomes. do not apply text-lg or text-xl directly to headings use the heading type size override classes provided to you and referenced in the previous column to apply a given impactful size. this row for reference has a flex-lg-end to align objects to the bottom of the flex row on large screen sizes to give an interesting effect.
text-reset on the text object box
You can reset text-lg & text-xl classes on columns / text boxes. using the override class text-reset on a column in a row that has been text sized up or on a text box in a column that has been sized up will drop the type and line height sizes in the lower scoped context to match the origin of the site allowing for a reset.
Heading type size overrides
You can use heading-h1 – heading-h6 to overide the type size of a given heading it scales well with text-lg or text-xl, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consectetur esse fugit ipsa laudantium molestiae necessitatibus perferendis recusandae reprehenderit totam. Blanditiis cum in itaque laborum omnis qui quo sequi? Natus!
Balancing sections / rows
Sections / rows and columns all come with a pleasing vertical padding that is intended to work well for basic type layout. you can of course combine different uses of the padding classes in the primary color sections listing to really pump things up. for example the air created around this section is applied through adding a pad-md-vert to the section, and a pad-sm-vert to the inner rows. all forms of padding are based upon the gutter width which is turn based upon the computed line height of a paragraph. All margins are stabilized and you should have no issues with extra margins on the last child of a given column causing you lots of issues.
Padding classes are not effected by text modifiers
padding classes are now completely independent of text modifiers for ease of use. Text modifiers scale by quarters / or eighths based on lg or xl type modifier. Padding classes are no longer effected by these modifiers so you can rest assured that the padding you chose will remain the same on mobile and desktop but that inner type if over sized will scale appropriately.
List Object examples
Some Small Paragraph Text followed by an ordered list
- Some list
- Some list item
- Some Sub List item
- Some other list item
Some h6 text followed by a regular ul
- Some alternative list
- Some alternitive list item
- some list item sub item
- some other list item
Icons
Font awesome, and Brand
You have alot of choices when it comes to icons, we have a custom font support that has 100 slots a 100 icon font has already been included in this “brand icon” font. the first 50- slots are reserved for usefull site icons not covered by the rest of the list however this entire set can be replaced if need be. Brand Icons , Font awseome icons , and Icon headings are the tools you use to insert icons into pages. Icon headings are considered breakable headings and have support for the ‘ * ‘ to insert a line break. Icon size selections can be made via the size selector ( this is not recommended however for icons used by the Icon headings as it causes strange behaviors ).
4x icon brand icon is used above. you can use a Icon heading or just a FA icon for font awesome or our custom embedded brand icon font. See the following treaments for this in action at different type sizes
Icon Heading Element
this is an icon heading above in a text-lg column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, animi architecto at dolor dolore ducimus earum ex, hic, id molestiae odit officia perferendis qui rerum sed soluta veniam voluptate voluptatem.
text alignment this section has a text-center extra class applied. This will cause the entire sections contents to center automatically unless otherwise overriden. The only way to override a text alignment class is with another text-{alignment} class text-reset will have effect.
Screen Size alignment
Text alignment now has a screen size dependent alignment class structure as well as the aforementioned. texttext-{screen}-{alignment} class structure can be used to provide mobile first text alignment such as text-xs-center text-lg-left will give text a center alignment on xs sm and md but will be aligned left on desktop because of the large size override.
text-xs-center text-md-left on the box
this text box has a text-left class applied to it to remove it from the text-center classes’ cascade from the section. hence the reset of text alignment.
the box no class
this text box has no class applied to it to remove it from the text-center classes’ cascade from the section. hence the text remaining centered like the above paragraph and heading in the previous row..
text-right on the box
this text box has a text-right class applied to it to remove it from the text-center classes’ cascade from the section. hence the reset of text alignment.
Titleo'sec
Learn how the Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute rure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- Lorem ipsum dolor sit amet, consectetur adipisicino eiusmod tempor incididun
- Lorem ipsum dolor sit amet, consectetur adipisiciiusmod
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
- Lorem ipsum dolor sit amet, consectetur adipisicing
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididun Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor i
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed d
Managed IT
Learn MoreHosted VoIP
Learn MoreCloud Integration
Learn MoreIT Consulting
Learn MoreMobile Remote
Learn MoreWhy Choose Network Connections?
Since 1991, NCI has been a technology partner to our clients delivering proven technology solutions, giving businesses a competitive advantage over competitors. We provide a single-contact for service and support issues while managing all the details.
As your technology partner, NCI integrates and manages solutions from third-party vendors with the critical applications required for a business. NCI provides turn-key solutions for all technology needs. We work with our clients to design the right solution to achieve their business objectives. Our offerings include hardware, software, VoIP phone systems, security appliances, network and security assessments, copper and fiber cabling, virtualization and business continuity. Our service delivery team specializes in all virtualization technologies for servers, desktops and applications, business continuity, disaster recovery services and access to business-critical applications from anywhere on any device.
Any of these services can be offered as private, hosted or hybrid cloud. These services have been installed and are effectively running in local and state government, education, healthcare, manufacturing and other market segments.
Basic Element Testing Area
HEADER ONE
HEADER TWO
HEADER THREE
HEADER FOUR
HEADER FIVE
HEADER SIX
Sample h3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati.
Heading 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Heading 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Heading 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Some h3 text
Some Small Paragraph Text
- Some list
- Some list item
- Some Sub List item
- Some other list item
Some h6 text
- Some alternative list
- Some alternitive list item
- some list item sub item
- some other list item
- Some alternitive list item
- some list item sub item
- some other list item
- Some alternitive list
Sample h3
Sample h2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Heading 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Heading 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Heading 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
text-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
heading 6 text-reset box
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Icon Settings
Sample h3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati.
- Some list
- Some list item
- Some Sub List item
- Some other list item
- Some alternitive list
text-left on the box
this text box has a text-left class applied to it to remove it from the text-center classes’ cascade from the section. hence the reset of text alignment.
the box no class
this text box has no class applied to it to remove it from the text-center classes’ cascade from the section. hence the text remaining centered like the above paragraph and heading in the previous row..
text-right on the box
this text box has a text-right class applied to it to remove it from the text-center classes’ cascade from the section. hence the reset of text alignment.
Sample H1 Sizing
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Sample inline h2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum!
Sample h2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
Sample h2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
pad-xs-7-vert
pad-xs-6-vert
pad-xs-5-vert
pad-xs-4-vert
pad-xs-3-vert
pad-xs-2-vert
default padding
pad-xs-0-vert pad-sm-1-vert
Color Palette Test Area
SOME H3 TEXT
Some Small Paragraph Text
- Some list item
- Some Sub List item
- Some other list item
- Some alternitive list item
- some list item sub item
- some other list item
heading icon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
some text with an inline paragraph link this is just some plain text around this inline link this is just a sample section and serves no purpose other than for use in the k/r builder development environment.
Color Palette Test Area
SOME H3 TEXT
Some Small Paragraph Text
- Some list item
- Some Sub List item
- Some other list item
- Some alternitive list item
- some list item sub item
- some other list item
heading icon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
some text with an inline paragraph link this is just some plain text around this inline link this is just a sample section and serves no purpose other than for use in the k/r builder development environment.
Color Palette Test Area
SOME H3 TEXT
Some Small Paragraph Text
- Some list item
- Some Sub List item
- Some other list item
- Some alternitive list item
- some list item sub item
- some other list item
heading icon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
some text with an inline paragraph link this is just some plain text around this inline link this is just a sample section and serves no purpose other than for use in the k/r builder development environment.
Color Palette Test Area
SOME H3 TEXT
Some Small Paragraph Text
- Some list item
- Some Sub List item
- Some other list item
- Some alternitive list item
- some list item sub item
- some other list item
heading icon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
some text with an inline paragraph link this is just some plain text around this inline link this is just a sample section and serves no purpose other than for use in the k/r builder development environment.
Color Palette Test Area
SOME H3 TEXT
Some Small Paragraph Text
- Some list item
- Some Sub List item
- Some other list item
- Some alternitive list item
- some list item sub item
- some other list item
heading icon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
some text with an inline paragraph link this is just some plain text around this inline link this is just a sample section and serves no purpose other than for use in the k/r builder development environment.
Color Palette Test Area
SOME H3 TEXT
Some Small Paragraph Text
- Some list item
- Some Sub List item
- Some other list item
- Some alternitive list item
- some list item sub item
- some other list item
heading icon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
some text with an inline paragraph link this is just some plain text around this inline link this is just a sample section and serves no purpose other than for use in the k/r builder development environment.
Color Palette Test Area
SOME H3 TEXT
Some Small Paragraph Text
- Some list item
- Some Sub List item
- Some other list item
- Some alternitive list item
- some list item sub item
- some other list item
heading icon
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolores id impedit nesciunt non obcaecati officia quibusdam ullam vel voluptatum! Corporis cupiditate deleniti deserunt expedita facere hic modi mollitia repellendus!
some text with an inline paragraph link this is just some plain text around this inline link this is just a sample section and serves no purpose other than for use in the k/r builder development environment.
A Sample Page Part
This is a sample page part that appears as a CTA, opening modal. Use this as the starter for any CTAs that drive towards the conversion modal that you would like. You can duplicate this etc to do whatever you see fit with.
Hello world!
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Markup: HTML Tags and Formatting
Headings Header one Header two Header three Header four Header five Header six Blockquotes Single line blockquote: Stay hungry. Stay foolish. Multi line blockquote with a cite reference: The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes … Read more
Markup: Image Alignment
Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started. On the topic of alignment, it should be noted that users can choose from the options of None, Left, … Read more
Markup: Text Alignment
Default This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where … Read more