Hero Row

Container の第一レベルの子として、Row などとともに利用して、コンテンツの幅を抑制したり、中央寄せしたりする際に利用します。

Rowの内側にColを一つ含むコンポーネントです。

Examples

Text Alignment

Key Advantages

Why our 50,000+ users trust our platform

vue
<template>
 <HeroRow
  text-alignment="center"
  margin="y-5"
 >
  <b-p headings="4">
   Key Advantages
  </b-p>
  <b-p display-headings="5">
   Why our 50,000+ users trust our platform
  </b-p>
 </HeroRow>
</template>

Constrained width

Key Advantages

Why our 50,000+ users trust our platform

vue
<template>
 <HeroRow
  size="md-10 lg-8"
  margin="y-5"
 >
 <b-p headings="4">
   Key Advantages
  </b-p>
  <b-p display-headings="5">
   Why our 50,000+ users trust our platform
  </b-p>
 </HeroRow>
</template>

Justify Content

Key Advantages

Why our 50,000+ users trust our platform

vue
<template>
 <HeroRow
  justify-content="start"
  size="md-8"
  margin="y-5"
 >
 <b-p headings="4">
   Key Advantages
  </b-p>
  <b-p display-headings="5">
   Why our 50,000+ users trust our platform
  </b-p>
 </HeroRow>
</template>

See Also