卡组件包含可以混合和匹配的几个元素:
Card: 主容器CardHeader:一个带阴影的水平条CardHeaderTitle:居左加粗的标题CardHeaderIcon:Icon占位符
CardImage:全宽响应式图片CardContent: 多用途容器，用于包含其他元素CardFooter:水平控制器列表CardFooterItem:可重复列表项
Card卡片
全方位灵活弹性且可组合的组件
你可以在CardHeaderTitle上添加IsCentered修饰符把标题居中
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. @bulmaio.
#css #responsive
<div style="max-width: 50%;">
<Card>
<CardImage>
<Image Ratio="Ratio.Ratio4by3">
<img src="/images/image-placeholder.jpg" alt="placeholder imag"/>
</Image>
</CardImage>
<CardContent>
<Media>
<MediaLeft>
<Image Size="Size.Square48">
<img alt="" src="/images/image-placeholder.jpg"/>
</Image>
</MediaLeft>
<MediaContent>
<Title Size="Size.Size4">Loogn</Title>
<Subtitle Size="Size.Size6">@@loogn</Subtitle>
</MediaContent>
</Media>
<Content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</Content>
</CardContent>
</Card>
</div>
例子
子组件可以灵活组合
Compontent
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
@bulmaio. #css #responsive
<div style="max-width: 50%;">
<Card>
<CardHeader>
<CardHeaderTitle>Compontent</CardHeaderTitle>
<CardHeaderIcon>
<Icon IconClass="fa fa-angle-down"></Icon>
</CardHeaderIcon>
</CardHeader>
<CardContent>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
<a href="#">@@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</CardContent>
<CardFooter>
<CardFooterItem href="#">Save</CardFooterItem>
<CardFooterItem href="#">Edit</CardFooterItem>
<CardFooterItem href="#">Delete</CardFooterItem>
</CardFooter>
</Card>
</div>文档