coreui-free-react-admin-template

1
import React from 'react'
2
import { CButton, CCard, CCardBody, CCardHeader, CCol, CContainer, CRow } from '@coreui/react'
3
import { DocsLink } from 'src/components'
4

5
const Jumbotrons = () => {
6
  return (
7
    <>
8
      <CCard className="mb-4">
9
        <CCardHeader>
10
          Jumbotron
11
          <DocsLink name="CJumbotron" />
12
        </CCardHeader>
13
        <CCardBody>
14
          <CContainer className="py-5" fluid>
15
            <h1 className="display-5 fw-bold">Custom jumbotron</h1>
16
            <p className="col-md-8 fs-4">
17
              Using a series of utilities, you can create this jumbotron, just like the one in
18
              previous versions of Bootstrap. Check out the examples below for how you can remix and
19
              restyle it to your liking.
20
            </p>
21
            <CButton color="primary" size="lg">
22
              Example button
23
            </CButton>
24
          </CContainer>
25
          <CRow className="align-items-md-stretch">
26
            <CCol md={6}>
27
              <div className="h-100 p-5 text-white bg-dark rounded-3">
28
                <h2>Change the background</h2>
29
                <p>
30
                  Swap the background-color utility and add a `.text-*` color utility to mix up the
31
                  jumbotron look. Then, mix and match with additional component themes and more.
32
                </p>
33
                <CButton color="light" variant="outline">
34
                  DocsExample button
35
                </CButton>
36
              </div>
37
            </CCol>
38
            <CCol md={6}>
39
              <div className="h-100 p-5 bg-light border rounded-3">
40
                <h2>Add borders</h2>
41
                <p>
42
                  Or, keep it light and add a border for some added definition to the boundaries of
43
                  your content. Be sure to look under the hood at the source HTML here as we&#39;ve
44
                  adjusted the alignment and sizing of both column&#39;s content for equal-height.
45
                </p>
46
                <CButton color="secondary" variant="outline">
47
                  DocsExample button
48
                </CButton>
49
              </div>
50
            </CCol>
51
          </CRow>
52
        </CCardBody>
53
      </CCard>
54
    </>
55
  )
56
}
57

58
export default Jumbotrons
59