-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Block React Component
Block React component represents Content Block element designed (mostly) to add extra formatting and required spacing for text content.
Usage example
<!-- Block -->
<ContentBlock>...</ContentBlock>
<!-- With additional "inner" element for extra highlighting -->
<ContentBlock inner>...</ContentBlock>
<!-- With block title -->
<ContentBlockTitle>Block Title</ContentBlockTitle>
<ContentBlock>...</ContentBlock>
<!-- Inset -->
<ContentBlock inset>...</ContentBlock>
Renders to:
<!-- Block -->
<div class="content-block">...</div>
<!-- With additional "inner" element for extra highlighting -->
<div class="content-block">
<div class="content-block-inner">...</div>
</div>
<!-- With block title -->
<div class="content-block-title">Block Title</div>
<div class="content-block">...</div>
<!-- Inset -->
<div class="content-block inset">...</div>
Properties
Prop | Type | Default | Description |
---|---|---|---|
inset | boolean | Makes block inset | |
tabletInset | boolean | Makes block inset on tablets, but not on phones | |
inner | boolean | Adds additional "inner" element for content extra highlighting | |
tabs | boolean | Adds additional "tabs" class to make the block tabs wrapper | |
tab | boolean | Adds additional "tab" class when block should be used as a Tab | |
active | boolean | Adds additional "active" class when block used as a Tab and makes it active tab | |
noHairlines | boolean | Removes outer hairlines. |