1
0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-12 00:54:45 +02:00

Add heading component

This commit is contained in:
Phuoc Nguyen
2019-11-24 22:39:33 +07:00
parent 24d36dc1c6
commit 9a188e8583
6 changed files with 36 additions and 19 deletions

View File

@@ -1,5 +1,6 @@
import React from 'react';
import Heading from '../../components/Heading';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -44,8 +45,8 @@ const Details = () => {
`}
/>
</div>
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
<section>
<Heading title="Use cases" />
<div className="pa4">
<div className="mb4 w4 pa2 relative ba b--black-30 br2">
@@ -67,7 +68,7 @@ const Details = () => {
</div>
</div>
</div>
</div>
</section>
</DetailsLayout>
);
};

View File

@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -56,8 +57,8 @@ const Details = () => {
`}
/>
</div>
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
<section>
<Heading title="Use cases" />
<div className="pa4">
<div className="inline-flex br-pill bg-black-10 pa1">
@@ -71,7 +72,7 @@ const Details = () => {
</label>
</div>
</div>
</div>
</section>
<RelatedPatterns patterns={['Switch']} />
</DetailsLayout>
);