Arches: CVquality

Arches:CVquality

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/cvquality_boot.css, line 7793

5.1.3 Date

Style a date marker

Example

Default styling

May 12 2018
voluptate anim consequat tempor adipisicing aliquip non do
Grand Hayatt
Cincinnati, OH
May 12, 20188:00AM - 2:00PM (EST)

Eu dolore ullamco laboris veniam commodo pariatur pariatur proident ea. Esse in in nisi non eiusmod consequat pariatur officia mollit incididunt qui consectetur est. Ex aute non amet elit. Voluptate commodo minim sit Lorem occaecat sit aute reprehenderit. Dolore pariatur cupidatat velit anim enim veniam mollit aute fugiat magna do. Culpa non veniam non officia exercitation laborum dolor irure exercitation tempor adipisicing tempor elit nulla.

Add to Calendar: Outlook | Google | iCal
Register
<div class="br_shade-2 card event">
    <div class="bg_shade-4 br-l_1 br-t_1 br_solid br_white-5 card-header flex">
            <div class="flex_shrink"><div class="bg_white br_3 br_primary br_solid event-date flex flex_column font_display lh_1 p-x_2 text_center">
  <span class="month font_2">May</span>
  <span class="day font_3 font_bold">12</span>
  <span class="bg_primary c_white-9 font_0 font_1 font_bold m-b_n2 m-x_n2 year">2018</span>
    </div></div>
            <div class="event-details flex_grow lh_1 p-l_4">
                <div class="c_secondary-n1 font_2 m-b_2 title">voluptate anim consequat tempor adipisicing aliquip non do</div>
                <div class="c_primary font_0 font_bold location-title m-b_2">Grand Hayatt</div>
                <div class="c_shade-n4 font_n1 location">Cincinnati, OH </div>
                <span class="font_italic font_n2 full-date p-r_3">May 12, 2018</span><span class="time font_italic font_n2 p-r_3"><span class="begin">8:00AM</span> - <span class="end">2:00PM</span> <span class="timezone">(EST)</span></span>
            </div>
    </div>
    <div class="card-body font_0 p-x_3 p-x_4:md p-y_3 p-y_4:md">
        <p>Eu dolore ullamco laboris veniam commodo pariatur pariatur proident ea. Esse in in nisi non eiusmod consequat pariatur officia mollit incididunt qui consectetur est. Ex aute non amet elit. Voluptate commodo minim sit Lorem occaecat sit aute reprehenderit. Dolore pariatur cupidatat velit anim enim veniam mollit aute fugiat magna do. Culpa non veniam non officia exercitation laborum dolor irure exercitation tempor adipisicing tempor elit nulla.</p>
    </div>
    <div class="bg_shade-5 c_shade-1 card-footer font_n1 text_center"><strong>Add to Calendar: </strong><a href="#" class="link">Outlook</a> | <a href="#" class="link">Google</a> | <a href="#" class="link">iCal</a></div>
    <div class="bg_shade-5 br-t_0 card-footer p-t_0"><a href="#" class="bg_secondary br_radius btn btn-secondary btn-block c_white font_bold h:bg_secondary-n2 h:shadow shadow_2">Register</a></div></div>
Copy Code