Source: dist/css/acc_boot.css, line 10664
Three equally weighted cards in a horizontal grid layout. Each card supports an image, header, subtext, and optional link.
Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)
Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)
Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)
<div class="grid columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
<div data-area="card" class="br_solid br_black-3 br_1 br_radius p_4 flex flex_column gap_3 bg_white shadow_bevel-bold relative">
<header class="aspect_5x1 bg_black-2 grid items_center justify_center m-b_4 m-t_n4 m-x_n4 overflow-clip w_auto">
<img alt="New science and guidelines" lazy-load="true" class="absolute inset_0 w_100" src="https://placeholder.pics/svg/500x100/0ccda3-1db0f0/343e42">
</header>
<main class="m_auto">
<h3 class="">
Rerum libg dero pariatur (40 Characters) <small class="block font-size_down-1 font_medium m-t_3">Sed ut perspiciatis unde omnis iste natus er (60 Characters)</small>
</h3>
<p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)</p>
</main>
<footer class="flex flex_row justify_start gap_3 m-t_auto m_auto">
<button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button> </footer>
</div> <div data-area="card" class="br_solid br_black-3 br_1 br_radius p_4 flex flex_column gap_3 bg_white shadow_bevel-bold relative">
<header class="aspect_5x1 bg_black-2 grid items_center justify_center m-b_4 m-t_n4 m-x_n4 overflow-clip w_auto">
<img alt="New science and guidelines" lazy-load="true" class="absolute inset_0 w_100" src="https://placeholder.pics/svg/500x100/0ccda3-1db0f0/343e42">
</header>
<main class="m_auto">
<h3 class="">
Rerum libg dero pariatur (40 Characters) <small class="block font-size_down-1 font_medium m-t_3">Sed ut perspiciatis unde omnis iste natus er (60 Characters)</small>
</h3>
<p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)</p>
</main>
<footer class="flex flex_row justify_start gap_3 m-t_auto m_auto">
<button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button> </footer>
</div> <div data-area="card" class="br_solid br_black-3 br_1 br_radius p_4 flex flex_column gap_3 bg_white shadow_bevel-bold relative">
<header class="aspect_5x1 bg_black-2 grid items_center justify_center m-b_4 m-t_n4 m-x_n4 overflow-clip w_auto">
<img alt="New science and guidelines" lazy-load="true" class="absolute inset_0 w_100" src="https://placeholder.pics/svg/500x100/0ccda3-1db0f0/343e42">
</header>
<main class="m_auto">
<h3 class="">
Rerum libg dero pariatur (40 Characters) <small class="block font-size_down-1 font_medium m-t_3">Sed ut perspiciatis unde omnis iste natus er (60 Characters)</small>
</h3>
<p>Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)</p>
</main>
<footer class="flex flex_row justify_start gap_3 m-t_auto m_auto">
<button class="btn capitalize wrap wrap_balanced btn-shade wrap">btn-shade wrap</button> </footer>
</div></div>