Vue Bootstrap Streak

Vue Streak - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Bootstrap streak is a horizontal block containing text, uses to separate content sections or highlight some piece of information.

They should be used with caution, since too many of them on a single page will make it hard to read.

Streaks may contain a quote or a background photow with effect similar to parallax.

Examples of Vue Bootstrap streak menu use:

  • Famous person quote
  • Landscape with a memorable quote

See the following Vue Bootstrap streak menu examples:

Basic example MDB Pro component

  • The people who are crazy enough to think they can change the world are the ones who do.

  • ~ Steve Jobs
        
            
          <template>
            <mdb-streak :quote="quote" :by="by" />
          </template>
          
        
    
        
            
          <script>
            import {
              mdbStreak
            } from 'mdbvue';
            export default {
              name: 'StreakExample',
              components: {
                mdbStreak
              },
              data() {
                return {
                  quote: 'The people who are crazy enough to think they can change the world are the ones who do.',
                  by: 'Steve Jobs'
                };
              }
            }
          </script>

Medium streak MDB Pro component

  • I photograph to see what the world looks like in photographs.

  • ~ Garry Winogrand
        
            
          <template>
            <mdb-streak md :quote="quote" :by="by" byClass="grey-text font-weight-bold" quoteClass="font-weight-bold"
              wrapperClass="blue lighten-4" />
          </template>
          
        
    
        
            
          <script>
            import {
              mdbStreak
            } from 'mdbvue';
            export default {
              name: 'StreakExample',
              components: {
                mdbStreak
              },
              data() {
                return {
                  quote: 'I photograph to see what the world looks like in photographs.',
                  by: 'Garry Winogrand'
                };
              }
            }
          </script>

Streak with photo MDB Pro component

  • The people who are crazy enough to think they can change the world are the ones who do.

  • ~ Steve Jobs
        
            
          <template>
            <mdb-streak lg :quote="quote" :by="by"
              picture="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).webp"
              overlayClass="white-text rgba-black-light pattern-1" />
          </template>
          
        
    
        
            
          <script>
            import {
              mdbStreak
            } from 'mdbvue';
            export default {
              name: 'StreakExample',
              components: {
                mdbStreak
              },
              data() {
                return {
                  quote: 'The people who are crazy enough to think they can change the world are the ones who do.',
                  by: 'Steve Jobs'
                };
              }
            }
          </script>

Vue Streak - API

In this section you will find informations about required modules of streak component.

API Reference: Props

Name Type Default Description
quote String none Allows to pipe in a dynamic quote
by String none Entry point for inserting quote author dynamically
md Boolean false Used to set streak's height to medium
lg Boolean false Sets streak's height to large
marks Boolean true For turning off the built-in quotation marks
wrapperClass String grey lighten-3 CSS classes to be applied to streak's wrapper
overlayClass String grey lighten-3 CSS classes to be applied to streak's overlay, which is usually the only child of streak's wrapper
quoteClass String '' CSS classes to be applied to the quotation
byClass String '' CSS classes to be applied to the author name