modular-css-layout 插件 cheatsheet

Multi Column

使用 [!<anycallout>|<left-or-right>-<size>] 仅影响阅读视图，或使用 [!<anycallout>|float-<left-or-right>-<size>] 也适用于实时预览。
示例：
- [!info|float-right-medium]
- [!blank|right-small]
- [!multi-column|right-fixed-medium]
- [!multi-column|center-fixed-small]
- [!multi-column|no-wrap]

callout	Apply in LP?	Which Side?	Preset FC Size
`[!multi-column]` 多列布局 `[!blank-container]` 不可见容器 `[!note]` / `[!abstract]` / `[!info]` `[!todo]` / `[!tip]` / `[!success]` `[!question]` / `[!warning]` `[!failure]` / `[!danger]` / `[!bug]` `[!example]` / `[!quote]`	`<empty>` `float`	`left` `right` `center`	`small` `medium` `large`

Multi Column Callout

> [!multi-column]
>
> > [!note]+ Use Case
> > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
> >
> > ##### User Case Background
> >
> > Vitae nunc sed velit dignissim sodales. In cursus turpis massa tincidunt dui ut ornare lectus.
>
> > [!warning]+ Resources
> >
> > #### Requirement
> >
> > - Lorem ipsum dolor sit amet
> > - Vitae nunc sed velit dignissim sodales.
> > - In cursus turpis massa tincidunt dui ut ornare lectus.
>
> > [!todo]+
> >
> > - [x] Define Use Case
> > - [ ] Craft User Story
> > - [ ] Develop draft sketches

Multi-column

Use Case

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

User Case Background

Vitae nunc sed velit dignissim sodales. In cursus turpis massa tincidunt dui ut ornare lectus.

Resources

Requirement

Lorem ipsum dolor sit amet
Vitae nunc sed velit dignissim sodales.
In cursus turpis massa tincidunt dui ut ornare lectus.

Todo

Define Use Case
Craft User Story
Develop draft sketches

[!multi-column] 多列
- [!multi-column|center-fixed] 用于居中对齐
- [!multi-column|left-fixed] 用于向左对齐
- [!multi-column|right-fixed] 用于右对齐
- [!multi-column|no-wrap] 不换行多列
宽度控制
- min-0 覆盖并禁用样式设置中设置的最小宽度
- wide-2 标注尺寸为两倍
- wide-3 三倍大小
- wide-4 四倍大小
- wide-5 五倍大小

## Icon Links Dashboard using `[!multi-column|center-fixed-small]`

> [!multi-column|center-fixed-small]
>
>> [!blank|center]
>> [![lightbulb icon|80](https://img.icons8.com/ios/250/FFFFFF/light-on.png) <br/> Interests](target%20note.md)
>>
>> [![macbook icon|80](https://img.icons8.com/ios/250/FFFFFF/macbook.png) <br/> Technology](target%20note.md)
>
>> [!blank|center]
>> [![brain icon|80](https://img.icons8.com/ios/250/FFFFFF/brain.png) <br/> Life & Wisdom](target%20note.md)
>>
>> [![briefcase icon|80](https://img.icons8.com/ios/250/FFFFFF/business.png) <br/> Work](target%20note.md)
>
>> [!blank|center]
>> [![running icon|80](https://img.icons8.com/ios/250/FFFFFF/sports-mode.png) <br/> Health](target%20note.md)
>>
>> [![home icon|80](https://img.icons8.com/ios/250/FFFFFF/house-with-a-garden.png) <br/> Family](target%20note.md)