mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 02:42:49 +09:00
first
This commit is contained in:
@@ -0,0 +1,78 @@
|
||||
### Blockquotes
|
||||
|
||||
Vuero provides `blockquote` html element styling.
|
||||
Wrap your `blockquote` element inside a `div` with the `content` class.
|
||||
Blockquotes can have different colors.
|
||||
Available color modifier classes are `is-primary`, `is-success`,
|
||||
`is-info`, `is-warning` and `is-danger`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="content">
|
||||
<blockquote>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est
|
||||
enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de
|
||||
Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem
|
||||
vobis placet.
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="is-primary">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est
|
||||
enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de
|
||||
Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem
|
||||
vobis placet.
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<blockquote class="is-success">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est
|
||||
enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de
|
||||
Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem
|
||||
vobis placet.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="content">
|
||||
<blockquote>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Ergo, inquit, tibi Q. Est enim effectrix multarum et
|
||||
magnarum voluptatum. Equidem, sed audistine modo de
|
||||
Carneade? Dici enim nihil potest verius. Praeteritis,
|
||||
inquit, gaudeo. Aliter autem vobis placet.
|
||||
</p>
|
||||
</blockquote>
|
||||
<blockquote class="is-primary">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Ergo, inquit, tibi Q. Est enim effectrix multarum et
|
||||
magnarum voluptatum. Equidem, sed audistine modo de
|
||||
Carneade? Dici enim nihil potest verius. Praeteritis,
|
||||
inquit, gaudeo. Aliter autem vobis placet.
|
||||
</p>
|
||||
</blockquote>
|
||||
<blockquote class="is-success">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Ergo, inquit, tibi Q. Est enim effectrix multarum et
|
||||
magnarum voluptatum. Equidem, sed audistine modo de
|
||||
Carneade? Dici enim nihil potest verius. Praeteritis,
|
||||
inquit, gaudeo. Aliter autem vobis placet.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,89 @@
|
||||
### Horizontal dividers
|
||||
|
||||
Vuero provides dividers for your textual content.
|
||||
You can use horizontal and vertical dividers by passing
|
||||
the divider text as a `data-content` html attribute.
|
||||
See the code example for more details about usage.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<div class="content">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
||||
ipsum, ut blandit est tellus sit amet turpis.
|
||||
</p>
|
||||
<div class="is-divider" data-content="OR" />
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
||||
ipsum, ut blandit est tellus sit amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-5 is-offset-1">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
||||
ipsum, ut blandit est tellus sit amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="is-divider-vertical" data-content="OR" />
|
||||
<div class="column">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
||||
ipsum, ut blandit est tellus sit amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<div class="content">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum,
|
||||
quam libero hendrerit ipsum, ut blandit est tellus sit
|
||||
amet turpis.
|
||||
</p>
|
||||
<div class="is-divider" data-content="OR"></div>
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum,
|
||||
quam libero hendrerit ipsum, ut blandit est tellus sit
|
||||
amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5 is-offset-1">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum,
|
||||
quam libero hendrerit ipsum, ut blandit est tellus sit
|
||||
amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="is-divider-vertical" data-content="OR"></div>
|
||||
<div class="column">
|
||||
<p>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum,
|
||||
quam libero hendrerit ipsum, ut blandit est tellus sit
|
||||
amet turpis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,117 @@
|
||||
### Ordered Lists
|
||||
|
||||
Ordered lists `ol` are also genrated using a div with the content class.
|
||||
Ordered list bullets can be controlled with the type attribute.
|
||||
Available types are `type="1"`, `type="A"`, `type="a"`, `type="I"`, `type="i"`
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol type="1">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol type="A">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol class="is-light" type="a">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol class="is-light" type="I">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol class="is-light" type="i">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol type="1">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol type="A">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol class="is-light" type="a">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol class="is-light" type="I">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ol class="is-light" type="i">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,71 @@
|
||||
### Subtitles
|
||||
|
||||
To create a subtitle, you can add the `subtitle` class to any html element.
|
||||
Subtitle sizes can be controlled with numbered modifiers using
|
||||
the patter `is-*` where `*` represents a number between 4 and 6.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 toc-ignore">
|
||||
This is a title
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
This is a huge subtitle
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 toc-ignore">
|
||||
This is a title
|
||||
</h2>
|
||||
<p class="subtitle is-4">
|
||||
This is a big subtitle
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 toc-ignore">
|
||||
This is a title
|
||||
</h2>
|
||||
<p class="subtitle is-5">
|
||||
This is a medium subtitle
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 toc-ignore">
|
||||
This is a title
|
||||
</h2>
|
||||
<p class="subtitle is-6">
|
||||
This is a smaller subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 toc-ignore">This is a title</h1>
|
||||
<p class="subtitle is-4">This is a huge subtitle</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 toc-ignore">This is a title</h2>
|
||||
<p class="subtitle is-4">This is a big subtitle</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 toc-ignore">This is a title</h2>
|
||||
<p class="subtitle is-5">This is a medium subtitle</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 toc-ignore">This is a title</h2>
|
||||
<p class="subtitle is-6">This is a smaller subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
176
documentation/elements/content/content-tables-documentation.md
Normal file
176
documentation/elements/content/content-tables-documentation.md
Normal file
@@ -0,0 +1,176 @@
|
||||
### Tables
|
||||
|
||||
You can also use the `content` class to wrap an html `table` element
|
||||
to apply minimum styles to your table UI.
|
||||
Please refer to the Vuero components section to find more advanced table
|
||||
examples and layouts.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heroes</th>
|
||||
<th>Power</th>
|
||||
<th>Availability</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Superman</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded is-success">Available</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Batman</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star" />
|
||||
<i class="fas fa-star" />
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded">Unavailable</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Deadpool</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star" />
|
||||
<i class="fas fa-star" />
|
||||
<i class="fas fa-star" />
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded">Unavailable</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Spawn</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star" />
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded is-success">Available</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Galactus</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
<i class="fas fa-star warning-text" />
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded">Unavailable</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heroes</th>
|
||||
<th>Power</th>
|
||||
<th>Availability</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Superman</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded is-success">Available</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Batman</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded">Unavailable</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Deadpool</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded">Unavailable</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Spawn</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded is-success">Available</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Galactus</td>
|
||||
<td>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
<i class="fas fa-star warning-text"></i>
|
||||
</td>
|
||||
<td>
|
||||
<span class="tag is-rounded">Unavailable</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
193
documentation/elements/content/content-titles-documentation.md
Normal file
193
documentation/elements/content/content-titles-documentation.md
Normal file
@@ -0,0 +1,193 @@
|
||||
### Titles
|
||||
|
||||
To create a title, you can add the `title` class to any html element.
|
||||
Title sizes can be controlled with numbered modifiers using the patter
|
||||
`is-*` where `*` represents a number between 3 and 6.
|
||||
Titles can also be thinner using the `is-thin`, bold using the `is-bold`
|
||||
or bolder using the `is-bolder` modifier classes.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 is-narrow toc-ignore">
|
||||
This is a title
|
||||
</h1>
|
||||
<p>This is a huge title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 is-narrow toc-ignore">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a big title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 is-narrow toc-ignore">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a medium title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 is-narrow toc-ignore">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a smaller title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 is-narrow toc-ignore is-bold">
|
||||
This is a title
|
||||
</h1>
|
||||
<p>This is a huge bold title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 is-narrow toc-ignore is-bold">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a big bold title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 is-narrow toc-ignore is-bold">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a medium bold title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 is-narrow toc-ignore is-bold">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a smaller bold title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 is-narrow toc-ignore is-bolder">
|
||||
This is a title
|
||||
</h1>
|
||||
<p>This is a huge bolder title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 is-narrow toc-ignore is-bolder">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a big bolder title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 is-narrow toc-ignore is-bolder">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a medium bolder title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 is-narrow toc-ignore is-bolder">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a smaller bolder title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 is-narrow toc-ignore is-thin">
|
||||
This is a title
|
||||
</h1>
|
||||
<p>This is a huge thin title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 is-narrow toc-ignore is-thin">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a big thin title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 is-narrow toc-ignore is-thin">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a medium thin title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 is-narrow toc-ignore is-thin">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a smaller thin title</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 is-narrow toc-ignore">This is a title</h1>
|
||||
<p>This is a huge title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 is-narrow toc-ignore">This is a title</h2>
|
||||
<p>This is a big title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 is-narrow toc-ignore">This is a title</h2>
|
||||
<p>This is a medium title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 is-narrow toc-ignore">This is a title</h2>
|
||||
<p>This is a smaller title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 is-narrow toc-ignore is-bold">This is a title</h1>
|
||||
<p>This is a huge bold title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 is-narrow toc-ignore is-bold">This is a title</h2>
|
||||
<p>This is a big bold title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 is-narrow toc-ignore is-bold">This is a title</h2>
|
||||
<p>This is a medium bold title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 is-narrow toc-ignore is-bold">This is a title</h2>
|
||||
<p>This is a smaller bold title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 is-narrow toc-ignore is-bolder">
|
||||
This is a title
|
||||
</h1>
|
||||
<p>This is a huge bolder title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 is-narrow toc-ignore is-bolder">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a big bolder title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 is-narrow toc-ignore is-bolder">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a medium bolder title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 is-narrow toc-ignore is-bolder">
|
||||
This is a title
|
||||
</h2>
|
||||
<p>This is a smaller bolder title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h1 class="title is-3 is-narrow toc-ignore is-thin">This is a title</h1>
|
||||
<p>This is a huge thin title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-4 is-narrow toc-ignore is-thin">This is a title</h2>
|
||||
<p>This is a big thin title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-5 is-narrow toc-ignore is-thin">This is a title</h2>
|
||||
<p>This is a medium thin title</p>
|
||||
</div>
|
||||
<div class="column is-3">
|
||||
<h2 class="title is-6 is-narrow toc-ignore is-thin">This is a title</h2>
|
||||
<p>This is a smaller thin title</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
@@ -0,0 +1,61 @@
|
||||
### Unordered Lists
|
||||
|
||||
By default, using an unordered `ul` list won't generate an html list.
|
||||
This is part of the Bulma specification. To generate you unordered list,
|
||||
wrap it inside a `div` with the `content` class. Lists can also
|
||||
have the `is-light` modifier to change the text color.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ul class="is-light">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-one-fifth">
|
||||
<div class="content">
|
||||
<ul class="is-light">
|
||||
<li>Coffee</li>
|
||||
<li>Tea</li>
|
||||
<li>Milk</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
Reference in New Issue
Block a user