Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="hero" :style="{ backgroundImage: `url('${media}')` }">
- <div class="hero-inner">
- <h1 class="hero-title">
- {{title}}
- </h1>
- <div class="hero-description">
- {{message}}
- </div>
- <div class="hero-actions mt-4">
- <div class="btn btn-primary mr-3">
- {{primaryCallToAction.text}}
- </div>
- <div class="btn btn-secondary">
- {{secondaryCallToAction.text}}
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'BaseHero',
- // En lugar de obtener la información de data, la obtendremos de los props
- props: {
- media: {
- type: String,
- require: true,
- },
- title: {
- type: String,
- require: true,
- },
- message: {
- type: String,
- default: '',
- },
- primaryCallToAction: Object,
- secondaryCallToAction: Object,
- },
- };
- </script>
- <style>
- .hero {
- ...
- }
- </style>
Add Comment
Please, Sign In to add comment