Small Card Example
How do I make an small card example?
What is a small card example? How do you make a small card example? This script and codes were developed by Sean McCambridge on 08 September 2022, Thursday.
Small Card Example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Small Card Example</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'>
<link rel='stylesheet prefetch' href='https://boomtownroi.github.io/boomstrap/css/boomstrap.css'>
<link rel='stylesheet prefetch' href='https://boomtownroi.github.io/boomstrap/css/boomstrap-docs.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="myApp" class="container"> <div ng-controller="SingleCardDemoCtrl"> <bt-property-card size="sm" property="property"></bt-property-card> </div>
</div> <script src='https://boomtownroi.github.io/boomstrap/js/boomstrap.min.js'></script>
<script src='https://boomtownroi.github.io/boomstrap/js/boomstrap-angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Small Card Example - Script Codes CSS Codes
/* this CSS is only for proper display of the codepen. do not add this to the CRM */
body { padding: 36px 0;
}
.container { min-width: 852px;
}
Small Card Example - Script Codes JS Codes
angular.module('myApp', ['boomstrap'])
.controller('SingleCardDemoCtrl', ['$scope', function($scope) { $scope.property = {}; // this would normally be populated from a service/API call // the following can be specified individually or via object notation {} $scope.property.imageSrc = ['http://lorempixel.com/output/animals-q-g-800-600-3.jpg']; $scope.property.defaultImageSrc = 'http://placekitten.com/800/600'; $scope.property.listPrice = '$2,250,000'; $scope.property.listingUrl = 'https://www.google.com/search?q=quaint+outhouse&tbm=isch'; $scope.property.backOnMarket = moment().subtract('hours', 1); // only populated for new listings (triggers sash) $scope.property.bestFits = '1444'; $scope.property.favs = '33'; $scope.property.mls = '1324961'; $scope.property.listed = '6 days ago'; $scope.property.pricePerSqft = '$1.99'; $scope.property.beds = '5'; $scope.property.baths = '3.5'; $scope.property.sqft = '4,195'; $scope.property.acres = '2.75'; $scope.property.type = 'Frat House'; $scope.property.address = { street: '123 Fourth St.', city: 'Charleston', state: 'SC', neighborhood: 'Craig\'s Landing' }; $scope.property.history = [ { 'when': '5 hrs ago', 'change': '-$250,000', 'changePercent': '2%', 'price': '$2,250,000' }, { 'when': '6 hrs ago', 'change': '-$500,000', 'changePercent': '5%', 'price': '$2,500,000' } ];
}]);
Developer | Sean McCambridge |
Username | seanboom |
Uploaded | September 08, 2022 |
Rating | 3 |
Size | 2,464 Kb |
Views | 48,576 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Carousel Card Example | 2,409 Kb |
Multiple Cards Example | 2,803 Kb |
Modal Example | 2,438 Kb |
Tour Example | 2,516 Kb |
Lead Category Default Example | 2,075 Kb |
Pagination Example | 2,282 Kb |
Single Card Example | 2,462 Kb |
Progressbar Example | 2,605 Kb |
Chosen Example | 1,941 Kb |
Alert Example | 2,212 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Font stack | Adrianjacob | 1,868 Kb |
Z-index demo | Kblh | 1,534 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Website Concept | Sagoza | 3,104 Kb |
Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!