<Base />

<Base /> works as a component to build other components that accepts responsive props.

Example

 open Ancestor

@react.component
let make = () => {
  <Base display=[#xs(#flex)] justifyContent=[#xs(#center)] width=[#xs(100.->#pct)]>
    <Base
      display=[#xs(#flex)]
      flexDirection=[#xs(#column)]
      justifyContent=[#xs(#center)]
      alignItems=[#xs(#center)]
      maxW=[#xs(356->#px)]
      borderRadius=[#xs(1)]
      p=[#xs(3)]
      bgColor=[#xs(#hex("#000"))]
      tag=#section>
      <Base
        border=[#xs((2->#px, #solid, #hex("#f36")))]
        borderRadius=[#xs(6)]
        height=[#xs(96->#px)]
        width=[#xs(96->#px)]
        src="/img/ww-picture.png"
        tag=#img
        mb=[#xs(2)]
      />
      <Typography
        color=[#xs(#hex("#fff"))]
        m=[#xs(0)]
        textAlign=[#xs(#center)]
        fontSize=[#xs(24->#px)]
        tag=#h1>
        {"Walter White"->React.string}
      </Typography>
      <Typography
        textAlign=[#xs(#center)] color=[#xs(#hex("#545454"))] fontSize=[#xs(20->#px)] tag=#p>
        {"Teacher"->React.string}
      </Typography>
      <Typography
        textAlign=[#xs(#center)] color=[#xs(#hex("#a1a1a1"))] fontSize=[#xs(16->#px)] tag=#p>
        {"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old"->React.string}
      </Typography>
    </Base>
  </Base>
}

Walter White

Teacher

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old

Props

Base component accepts all props defined by the system props. Furthermore, the component accepts the following properties:

tag

Defines the tag that will be rendered

Default: #div

• Type: responsiveProp<[

  • | #a
  • | #abbr
  • | #acronym
  • | #address
  • | #applet
  • | #area
  • | #article
  • | #aside
  • | #audio
  • | #b
  • | #base
  • | #basefont
  • | #bdo
  • | #big
  • | #blockquote
  • | #body
  • | #br
  • | #button
  • | #canvas
  • | #caption
  • | #center
  • | #cite
  • | #code
  • | #col
  • | #colgroup
  • | #datalist
  • | #dd
  • | #del
  • | #dfn
  • | #div
  • | #dl
  • | #dt
  • | #em
  • | #embed
  • | #fieldset
  • | #figcaption
  • | #figure
  • | #font
  • | #footer
  • | #form
  • | #frame
  • | #frameset
  • | #head
  • | #header
  • | #h1
  • | #h2
  • | #h3
  • | #h3
  • | #h4
  • | #h5
  • | #h6
  • | #hr
  • | #html
  • | #i
  • | #iframe
  • | #img
  • | #input
  • | #ins
  • | #kbd
  • | #label
  • | #legend
  • | #li
  • | #link
  • | #main
  • | #map
  • | #mark
  • | #meta
  • | #meter
  • | #nav
  • | #noscript
  • | #object
  • | #ol
  • | #optgroup
  • | #option
  • | #p
  • | #param
  • | #pre
  • | #progress
  • | #q
  • | #s
  • | #samp
  • | #script
  • | #section
  • | #select
  • | #small
  • | #source
  • | #span
  • | #strike
  • | #strong
  • | #style
  • | #sub
  • | #sup
  • | #table
  • | #tbody
  • | #td
  • | #textarea
  • | #tfoot
  • | #th
  • | #thead
  • | #time
  • | #title
  • | #tr
  • | #u
  • | #ul
  • | #var
  • | #video
  • | #wbr

  ]>