Skip To Content
Mobile Nav Toggle

.splash

U.S. Venture Styleguide

Table of Contents

.media-split

See media-split.scss

  • .media-split

    .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split

  • .media-split

    .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split .media-split

.enable-video-container

See general.scss

.enable-video-container

.image-wall

See image-wall.scss

.media-card

See media-card.scss

Continue Reading

.media-card

.media-card .media-card .media-card .media-card .media-card .media-card .media-card .media-card .media-card .media-card

Continue Reading

.reveal-card

See reveal-card.scss

  • Read More

    .reveal-card

    .reveal-card .reveal-card .reveal-card .reveal-card .reveal-card

    Read More

  • Read More

    .reveal-card

    .reveal-card .reveal-card .reveal-card .reveal-card .reveal-card

    Read More

  • Read More

    .reveal-card

    .reveal-card .reveal-card .reveal-card .reveal-card .reveal-card

    Read More

  • Read More

    .reveal-card

    .reveal-card .reveal-card .reveal-card .reveal-card .reveal-card

    Read More

.toggle-panel

See toggle-panel.scss

    • .toggle-panel

      .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel

      .button-round

    • .toggle-panel

      .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel .toggle-panel

      .button-round

.info-box

See info-box.scss

.tile

See tile.scss

.card

See card.scss

.card .card .card .card

.card .card .card .card .card .card .card .card .card .card .card .card .card .card .card .card .card .card

Headings

Unlike previous site builds, the heading classes can be applied to any level of a heading element which will work better for accessibility.

See headings.scss

.heading-2

.heading-3

.heading-4

.heading-5

.heading-4.heading--bold

.heading-5.heading--bold

.large

Buttons

See buttons.scss

Alignment

See general.scss

.align-left

.align-center

.align-right

.content-left

.content-right

Columns

See columns.scss

  • columns-2
  • columns-2

  • columns-3
  • columns-3
  • columns-3

  • columns-4
  • columns-4
  • columns-4
  • columns-4

  • equal height
    equal height
    equal height
  • equal height
    equal height
  • equal height

fluid
fixed

fluid
fixed

fluid
fixed-left
fixed-right

Padding

See padding.scss

  • .padding-top-1x
  • .padding-bottom-1x
  • .padding-left-1x
  • .padding-right-1x

.padding-1x-all

  • .padding-top-2x
  • .padding-bottom-2x
  • .padding-left-2x
  • .padding-right-2x

.padding-2x-all

  • .padding-top-3x
  • .padding-bottom-3x
  • .padding-left-3x
  • .padding-right-3x

.padding-3x-all

  • .padding-top-4x
  • .padding-bottom-4x
  • .padding-left-4x
  • .padding-right-4x

.padding-4x-all

Images

See general.scss

.shadow-hover

.rounded

Equal Height

See general.scss

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
  • 1
    2
    3

Icons

See font-icons

  • .icon-band-aid
  • .icon-building
  • .icon-care
  • .icon-chart
  • .icon-clock2
  • .icon-computer
  • .icon-diversity
  • .icon-dollar
  • .icon-gift
  • .icon-party
  • .icon-people
  • .icon-shield
  • .icon-star
  • .icon-wallet
  • .icon-clock
  • .icon-guardian
  • .icon-healthcare
  • .icon-meals
  • .icon-money
  • .icon-tuition
  • .icon-communication
  • .icon-mouse
  • .icon-bike
  • .icon-download2
  • .icon-star-full
  • .icon-close
  • .icon-play
  • .icon-arrow-right
  • .icon-facebook
  • .icon-twitter
  • .icon-youtube
  • .icon-linkedin

Fonts

See general.scss

.font-color-white

.font-color-primary-brand

.font-color-secondary-brand

.font-color-secondary-brand-alt

.font-family-1

.font-family-2

[data-font-size="-4"]

[data-font-size="-3"]

[data-font-size="-2"]

[data-font-size="-1"]

[data-font-size="+1"]

[data-font-size="+2"]

[data-font-size="+3"]

[data-font-size="+4"]

Modal Window

See shadowbox.scss

Modal Window

Animations

See animations.scss

  • [data-aos-children-staggered="fadein"]
  • [data-aos-children-staggered="fadein"]
  • [data-aos-children-staggered="fadein"]
  • [data-aos-children-staggered="fadein"]

Tabs/Accordions

See tab-accordion.scss

Accordion Item 1

1 data-tabs-animation="slide" data-accordion-animation="slide" data-tabs-animation="slide" data-accordion-animation="slide" data-tabs-animation="slide" data-accordion-animation="slide" data-tabs-animation="slide" data-accordion-animation="slide" data-tabs-animation="slide" data-accordion-animation="slide" data-tabs-animation="slide" data-accordion-animation="slide" data-tabs-animation="slide" data-accordion-animation="slide"

Accordion Item 2

2 Posuere rhoncus augue. Etiam in libero eu nisi auctor. Suspendisse a mauris. Nulla ac eros. Mauris orci diam, elementum id, mattis et, consequat lobortis, lorem. Mauris nisi. Fusce nibh. Duis bibendum auctor massa. Mauris mauris dui, placerat sed, lacinia nec, vehicula egestas, eros. Vivamus interdum velit at diam. Nulla ac elit. Maecenas nibh nisi, pulvinar sit amet, volutpat quis, suscipit eu, sem. Aliquam erat volutpat. Curabitur ultricies.










Accordion Item 3

3 Posuere rhoncus augue. Etiam in libero eu nisi auctor. Suspendisse a mauris. Nulla ac eros. Mauris orci diam, elementum id, mattis et, consequat lobortis, lorem. Mauris nisi. Fusce nibh. Duis bibendum auctor massa. Mauris mauris dui, placerat sed, lacinia nec, vehicula egestas, eros. Vivamus interdum velit at diam. Nulla ac elit. Maecenas nibh nisi, pulvinar sit amet, volutpat quis, suscipit eu, sem. Aliquam erat volutpat. Curabitur ultricies.


Accordion Item 1
No animation
Accordion Item 2

2 Posuere rhoncus augue. Etiam in libero eu nisi auctor. Suspendisse a mauris. Nulla ac eros. Mauris orci diam, elementum id, mattis et, consequat lobortis, lorem. Mauris nisi. Fusce nibh. Duis bibendum auctor massa. Mauris mauris dui, placerat sed, lacinia nec, vehicula egestas, eros. Vivamus interdum velit at diam. Nulla ac elit. Maecenas nibh nisi, pulvinar sit amet, volutpat quis, suscipit eu, sem. Aliquam erat volutpat. Curabitur ultricies.










Accordion Item 3

3 Posuere rhoncus augue. Etiam in libero eu nisi auctor. Suspendisse a mauris. Nulla ac eros. Mauris orci diam, elementum id, mattis et, consequat lobortis, lorem. Mauris nisi. Fusce nibh. Duis bibendum auctor massa. Mauris mauris dui, placerat sed, lacinia nec, vehicula egestas, eros. Vivamus interdum velit at diam. Nulla ac elit. Maecenas nibh nisi, pulvinar sit amet, volutpat quis, suscipit eu, sem. Aliquam erat volutpat. Curabitur ultricies.


Accordion Item 1

data-tabs-animation="fade" data-accordion-animation="slide" Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion

Accordion Item 2

data-tabs-animation="fade" data-accordion-animation="slide" Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion Always accordion











Accordion Item 1

data-tabs-animation="fade" data-accordion-animation="fade" Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always accordion

Accordion Item 2

data-tabs-animation="fade" data-accordion-animation="fade" Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs Always tabs










Form Elements

See forms.scss

  • Note
  • no label no label no label no label no label no label no label no label no label no label no label no label no label

Full Line

Miscellaneous

See general.scss

.success

.notice

.error