Box

<Columns desktop="3" tablet="2" mobile="1">
  <Box className="box-outlined box-secondary">
    <h3>Texas Car Insurance: How Much a Teen Driver Will Cost You</h3>
    <p className="margin-paragraph">
      Median annual price change for families with a teen driver on their
      policy:
    </p>
    <span className="box-emphasize box-colored-text">$1,969 INCREASE</span>
    <p>This is a difference of 130%.</p>
  </Box>
  <Box className="box-outlined box-secondary">
    <h3>The real price of a speeding ticket</h3>
    <p className="margin-paragraph">
      Average annual premium increase if your teen gets a speeding ticket
      while driving 11-15mph over the speed limit:
    </p>
    <Columns desktop="2" tablet="2" mobile="2">
      <div className="box-icon-description">
        <Icon name="male" size="32px" altText="male" />
        <b>Male teen</b>
        <span className="box-emphasize box-colored-text">$423</span>
      </div>
      <div className="box-icon-description">
        <Icon name="female" size="32px" altText="female" />
        <b>Female teen</b>
        <span className="box-emphasize box-colored-text">$423</span>
      </div>
    </Columns>
  </Box>
  <Box className="box-outlined">
    <h3>Potential discounts for teens in texas</h3>
    <p className="margin-paragraph">
      Impact on annual premium with good student and defensive driving
      discounts:
    </p>
    <Icon name="coins" size="46px" altText="coins" />
    <span className="box-icon-description box-emphasize box-colored-text">
      $522 SAVED
    </span>
  </Box>
</Columns>

<Columns desktop="2" tablet="2" mobile="1">
  <Box className="box-outlined box-primary">
    <h3>Texas Car Insurance: How Much a Teen Driver Will Cost You</h3>
    <p className="margin-paragraph">
      Median annual price change for families with a teen driver on their
      policy:
    </p>
    <span className="box-emphasize box-colored-text">$1,969 INCREASE</span>
    <p>This is a difference of 130%.</p>
  </Box>
  <Box className="box-solid box-primary">
    <h3>Texas Car Insurance: How Much a Teen Driver Will Cost You</h3>
    <p className="margin-paragraph">
      Median annual price change for families with a teen driver on their
      policy:
    </p>
    <span className="box-emphasize box-colored-text">$1,969 INCREASE</span>
    <p>This is a difference of 130%.</p>
  </Box>
</Columns>

<Columns desktop="3" tablet="2" mobile="1">
  <Box className="box-solid box-primary">
    <h3>Texas Car Insurance: How Much a Teen Driver Will Cost You</h3>
    <p className="margin-paragraph">
      Median annual price change for families with a teen driver on their
      policy:
    </p>
    <span className="box-emphasize box-colored-text">$1,969 INCREASE</span>
    <p>This is a difference of 130%.</p>
  </Box>
  <Box className="box-outlined box-secondary">
    <h3>Texas Car Insurance: How Much a Teen Driver Will Cost You</h3>
    <p className="margin-paragraph">
      Median annual price change for families with a teen driver on their
      policy:
    </p>
    <span className="box-emphasize box-colored-text">$1,969 INCREASE</span>
    <p>This is a difference of 130%.</p>
  </Box>
</Columns>

<Columns desktop="2" tablet="2" mobile="1">
  <p style={{ textAlign: 'right' }}>
    In Money and the Mechanism of Exchange (1875), William Stanley Jevons
    famously analyzed money in terms of four functions: a medium of exchange,
    a common measure of value (or unit of account), a standard of value (or
    standard of deferred payment), and a store of value. By 1919, Jevons's
    four functions of money were summarized in the couplet...
  </p>
  <Box className="box-outlined box-primary">
    <h3>Texas Car Insurance: How Much a Teen Driver Will Cost You</h3>
    <p className="margin-paragraph">
      Median annual price change for families with a teen driver on their
      policy:
    </p>
    <span className="box-emphasize box-colored-text">$1,969 INCREASE</span>
    <p>This is a difference of 130%.</p>
  </Box>
</Columns>
<Columns desktop="2" tablet="2" mobile="1" style={{ marginTop: 20 }}>
  <Box className="box-solid box-primary">
    <h3>Texas Car Insurance: How Much a Teen Driver Will Cost You</h3>
    <p className="margin-paragraph">
      Median annual price change for families with a teen driver on their
      policy:
    </p>
    <span className="box-emphasize box-colored-text">$1,969 INCREASE</span>
    <p>This is a difference of 130%.</p>
  </Box>
  <p style={{ textAlign: 'left' }}>
    In most countries, the majority of money is mostly created as M1/M2 by
    commercial banks making loans. Contrary to some popular misconceptions,
    banks do not act simply as intermediaries, lending out deposits that
    savers place with them, and do not depend on central bank money (M0) to
    create new loans and deposits.
  </p>
</Columns>

<Box className="box-solid box-primary" fullWidth>
  <h3 className="title-full-width text-left">
    Premium comparison for two adults + 16 years old
  </h3>
  <Columns desktop="2" tablet="2" mobile="1">
    <div className="center-content">
      <Icon name="car" size="68px" altText="car" className="center-content" />
      <div className="text-left box-column-item">
        <b>Average premium for two 2014</b>
        <p>Mustang GTs</p>
        <span className="box-emphasize box-colored-text">$6,164</span>
      </div>
    </div>
    <div className="center-content">
      <Icon
        name="car2"
        size="68px"
        altText="car"
        className="center-content"
      />
      <div className="text-left box-column-item">
        <b>Average premium for two 2008</b>
        <p>Town and Country Limiteds</p>
        <span className="box-emphasize box-colored-text">$3,536</span>
      </div>
    </div>
  </Columns>
  <Columns desktop="3" tablet="3" mobile="1" className="break-line">
    <b className="text-left">Anual benefits of minivans:</b>
    <span className="box-emphasize box-colored-text">$2,628 saved</span>
    <p className="text-right">This is 43% less expensive.</p>
  </Columns>
</Box>

<div>
  <Box className="box-outlined box-secondary" float="right">
    <h3>Texas Car Insurance: How Much a Teen Driver Will Cost You</h3>
    <p className="margin-paragraph">
      Median annual price change for families with a teen driver on their
      policy:
    </p>
    <span className="box-emphasize box-colored-text">$1,969 INCREASE</span>
    <p>This is a difference of 130%.</p>
  </Box>
  <p style={{ textAlign: 'left', fontSize: 16, marginTop: 0 }}>
    Distracted driving is such a problem among young Texas that the Texas
    Department of Safety created an eight-part video about it. Called
    <a href="google.com">IMPACT Texas teen Drivers (ITTD) </a>, the series
    explores the dangers of distracted driving through real-life stories of
    teens who died from texting, talking on cell phones and otherwise
    multitasking while driving. "It's not about bad kids doing bad things, but
    about good kids making poor choices," the department states.
  </p>
</div>
<p style={{ textAlign: 'left', fontSize: 16 }}>
  The insurance department also reminds drivers that some policies require all
  covered drivers to be named on the policy, so tell your insurance agent as
  soon as your child turns 16. Otherwise, the TDI warns, "if you don't have
  all the drivers in your family listed on the policy and the company learns
  about them later - because of an accident claim, for instance - the company
  may bill you for the extra premium you should have paid, deny your claim and
  coverage, or refuse to renew your policy in the future."
</p>

<Box className="box-solid box-primary" fullWidth>
  <h3 className="title-full-width text-left">
    Premium comparison for two adults + 16 years old
  </h3>
  <Columns desktop="2" tablet="2" mobile="1">
    <div className="center-content">
      <Icon name="car" size="68px" altText="car" className="center-content" />
      <div className="text-left box-column-item">
        <b>Average premium for two 2014</b>
        <p>Mustang GTs</p>
        <span className="box-emphasize box-colored-text">$6,164</span>
      </div>
    </div>
    <div className="center-content">
      <Icon
        name="car2"
        size="68px"
        altText="car"
        className="center-content"
      />
      <div className="text-left box-column-item">
        <b>Average premium for two 2008</b>
        <p>Town and Country Limiteds</p>
        <span className="box-emphasize box-colored-text">$3,536</span>
      </div>
    </div>
  </Columns>
  <Columns desktop="3" tablet="3" mobile="1" className="break-line">
    <b className="text-left">Anual benefits of minivans:</b>
    <span className="box-emphasize box-colored-text">$2,628 saved</span>
    <p className="text-right">This is 43% less expensive.</p>
  </Columns>
</Box>
<Columns
  desktop="2"
  tablet="2"
  mobile="1"
  style={{ marginTop: 20, marginBottom: 20 }}
>
  <Box
    className="box-outlined box-primary fullwidth-columned-height"
    fullWidth
  >
    <h3>Cheaper premium for college vs. high school drivers</h3>
    <p className="margin-paragraph">
      Median premium change with a college student vs. high school driver:
    </p>
    <p
      style={{ marginTop: 16, marginBottom: 16 }}
      className="box-emphasize box-colored-text"
    >
      $787 DECREASE
    </p>
    <p>This is a savings of 21%.</p>
  </Box>
  <Box
    className="box-outlined box-primary fullwidth-columned-height"
    fullWidth
  >
    <h3>Potential discounts for teens in texas</h3>
    <p className="margin-paragraph">
      Impact on annual premium with good student and defensive driving
      discounts:
    </p>
    <Icon name="coins" size="42px" altText="coins" />
    <span className="box-icon-description box-emphasize box-colored-text">
      $522 SAVED
    </span>
  </Box>
</Columns>
<Box className="box-outline box-primary" fullWidth>
  <h3 className="text-center">Texas students: a long-distance discount</h3>
  <p className="margin-paragraph">
    You may pay a smaller annual family premium if your child lives 150 miles
    or more away from home.
  </p>
  <Columns desktop="2" tablet="2" mobile="1">
    <div>
      <Icon name="male" size="34px" altText="male" />
      <div>
        <b>Average premium for a 19-year-old male</b>
        <Columns desktop="2" tablet="2" mobile="1">
          <div className="center-content">
            <Icon
              name="car2"
              size="26px"
              altText="car"
              className="center-content"
            />
            <p style={{ fontSize: 14, marginLeft: 8 }}>$4,041 at home</p>
          </div>
          <div className="center-content">
            <Icon
              name="graduationCap"
              size="26px"
              altText="graduation"
              className="center-content"
            />
            <p style={{ fontSize: 14, marginLeft: 8 }}>$3,471 at school</p>
          </div>
        </Columns>
        <p
          className="box-emphasize box-colored-text"
          style={{ marginTop: 16 }}
        >
          $570 IN SAVINGS
        </p>
      </div>
    </div>
    <div>
      <Icon name="female" size="34px" altText="female" />
      <div>
        <b>Average premium for a 19-year-old female</b>
        <Columns desktop="2" tablet="2" mobile="1">
          <div className="center-content">
            <Icon
              name="car2"
              size="26px"
              altText="car"
              className="center-content"
            />
            <p style={{ fontSize: 14, marginLeft: 8 }}>$3,606 at home</p>
          </div>
          <div className="center-content">
            <Icon
              name="graduationCap"
              size="26px"
              altText="graduation"
              className="center-content"
            />
            <p style={{ fontSize: 14, marginLeft: 8 }}>$3,158 at school</p>
          </div>
        </Columns>
        <p
          className="box-emphasize box-colored-text"
          style={{ marginTop: 16 }}
        >
          $448 IN SAVINGS
        </p>
      </div>
    </div>
  </Columns>
</Box>

<Box className="box-outlined box-primary" fullWidth>
  <h3 style={{ marginBottom: 0 }}>Age savings for Texas service members</h3>
  <Columns
    desktop="2"
    tablet="2"
    mobile="2"
    style={{
      marginBottom: 12,
      marginTop: 12,
      marginLeft: 'auto',
      marginRight: 'auto',
      maxWidth: 600,
    }}
  >
    <div
      className="text-center box-column-item"
      style={{ display: 'inline-block' }}
    >
      <Icon name="male" size="46px" altText="male" />
      <div style={{ display: 'inline-block' }}>
        <b
          style={{
            marginRight: 10,
            marginLeft: 10,
            fontSize: 14,
            display: 'inline-block',
          }}
        >
          25 years
        </b>
        <span
          className="box-emphasize box-colored-text"
          style={{ color: '#FA8072' }}
        >
          $1,608
        </span>
        <br />
        <b
          style={{
            marginRight: 10,
            marginLeft: 10,
            fontSize: 14,
            display: 'inline-block',
          }}
        >
          50 years
        </b>
        <span
          className="box-emphasize box-colored-text"
          style={{ color: '#FA8072' }}
        >
          $1,203
        </span>
      </div>
    </div>
    <div
      className="text-center box-column-item"
      style={{ display: 'inline-block' }}
    >
      <Icon name="female" size="46px" altText="female" />
      <div style={{ display: 'inline-block' }}>
        <b
          style={{
            marginRight: 10,
            marginLeft: 10,
            fontSize: 14,
            display: 'inline-block',
          }}
        >
          25 years
        </b>
        <span
          className="box-emphasize box-colored-text"
          style={{ color: '#FA8072' }}
        >
          $1,539
        </span>
        <br />
        <b
          style={{
            marginRight: 10,
            marginLeft: 10,
            fontSize: 14,
            display: 'inline-block',
          }}
        >
          50 years
        </b>
        <span
          className="box-emphasize box-colored-text"
          style={{ color: '#FA8072' }}
        >
          $1,200
        </span>
      </div>
    </div>
  </Columns>
  <BreakLine color="#405AE0" type="solid" thickness={1} />
  <Columns
    desktop="2"
    tablet="2"
    mobile="2"
    style={{
      marginTop: 8,
      marginLeft: 'auto',
      marginRight: 'auto',
      maxWidth: 600,
    }}
  >
    <span className="box-emphasize box-colored-text">$405 Saved</span>
    <div className="text-center box-column-item">
      <span className="box-emphasize box-colored-text">$339 Saved</span>
    </div>
  </Columns>
  <p className="margin-paragraph">
    Median auto insurance for service members: $1.243
  </p>
</Box>

<div>
  <Box className="box-outlined box-primary" unsetHeight float="right">
    <h3 style={{ marginBottom: 0 }}>
      What percentage of drivers in Texas lack vehicle insurance?
    </h3>
    <p
      className="box-emphasize box-colored-text"
      style={{ marginTop: 26, marginBottom: 16 }}
    >
      14.1%
    </p>
    <p style={{ marginBottom: 10 }}>National average: 13%</p>
    <p style={{ fontSize: 14, marginBottom: -10 }}>
      <b>Source:</b>
    </p>
    <a href="https://www.iii.org/" taget="_blank" style={{ fontSize: 14 }}>
      Insurance Information Institute.
    </a>
  </Box>
  <p
    style={{ textAlign: 'left', fontSize: 16, marginTop: 0, lineHeight: 1.9 }}
  >
    Insurance companies in the state offer a Texas Personal Automobile Policy,
    a standardized policy that offers eight types of insurance in one policy.
    But because exclusions vary from policy to policy, the Texas Office of
    Public Insurance Counsel recommends drivers know exactly who and what is
    covered.
  </p>
</div>