Latest Contributions by KlaraSchmitt

Whether you want to add a table or a schedule, you can easily do so by utilizing classes already built into Bootstrap. Our layout editor is built on Bootstrap, so we support nearly all of the components and helper classes. You can also use the WYSIWYG (What You See Is What You Get) table button in the text card to build a table.    Responsive Table This is built entirely with Bootstrap table classes. The classes "table-striped," "table-hover," and "table-bordered" are optional. 1. Add a row card. Set row background color and row text color. 2. Add a text card to that row. 3. Switch to the code view of the text card. 4. Paste in the following snippet, toggle out of code view, and save the page. <h3>Community Projects</h3> <div class="table-responsive"> <table class="table table-striped table-hover table-bordered"> <thead> <tr> <th>Name</th> <th>Category</th> <th>Author</th> </tr> </thead> <tbody> <tr> <td><a href="#" target="_blank">Best Bike Commute Paths</a></td> <td>Transportation</td> <td>Mike Greeves</td> </tr> <tr> <td><a href="#" target="_blank">Tracking the Emerald Ash Borer</a></td> <td>Environment</td> <td>Asnee Li</td> </tr> <tr> <td><a href="#" target="_blank">Lyme Disease Prevention</a></td> <td>Health</td> <td>Julia Tenlee</td> </tr> </tbody> </table> </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ More Complex Responsive Table This next table was inspired by this Bootsnipp agenda.  However, as this one uses <style></style> tags, I'll include my usual warning: Any embedded styles can affect your entire homepage if you do not target specific selectors correctly. Never use an ember-# ID selector as these are dynamic and will change with each page refresh. 1. Add a row card. Set row background color and row text color. 2. Add a text card to that row. 3. Switch to the code view of the text card. 4. Paste in the following snippet, toggle out of code view, and save the page. <style> .schedule-date .day { max-width: 40px; font-size: 36px; line-height: 36px; float: left; text-align: right; margin-right: 10px; } .schedule-date .text-muted { font-size: 12px; margin-top: 0px; } </style> <div class="table-responsive"> <table class="table table-condensed table-bordered"> <thead> <tr> <th>Date</th> <th>Time</th> <th>Event</th> </tr> </thead> <tbody> <tr> <td class="schedule-date" rowspan="1"> <div class="day">26</div> <div class="text-muted">Monday <br /> July, 2017</div> </td> <td> 6:30PM </td> <td> Council Meeting </td> </tr> <tr> <td class="schedule-date" rowspan="3"> <div class="day">12</div> <div class="text-muted">Thursday <br /> Aug, 2017</div> </td> <td> 10:00AM - 5:00PM </td> <td> Development Training </td> </tr> <tr> <td> 6:30PM - 8:00PM </td> <td> Civil Hackathon </td> </tr> </tbody> </table> </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

Update 08/15/2019: If you have a site that is still using cards like the one pictured on the right (a card showing image and description with an overlay button that appears on hover), we strongly recommend using one of the card patterns found on this page: http://esri.github.io/calcite-bootstrap/patterns.html. The hover style of cards that we used to include on older site templates was not found to be mobile-friendly or accessible to keyboard users. New site and page templates all now use Calcite Bootstrap cards. Alternatively, if you are using cards to highlight content (apps, data, web maps to name a few) from inside your organization, we've put a lot of effort into making our Gallery Card easier to use. If you use the dynamic option, we'll automatically add anything that meets the filter criteria to your Gallery, or if you prefer to control the order, you can use our manual option to pick featured content. Under the Style options, you can then set border radius, drop shadow, image or icon, and button text/color. All examples featured in this post can still be used as they rely on custom CSS and not the outdated code. -------------- Here are some other types of HTML cards you can build using the text card and embedded or inline CSS. Before we begin, there are a few important things to note: Some of these patterns use embedded <style></style> tags in a text card. Any embedded styles can affect your entire homepage if you do not target specific selectors correctly. Never use an ember-# ID selector as these are dynamic and will change with each page refresh. Clickable Image Card 1. Add a row card. Set the row background color. 2. Add a text card, switch to code view. (We will be using Bootstrap's grid to create columns rather than using multiple text cards.) 3. In the text card, paste the following snippet, then toggle out of code view: <style> .featured-gallery .caption { width:100%; bottom: 0px; position: absolute; background-color: rgba(52,82,80,0.7); } .featured-gallery .thumbnail { border: 0 none; box-shadow: none; margin:0 0 30px 0; padding:0; } .featured-gallery .caption strong { color: #fff; -webkit-font-smoothing: antialiased; } </style> <div class="col-xs-12 col-sm-6 featured-gallery"> <div class="col-sm-12 thumbnail text-center"> <img alt="regional park A" class="img-responsive" src="https://cloud.githubusercontent.com/assets/7389593/23568903/d8df22e4-002a-11e7-9645-da4471a5991d.jpeg"> <div class="caption"> <strong>Check out our hiking trails</strong> </div> </div> </div> <div class="col-xs-12 col-sm-6 featured-gallery"> <div class="col-sm-12 thumbnail text-center"> <img alt="regional park B" class="img-responsive" src="https://cloud.githubusercontent.com/assets/7389593/23568903/d8df22e4-002a-11e7-9645-da4471a5991d.jpeg"> <div class="caption"> <strong>Check out our hiking trails</strong> </div> </div> </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ (If you keep the current grid structure from this snippet, your replacement images need to be at least 540px wide.) Heading + Highlight Card 1. Add a row card. Set row background color and row text color. 2. Add two text cards to that same row. 3. In the text card to be the heading, paste the following snippet: <h2 style="padding-bottom: 15px; border-bottom: 4px solid #fff; display: inline-block; margin-top: 30px;"> What Can I Do With It? </h2>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 4. In the text card to be the showcase, paste the following snippet: <div style="margin-top: 30px; margin-bottom: 30px;"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;"> <div class="caption"> <h4>Card Title</h4> <p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.</p> <a href="#" class="btn btn-primary center-block" role="button">Open App</a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;"> <div class="caption"> <h4>Card Title</h4> <p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.</p> <a href="#" class="btn btn-primary center-block" role="button">Open App</a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;"> <div class="caption"> <h4>Card Title</h4> <p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.</p> <a href="#" class="btn btn-primary center-block" role="button">Open App</a> </div> </div> </div> </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍   5. Narrow the heading card by two columns in order to achieve the layout shown in the example above. (If you keep the current grid structure from this snippet, your replacement images ought to be 200x133px.) KPI Card Style #1 (Non-Dynamic) 1. Add a row card. Set the row background color. 2. Add a text card to that row, open code view. (We will be using Bootstrap's grid to create columns rather than using multiple text cards.) 3. In the text card, paste the following snippet, then toggle out of code view: <style> h2.headings {margin-bottom: 20px;} .stat-card h3{font-size: 16px; margin-top: 5px; line-height: 20px; padding-right: 45px; color: #333; text-align; left;} .stat-card {position: relative; display: inline-block; background-color: #fff; width: 320px; min-height: 170px; text-align: left; padding: 15px; border-width: 1px;border-style: solid; border-color: rgb(204, 204, 204); border-image: initial; overflow: hidden;} .stat-icon {position: absolute;top: 0px;right: 0px;width: 60px;height: 60px;line-height: 60px;text-align: center;} .stat-icon.right {right: 0px;} .stat-icon span {position: absolute;z-index: 8;top: -40px; left: 5px; width: 100px;height: 100px; line-height: 120px;border-radius: 50%;} .stat-icon i {padding-left: 15px; color: rgb(255, 255, 255); z-index: 9; font-size: 24px;} .bg-target {background-color: #E07000;} .txt-target {color: #E07000;} .bg-ontrack {background-color: #007613;} .txt-ontrack {color: #007613;} .bg-failing {background-color: #D43E3A;} .txt-failing {color: #D43E3A;} .bg-measure {background-color: #186EA5;} .txt-measure {color: #186EA5;} .stat-card h4.stat-num {font-size: 45px; text-align: left;} .stat-card .subtext {font-size: 15px;} .stat-card .source {font-size: 12px; margin-top: 15px;} .stat-card .open-btn {margin-top: 15px;} </style> <h2 class="headings text-center">Community Planning & Economic Development</h2> <ul class="cards-list"> <li class="col-xs-12 col-sm-6 col-md-4"> <div class="stat-card"> <div class="stat-icon right"><span class="bg-ontrack"></span><i class="glyphicon glyphicon-home"></i></div> <h3>Public Housing Occupancy Rate</h3> <h4 class="stat-num"><span class="txt-ontrack">88.8</span></h4> <div class="subtext"><i class="glyphicon glyphicon-triangle-top txt-ontrack"></i> percent occupied of <strong>goal: 100%</strong></div> <div class="source">Source: <a href="#">Graydale Housing Authority</a></div> </div> </li> <li class="col-xs-12 col-sm-6 col-md-4"> <div class="stat-card"> <div class="stat-icon right"><span class="bg-measure"></span><i class="glyphicon glyphicon-home"></i></div> <h3>Residents Assisted by Federal Programs</h3> <h4 class="stat-num"><span class="txt-measure">1,011</span></h4> <div class="subtext"><i class="glyphicon glyphicon glyphicon-stats txt-measure"></i> residents assisted</div> <div class="source">Source: <a href="#">Graydale Housing Authority</a></div> </div> </li> <li class="col-xs-12 col-sm-6 col-md-4"> <div class="stat-card"> <div class="stat-icon right"><span class="bg-failing"></span><i class="glyphicon glyphicon-file"></i></div> <h3>Rental Inspections Completed<br /> </h3> <h4 class="stat-num"><span class="txt-failing">29</span></h4> <div class="subtext"><i class="glyphicon glyphicon-triangle-bottom txt-failing"></i> last month of <strong>goal: 40</strong></div> <div class="source">Source: <a href="#">Graydale Housing Authority</a></div> </div> </li> </ul>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

Update 09/15/2019: This post is now outdated as we have since released the Search Card, which allows you to add a straight search to your site or page. Our early version of search was only available from within the Banner Card and subsequently required custom CSS to make it look taller, wider, and to override some of the padding that came with the banner headings even when they weren't visible. We also ditched the previous search bar that had two input fields (one for keyword and one for location) in favor of one smarter search bar that can search by location via the keyword near, which is included in the helper text at the bottom of the autosuggest. You can read more about the search bar and our new search experience on our blog. --- In our layout builder, the search bar appears as part of our banner card. The banner card is based around Bootstrap's .jumbotron class and inherits padding from that class, which you may want to remove. Here are some ways you can change the look of your search bar using a text card. Before we begin, there are a few important things to note: The CSS provided here is from other customers' implementations and has not been cross browser tested by us; therefore, we do not guarantee that it will work perfectly with our layout and cards in the manner that you might want. Styling the search bar requires embedded <style></style> in a text card.  Any embedded styles can affect your entire homepage if you do not target specific selectors correctly. It does not matter where in the page you place the text card. Never use an ember-# ID selector as these are dynamic and will change with each page refresh. Styling the .jumbotron class will affect all banner cards you add to your page. Single Long Search Bar 1. Add a row card. Set row background color and row text color. 2. Add a text card to the row.  3. Add a banner card underneath the text card in the same row. 4. In the banner card settings, remove the headline. Add a subheadline to achieve the "Enter a keyword..." Delete all other field values. Select 'Show Searchbar' checkbox and add any desired search bar placeholder text. 5. In the text card, delete the contents and paste in the following snippet:  Edit: Kevin Dunlop has pointed out that there are issues with typing in the search bar for IE11 if you use the original styles I posted (I have since deleted them.) He figured out that it was due to the padding and provided the following snippet, which he verified works correctly. <style> h2.single-sb-heading {margin-bottom: 0px; padding: 0px; font-size: 20px; color: #005eb8;} .ember-application .jumbotron {padding: 0px auto; margin: 0px auto;} .ember-application .jumbotron h1 {font-size: 28px;text-shadow:none;} .ember-application .jumbotron p {padding-bottom: 0px;} .ember-application .jumbotron form input {width:500px;} </style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ <h2 class="single-sb-heading text-center">Search Data and Apps</h2>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ (You may notice a slight visual discrepancy between the layout editor and viewing the live site in all of these as the text card has a min-height in the layout editor.) ... View more