HarmoniumVersion 8.0.3
+
+
HarmoniumVersion 8.0.3
  • GitHub
  • NPM
  • Starter
  • Download Starter Settings
  • Design Guidelines
  • Overview
  • Design Tokens
  • Blur
  • Border Radius
  • Colors
  • Fonts
  • Font Sizes
  • Font Weights
  • Grid
  • Icon Sizes
  • Line Heights
  • Opacity
  • Screen Widths
  • Shadows
  • Spacing
  • Z-Index
  • Grid
  • Rows & Columns
  • Expanding Columns
  • Forms
  • Buttons
  • Checkboxes
  • Date Picker
  • Inputs
  • Input Group
  • Media Uploader
  • Radio Buttons
  • Selects
  • Textareas
  • Time Picker
  • Slider Input
  • Lists
  • Emptyable
  • Pagination
  • Formatting
  • Currency
  • Number Formatter
  • Pluralize
  • Navigation
  • Menu
  • Top Bar
  • Stateful Drawer
  • StatelessDrawer
  • Breadcrumbs
  • Cards & Media
  • Card
  • Card Layout
  • Flex Video
  • Media Object
  • Containers
  • Accordion
  • Callout
  • Modal
  • Sticky
  • Tabs
  • Table
  • DataGrid
  • Atoms
  • Badge
  • Close Button
  • Icon
  • Utilities
  • Authenticity Token
  • Browser Support Warning
  • Help Text
  • Loader
  • Progress
  • Social
  • Text Align
  • Visibility
  • Prototyping
  • Lorem Ipsum
  • Map
  • Default Map Component
  • Hybrid Map
  • Small Designed Silver Map
  • Designed Retro Map
  • Layout Examples
  • Log In
  • Registration
  • Landing Page Sections
  • Pricing Section
  • React
  • HTML
<div className="rev-Hero rev-TextCenter">
<Row>
<Col>
<h1>Landing Page Hero</h1>
<p className="Lead">This is a sub-header</p>
</Col>
<Col>
<Button inverted large>Get Started!</Button>
</Col>
</Row>
</div>
  • React
  • HTML
<section>
<Row className="rev-Featured Text-center">
<Col medium={6} large={4}>
<h3>Lipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</Col>
<Col medium={6} large={4}>
<h3>Finibus Bonorum</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</Col>
<Col medium={6} large={4}>
<h3>Et Malorum</h3>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</Col>
</Row>
</section>
  • React
  • HTML
<section>
<Row className="rev-Featured">
<Col medium={6} large={4}>
<Card primary>
<Row>
<Col>
<h3>Lipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</Col>
</Row>
</Card>
</Col>
<Col medium={6} large={4}>
<Card primary>
<Row>
<Col>
<h3>Finibus Bonorum</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</Col>
</Row>
</Card>
</Col>
<Col medium={6} large={4}>
<Card primary>
<Row>
<Col>
<h3>Et Malorum</h3>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</Col>
</Row>
</Card>
</Col>
</Row>
</section>
  • React
  • HTML
<Row>
<Col className="Text-center">
<h1>Sed ut perspiciatis unde omnis iste</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<Button>Get Started!</Button>
</Col>
</Row>
  • React
  • HTML
<Row mediumFlex alignCenter>
<Col medium={6}>
<h1>Sed ut perspiciatis unde omnis iste</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</Col>
<Col medium={6} className="Text-center">
<Button large>Get Started!</Button>
</Col>
</Row>
  • React
  • HTML
<Row className="rev-CtaPrimary">
<Col className="Text-center">
<h1>Sed ut perspiciatis unde omnis iste</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<Button inverted>Get Started!</Button>
</Col>
</Row>