Contents:

• Button - Small White
• Button - Medium White
• Button - Full Page Width
• Column Code
• Line - Red (full page width line)
• Menu - Current COS MI
• Menu - Drop Down (does not work well on mobile phones)
• Menu - Old COS MI
• Pictures/Videos in 2 Columns
• Show/Hide Button
• Slider (Automatic slider on desktop)
• Title of Page (placed beneath page menu)

Button - Small White

Sample: Small

Code:

<a class=“btn btn–small btn–sky-blue mrgn-c” href=“insert link here”>Button Name Here</a>

Button - Medium White

Sample: Medium

Code:

<a class=“btn btn–medium btn–sky-blue mrgn-c” href=“insert link here”>Button Name Here</a>

Button - Full Page Width

Sample: Full Page Width

Code:

<a class=“btn btn–large btn–sky-blue mrgn-c” href=“insert link here”>Button Name Here</a>

Column Code (Right Hand Column)
Note: adding the Column code will require you to add code two places.

• After the menu code/before your page content.
• After your page content

Sample:

PAGE CONTENT HERE

Code:

<div class=“layout-two-column wrapper”>

<article class=“layout-two-column__item–big main-block”>

<div class=“article-content overflow”>

<h1 class=“title title–page title–page-mobile” style=“text-align: center;”>PAGE TITLE</h1>

PAGE CONTENT HERE</div>

</article>

<aside class=“layout-two-column__item–small aside”>

<div class=“aside-space grey radius mrgn20”>

<h3 class=“title title–small title–upper title–letter-space title–space-b-small bold align-c”>More Ways to Volunteer</h3>

<p class=“mrgn20”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78717/78717_original.png?” alt=“” width=“200” height=“489” /></p>

</div>

</aside>

</div>

Line - Red (full page width line)

Sample:

Note: Actual code is for full width line. To adjust width use the width percent in the code.

Code:

<hr style=“background-color: #b51212; border-width: 0; color: #b51212; height: 2px; line-height: 0; text-align: left; vertical-align: middle; width: 100%;” />

Menu - Current COS MI

Sample:

Events

Blog

Become a Volunteer

Training

Resources

Podcast

Code:

<style type=“text/css”>

#mobileshow { 

display:none; 

}

@media screen and (max-width: 500px) {

#mobileshow { 

display:block; }

}

</style>

<div id=“mobileshow”>

<p style=“text-align: center;”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79368/79368_original.jpg?” alt=“” width=“500” height=“41” /><a href=“https://conventionofstates.com/mi”><img style=“display: block; margin-left: auto; margin-right: auto;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79259/79259_original.png?” alt=“” width=“225” height=“102” /></a><a href=“https://conventionofstates.com/michigan-resources”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79376/79376_original.jpg?” alt=“” width=“90” height=“30” /></a> <a href=“https://conventionofstates.com/mivolunteer”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79377/79377_original.jpg?” alt=“” width=“90” height=“43” /></a> <a href=“https://conventionofstates.com/mitraining”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79378/79378_original.jpg?” alt=“” width=“90” height=“29” /></a><br /><a href=“https://conventionofstates.com/michigan-events”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79373/79373_original.jpg?” alt=“” width=“90” height=“29” /></a> <a href=“https://conventionofstates.com/michigan-podcast”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79374/79374_original.jpg?” alt=“” width=“90” height=“29” /></a> <a href=“https://conventionofstates.com/news?utf8=%E2%9C%93&amp;filters%5Bstate%5D=23”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79375/79375_original.jpg?” alt=“” width=“90” height=“29” /></a><br /><a href=“https://www.facebook.com/COSprojectMI” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78017/78017_original.png?” alt=“” width=“30” height=“30” /></a> &nbsp;<a href=“https://www.instagram.com/conventionofstatesmi/” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78018/78018_original.png?” alt=“” width=“30” height=“30” /></a> &nbsp;<a href=“https://www.linkedin.com/company/michigan-citizens-for-convention-of-states/?viewAsMember=true” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78019/78019_original.png?” alt=“” width=“30” height=“30” /></a> &nbsp;<a href=“https://rumble.com/c/michigan4cos” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78020/78020_original.png?” alt=“” width=“30” height=“30” /></a> &nbsp;<a href=“https://truthsocial.com/@michigan_COS” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78021/78021_original.png?” alt=“” width=“30” height=“30” /></a> &nbsp;<a href=“https://www.youtube.com/@michforconventionofstates” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78022/78022_original.png?” alt=“” width=“30” height=“30” /></a> &nbsp;<a href=“https://twitter.com/michigan_COS” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78023/78023_original.png?” alt=“” width=“30” height=“30” /></a></p>

</div>

<div class=“navigation flex align-c-flex”><nav class=“navbar-desctop”>

<table style=“border-collapse: collapse; width: 100%; height: 116px;” border=“0”>

<tbody>

<tr style=“height: 65px;”>

<td style=“width: 95.542%; vertical-align: bottom; height: 69px;” colspan=“7”><a href=“https://conventionofstates.com/michigan-home”><img style=“margin-top: 1px; margin-bottom: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79299/79299_original.jpg?” alt=“” width=“1600” height=“62” /></a></td>

</tr>

<tr style=“height: 10px;”>

<td style=“width: 28%; height: 47px; vertical-align: bottom;” rowspan=“2”><a title=“Home” href=“https://conventionofstates.com/michigan-home”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79259/79259_original.png?” alt=“” width=“250” height=“114” /></a></td>

<td style=“height: 10px; vertical-align: bottom; text-align: right; width: 12%;”>

<p><span style=“font-size: 6px;”>&nbsp;</span></p>

</td>

<td style=“vertical-align: bottom; text-align: right; width: 12%; height: 10px;”><span style=“font-size: 14px;”>&nbsp;</span></td>

<td style=“vertical-align: bottom; text-align: right; width: 12%; height: 10px;”><span style=“font-size: 14px;”>&nbsp;</span></td>

<td style=“vertical-align: bottom; text-align: right; width: 36%; height: 10px;” colspan=“3”><span style=“font-size: 14px;”>&nbsp;</span><a href=“https://www.facebook.com/COSprojectMI” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78017/78017_original.png?” alt=“” width=“35” height=“35” /></a> &nbsp;<a href=“https://www.instagram.com/conventionofstatesmi/” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78018/78018_original.png?” alt=“” width=“35” height=“35” /></a> &nbsp;<a href=“https://www.linkedin.com/company/michigan-citizens-for-convention-of-states/?viewAsMember=true” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78019/78019_original.png?” alt=“” width=“35” height=“35” /></a> &nbsp;<a href=“https://rumble.com/c/michigan4cos” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78020/78020_original.png?” alt=“” width=“35” height=“35” /></a> &nbsp;<a href=“https://truthsocial.com/@michigan_COS” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78021/78021_original.png?” alt=“” width=“35” height=“35” /></a> &nbsp;<a href=“https://www.youtube.com/@michforconventionofstates” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78022/78022_original.png?” alt=“” width=“35” height=“35” /></a> &nbsp;<a href=“https://twitter.com/michigan_COS” target=“_blank” rel=“noopener”><img style=“margin: 1px;” src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/78023/78023_original.png?” alt=“” width=“35” height=“35” /></a></td>

</tr>

<tr style=“height: 37px;”>

<td style=“width: 12%; height: 37px; vertical-align: bottom;”><span style=“font-size: 14px;”><a class=“btn btn–small btn–sky-blue mrgn-c” href=“https://conventionofstates.com/michigan-events”>Events</a></span></td>

<td style=“width: 12%; height: 37px; vertical-align: bottom;”><span style=“font-size: 14px;”><a class=“btn btn–small btn–sky-blue mrgn-c” href=“https://conventionofstates.com/news?utf8=%E2%9C%93&amp;filters%5Bstate%5D=23”>Blog</a></span></td>

<td style=“width: 12px; height: 37px; vertical-align: bottom;”><span style=“font-size: 14px;”><a class=“btn btn–small btn–sky-blue mrgn-c” href=“https://conventionofstates.com/recruiting”>Become a Volunteer</a></span></td>

<td style=“width: 12px; height: 37px; vertical-align: bottom;”><span style=“font-size: 14px;”><a class=“btn btn–small btn–sky-blue mrgn-c” href=“https://conventionofstates.com/michigan-training”>Training</a></span></td>

<td style=“width: 12px; height: 37px; vertical-align: bottom;”><span style=“font-size: 14px;”><a class=“btn btn–small btn–sky-blue mrgn-c” href=“https://conventionofstates.com/michigan-resources”>Resources</a></span></td>

<td style=“width: 12px; height: 37px; vertical-align: bottom;”><span style=“font-size: 14px;”><a class=“btn btn–small btn–sky-blue mrgn-c” href=“https://conventionofstates.com/michigan-podcast”>Podcast</a></span></td>

</tr>

</tbody>

</table>

</nav></div>

<main class=“single-article”></main>

Menu - Drop Down (does not work well on mobile phones)

Sample:

website_code_dictionary_sis_pages_23641

• Event Coordinator
• Legislative Liaison
• Regional Captain

Code:

<div class=“container container–header container–responsive flex align-c-flex”><button class=“burger-button” type=“button”> </button> <a class=“logo-pages” href=“/”> </a>

<div class=“navigation flex align-c-flex”><nav class=“navbar-desctop”></nav>

<div class=“user-box avatar”>

<div class=“img-box”><img src=“https://content.conventionofstates.com/cosaction-prod/public/content/images/79152/79152_original.jpg?” width=“74” height=“74” /></div>

<ul class=“nav-dropdown no-display” style=“z-index: 90; list-style-type: none;”>

<li style=“list-style-type: none;”><a class=“link-dropdown text-upper” href=“https://conventionofstates.com/michigan-event-coordinator-resources”>Event Coordinator</a></li>

<li style=“list-style-type: none;”><a class=“link-dropdown text-upper” href=“https://conventionofstates.com/michigan-legislative-liaison-resources”>Legislative Liaison</a></li>

<li style=“list-style-type: none;”><a class=“link-dropdown text-upper” href=“https://dashboard.conventionofstates.com/”>Regional Captain</a></li>

</ul>

</div>

</div>

</div>

Menu - Old COS MI

Pictures/Videos in 2 Columns

Sample:

<HTML><ul></HTML> <HTML><li></HTML><HTML><p></HTML><HTML></p></HTML>

<HTML></li></HTML> <HTML><li></HTML><HTML><p></HTML><HTML></p></HTML>

<HTML></li></HTML> <HTML><li></HTML><HTML><p></HTML><HTML></p></HTML>

<HTML></li></HTML><HTML></ul></HTML>

Code:

<section class=“layout-two-column mb-50”>

<div class=“layout-two-column__item–big main-img-wrap content-box content-box–mobile overlay radius”><img class=“transform-c-c lazy” data-src=“https://img.youtube.com/vi/oVQH0JbwIgA/0.jpg” />

<h2 class=“title title–biggest title–mobile title–white align-c bold”>The Article V Process Explained</h2>

</div>

<ul class=“video-slider–resource layout-two-column__item–small layout-two-column__item–mobile-hide”>

<li class=“video__item video__item–smaller video__item–space-b”><img class=“transform-c-c” src=“https://img.youtube.com/vi/sAEVecIqrns/0.jpg” />

<h3 class=“title title–default-size title–white bold align-c”>The Convention of States Article V Application</h3>

</li>

<li class=“video__item video__item–smaller video__item–space-b”><img class=“transform-c-c” src=“https://img.youtube.com/vi/IRDPjQxvXFc/0.jpg” />

<h3 class=“title title–default-size title–white bold align-c”>Why the American Framers inserted Convention of States into the Constitution</h3>

</li>

<li class=“video__item video__item–smaller video__item–space-b”><img class=“transform-c-c” src=“https://img.youtube.com/vi/GHZCv7jqj74/0.jpg” />

<h3 class=“title title–default-size title–white bold align-c”>A Primer on Article V History with Rob Natelson</h3>

</li>

</ul>

</section>

Show/Hide Button

Show/Hide This text is hidden at first, but can be expanded by the user.

Code:

<details>

<summary>Show/Hide</summary>

This text is hidden at first, but can be expanded by the user.</details>

Alternate version without arrow.

Show More / Show Less The Text you want to make appear.

Code:

<details style=“list-style: none;”>

<summary style=“list-style: none; font-size: 14px; cursor: pointer;”>Show More / Show Less</summary>

The Text you want to make appear</details>

Slider (Automatic slider on desktop)

Sample:
Note: You can customize the number of slides.

<HTML><ul></HTML> <HTML><li></HTML» Text 1, Slide 1

<HTML><p></HTML>Mark Levin<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» Text 2, Slide 1

<HTML><p></HTML>Dr. Kevin Roberts<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» Text 3, Slide 1

<HTML><p></HTML>Kirk Cameron<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» Text 1, Slide 2

<HTML><p></HTML>Gov. Ron DeSantis<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» Text 2, Slide 2

<HTML><p></HTML>Ben Shapiro<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» Text 3, Slide 2

<HTML><p></HTML>Jenna Ellis<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» Text 1, Slide 3

<HTML><p></HTML>Vivek Ramaswamy<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» Text 2, Slide 3

<HTML><p></HTML>Sen. Rand Paul<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» Text 3, Slide 3

<HTML><p></HTML>Dave Rubin<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» your text, Slide 4

<HTML><p></HTML>Hon. Ben Carson<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» your text, Slide 4

<HTML><p></HTML>Gov. Greg Abbott<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» your text, Slide 4

<HTML><p></HTML>Lt. Gov. Mark Robinson<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» your text, Slide 5

<HTML><p></HTML>Gov. Mike Dunleavy<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» your text, Slide 5

<HTML><p></HTML>Rep. Chip Roy<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» your text, Slide 5

<HTML><p></HTML>Lt. Col. Allen West<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» your text, Slide 6

<HTML><p></HTML>Mark Meadows<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» your text, Slide 6

<HTML><p></HTML>Charlie Kirk<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML» your text, Slide 6

<HTML><p></HTML>James O'Keefe<HTML></p></HTML><HTML></li></HTML> <HTML><li></HTML> <HTML></li></HTML> <HTML><li></HTML>Mississippi Center for Public Policy<HTML></li></HTML><HTML></ul></HTML>

Code:

<ul class=“slider-list main-slider-js endorsers-slider”>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_1”><span class=“toggler-cut-text-js”>Text 1, Slide 1<br /></span></blockquote>

<span class=“slider-item__name”>Mark Levin</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_85”>Text 2, Slide 1</blockquote>

<span class=“slider-item__name”>Dr. Kevin Roberts</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_76”>Text 3, Slide 1</blockquote>

<span class=“slider-item__name”>Kirk Cameron</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_18”>Text 1, Slide 2</blockquote>

<span class=“slider-item__name”>Gov. Ron DeSantis</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_6”>Text 2, Slide 2</blockquote>

<span class=“slider-item__name”>Ben Shapiro</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_68”>Text 3, Slide 2</blockquote>

<span class=“slider-item__name”>Jenna Ellis</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_78”>Text 1, Slide 3</blockquote>

<span class=“slider-item__name”>Vivek Ramaswamy</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_4”>Text 2, Slide 3</blockquote>

<span class=“slider-item__name”>Sen. Rand Paul</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_74”>Text 3, Slide 3</blockquote>

<span class=“slider-item__name”>Dave Rubin</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_25”>your text, Slide 4</blockquote>

<span class=“slider-item__name”>Hon. Ben Carson</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_2”>your text, Slide 4</blockquote>

<span class=“slider-item__name”>Gov. Greg Abbott</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_69”>your text, Slide 4</blockquote>

<span class=“slider-item__name”>Lt. Gov. Mark Robinson</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_81 toggler-wrap-js”>your text, Slide 5</blockquote>

<span class=“slider-item__name”>Gov. Mike Dunleavy</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_73”>your text, Slide 5</blockquote>

<span class=“slider-item__name”>Rep. Chip Roy</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_13”>your text, Slide 5</blockquote>

<span class=“slider-item__name”>Lt. Col. Allen West</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_67”>your text, Slide 6</blockquote>

<span class=“slider-item__name”>Mark Meadows</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_14 toggler-wrap-js”>your text, Slide 6</blockquote>

<span class=“slider-item__name”>Charlie Kirk</span></li>

<li class=“slider-item”>

<figure class=“slider-item__img-wrap”><img class=“slider-item__img” data-lazy=“https://image link” /></figure>

<blockquote class=“toggler-text-container-js slider-item__description endorser_37”>your text, Slide 6</blockquote>

<span class=“slider-item__name”>James O'Keefe</span></li>

</ul>

Menu - Old COS MI

Menu - Old COS MI

Menu - Old COS MI